/* Phase 4B.3: Maintenance cleanup - normalized spacing and section markers */
/* ==========================================================
   Extracted style block 2: reduced-motion-svg-fix
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
      .journey-pulse { display: none !important; }
      .ctv-display-card,
      .ctv-screen-highlight,
      .ctvbridge-glow-wrapper::after,
      .business-insight-card,
      .path-channels-group .journey-path,
      .path-phone-user .journey-path,
      .path-user-ctvbridge .journey-path,
      .path-ctvbridge-tv .journey-path {
        animation: none !important;
      }
      .path-channels-group .journey-path,
      .path-phone-user .journey-path,
      .path-user-ctvbridge .journey-path,
      .path-ctvbridge-tv .journey-path {
        stroke-dashoffset: 0 !important;
      }
    }
  
    /* ==========================================
       9. SECTION 2 — THE ATTRIBUTION GAP
       ========================================== */
    .problem-section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 7rem 2rem 8rem;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 5rem;
      align-items: start;
      border-top: 1px solid var(--color-border-light);
    }

    .problem-copy {
      max-width: 620px;
    }

    .section-eyebrow {
      display: inline-block;
      margin-bottom: 1.25rem;
      color: var(--color-primary-blue);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .problem-title {
      margin-bottom: 1.75rem;
      color: var(--color-text-main);
      font-size: clamp(2.5rem, 4.6vw, 4.5rem);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.045em;
    }

    .problem-description {
      color: var(--color-text-muted);
      font-size: 1.12rem;
      line-height: 1.75;
    }

    .problem-description + .problem-description {
      margin-top: 1rem;
    }

    .problem-closing {
      margin-top: 2rem;
      color: var(--color-text-main);
      font-size: 1.18rem;
      font-weight: 700;
      letter-spacing: -0.015em;
    }

    .problem-consequences {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--color-border-light);
    }

    .consequence-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 1rem;
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--color-border-light);
    }

    .consequence-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid var(--color-border-light);
      border-radius: 50%;
      color: var(--color-primary-blue);
      background: var(--color-neutral-fill);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .consequence-title {
      margin-bottom: 0.4rem;
      color: var(--color-text-main);
      font-size: 1.18rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .consequence-text {
      color: var(--color-text-muted);
      font-size: 0.98rem;
      line-height: 1.65;
    }

    .problem-cta {
      grid-column: 1 / -1;
      margin-top: 1rem;
      padding: 1.75rem 2rem;
      border: 1px solid var(--color-border-light);
      border-radius: 16px;
      background: var(--color-neutral-fill);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

    .problem-cta-copy {
      max-width: 720px;
    }

    .problem-cta-title {
      color: var(--color-text-main);
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: -0.025em;
      margin-bottom: 0.35rem;
    }

    .problem-cta-text {
      color: var(--color-text-muted);
      font-size: 0.98rem;
      line-height: 1.6;
    }

    .problem-cta-link {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.85rem 1.25rem;
      border-radius: 8px;
      background: var(--color-text-main);
      color: #fff;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 700;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .problem-cta-link:hover {
      transform: translateY(-1px);
      background: #1E293B;
    }

    @media (max-width: 760px) {
      .problem-cta {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 900px) {
      .problem-section {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        padding-top: 5rem;
        padding-bottom: 6rem;
      }

      .problem-copy {
        max-width: 720px;
      }
    }

    @media (max-width: 680px) {
      .problem-section {
        padding: 4rem 1.25rem 5rem;
      }

      .problem-title {
        font-size: 2.45rem;
      }

      .problem-description {
        font-size: 1rem;
      }

      .consequence-item {
        grid-template-columns: 34px 1fr;
        gap: 0.85rem;
        padding: 1.4rem 0;
      }
    }

  
    /* ==========================================
       10. SECTION 3 — THE CTVBRIDGE SOLUTION
       ========================================== */
    .solution-section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 8rem 2rem;
      border-top: 1px solid var(--color-border-light);
    }

    .solution-header {
      max-width: 860px;
      margin: 0 auto 4.5rem;
      text-align: center;
    }

    .solution-title {
      margin-bottom: 1.5rem;
      color: var(--color-text-main);
      font-size: clamp(2.6rem, 5vw, 4.7rem);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.045em;
    }

    .solution-description {
      max-width: 760px;
      margin: 0 auto;
      color: var(--color-text-muted);
      font-size: 1.12rem;
      line-height: 1.75;
    }

    .solution-description + .solution-description {
      margin-top: 0.9rem;
    }

    .solution-flow {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
      align-items: stretch;
    }

    .solution-flow::before {
      content: '';
      position: absolute;
      top: 42px;
      left: 16.5%;
      right: 16.5%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(2,132,199,.22),
        var(--color-primary-blue),
        rgba(2,132,199,.22)
      );
      z-index: 0;
    }

    .solution-step {
      position: relative;
      z-index: 1;
      padding: 2rem;
      border: 1px solid var(--color-border-light);
      border-radius: 18px;
      background: #FFFFFF;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    }

    .solution-step-top {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 84px;
      height: 84px;
      margin: 0 auto 1.5rem;
      border: 1px solid rgba(2,132,199,.22);
      border-radius: 50%;
      background: #F0F9FF;
      color: var(--color-primary-blue);
      box-shadow: 0 0 0 10px #FFFFFF;
    }

    .solution-step-icon {
      width: 36px;
      height: 36px;
    }

    .solution-step-number {
      display: inline-block;
      margin-bottom: 0.75rem;
      color: var(--color-primary-blue);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .solution-step-title {
      margin-bottom: 0.75rem;
      color: var(--color-text-main);
      font-size: 1.28rem;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .solution-step-text {
      color: var(--color-text-muted);
      font-size: 0.98rem;
      line-height: 1.68;
    }

    .solution-closing {
      margin: 3.5rem auto 0;
      max-width: 760px;
      text-align: center;
      color: var(--color-text-main);
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    @media (max-width: 900px) {
      .solution-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
      }

      .solution-flow {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }

      .solution-flow::before {
        top: 42px;
        bottom: 42px;
        left: 42px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(
          180deg,
          rgba(2,132,199,.22),
          var(--color-primary-blue),
          rgba(2,132,199,.22)
        );
      }

      .solution-step {
        padding-left: 7rem;
        min-height: 150px;
      }

      .solution-step-top {
        position: absolute;
        top: 2rem;
        left: 0;
        width: 84px;
        height: 84px;
        margin: 0;
      }
    }

    @media (max-width: 680px) {
      .solution-section {
        padding: 4.5rem 1.25rem 5rem;
      }

      .solution-header {
        margin-bottom: 3rem;
        text-align: left;
      }

      .solution-description {
        font-size: 1rem;
      }

      .solution-step {
        padding: 1.5rem 1.25rem 1.5rem 5.5rem;
        min-height: 140px;
      }

      .solution-step-top {
        top: 1.5rem;
        width: 64px;
        height: 64px;
      }

      .solution-flow::before {
        left: 32px;
        top: 32px;
        bottom: 32px;
      }

      .solution-step-icon {
        width: 28px;
        height: 28px;
      }

      .solution-closing {
        text-align: left;
        font-size: 1.2rem;
      }
    }

/* ==========================================================
   Extracted style block 3: section3-compact-override
   ========================================================== */
.solution-header{margin:0 auto 2.5rem!important;max-width:760px!important}
.solution-section{padding:6rem 2rem!important}
.solution-title{margin-bottom:1rem!important}
.solution-description{font-size:1rem!important;line-height:1.6!important}
.solution-description+.solution-description{margin-top:.4rem!important}
.solution-flow{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:0!important;position:relative!important}
.solution-flow:before{content:'';position:absolute;top:32px;left:12%;right:12%;height:2px;background:#0284C7;opacity:.25}
.solution-step{border:none!important;box-shadow:none!important;background:transparent!important;padding:0 1rem!important;text-align:center!important;flex:1}
.solution-step-top{width:64px!important;height:64px!important;margin:0 auto .8rem!important;box-shadow:none!important}
.solution-step-number{display:none!important}
.solution-step-title{font-size:1.05rem!important;margin-bottom:.35rem!important}
.solution-step-text{font-size:.9rem!important;max-width:180px;margin:0 auto!important;line-height:1.45!important}
.solution-closing{margin-top:2.5rem!important;font-size:1.15rem!important}
@media(max-width:900px){
.solution-flow{display:grid!important;grid-template-columns:1fr!important;gap:1.25rem!important}
.solution-flow:before{left:32px;top:32px;bottom:32px;right:auto;width:2px;height:auto}
.solution-step{border:1px solid var(--color-border-light)!important;border-radius:16px!important;box-shadow:0 6px 16px rgba(0,0,0,.04)!important;background:#fff!important;padding:1.25rem 1.25rem 1.25rem 5.5rem!important;text-align:left!important;position:relative}
.solution-step-top{position:absolute;left:1rem;top:1rem;margin:0!important}
.solution-step-text{max-width:none!important;margin:0!important}
}

/* ==========================================================
   Extracted style block 4: section3-final-compact
   ========================================================== */
.solution-section{
 padding:3.5rem 2rem 3.75rem !important;
 min-height:auto !important;
}
.solution-header{
 margin:0 auto 1.4rem !important;
 max-width:700px !important;
}
.solution-title{
 font-size:clamp(1.9rem,3vw,2.8rem)!important;
 line-height:1.08!important;
 margin-bottom:.6rem!important;
}
.solution-description{
 font-size:.95rem!important;
 line-height:1.5!important;
 max-width:640px!important;
}
.solution-flow{
 margin:1.4rem auto!important;
}
.solution-step-top{
 margin-bottom:.65rem!important;
}
.solution-step h3{
 margin:.4rem 0!important;
 font-size:1.05rem!important;
}
.solution-step p{
 font-size:.9rem!important;
 line-height:1.45!important;
}
.solution-closing{
 margin-top:1.3rem!important;
 font-size:1rem!important;
}
@media (max-width:900px){
 .solution-section{padding:3rem 1.5rem!important;}
 .solution-title{font-size:2rem!important;}
}

/* ==========================================================
   Extracted style block 5: section4-how-it-works-v3
   ========================================================== */
/* Section 3 ends cleanly without excessive dead space. */
.solution-section{
  padding-bottom:4.75rem !important;
}

/* Section 4 is designed to fit within a typical desktop viewport. */
.how-section{
  background:#f8fbff;
  padding:3.5rem 2rem 3.75rem;
}
.how-container{
  width:min(1160px,100%);
  margin:0 auto;
}
.how-header{
  max-width:760px;
  margin:0 auto 1.8rem;
  text-align:center;
}
.how-eyebrow{
  margin:0 0 .6rem;
  color:var(--color-primary-blue);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.how-title{
  margin:0;
  color:var(--color-heading);
  font-size:clamp(1.9rem,2.8vw,2.75rem);
  line-height:1.06;
  letter-spacing:-.035em;
}
.how-description{
  max-width:680px;
  margin:.7rem auto 0;
  color:var(--color-text-muted);
  font-size:.94rem;
  line-height:1.5;
}
.how-journey{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin:1.5rem auto 0;
}
.how-journey::before{
  content:"";
  position:absolute;
  top:31px;
  left:9%;
  right:9%;
  height:2px;
  background:linear-gradient(90deg,rgba(2,132,199,.16),rgba(2,132,199,.7),rgba(2,132,199,.16));
}
.how-stage{
  position:relative;
  z-index:1;
  text-align:center;
}
.how-stage-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  margin:0 auto .7rem;
  border:1px solid rgba(2,132,199,.18);
  border-radius:18px;
  background:#fff;
  color:var(--color-primary-blue);
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.how-stage-icon svg{
  width:27px;
  height:27px;
}
.how-stage-kicker{
  display:block;
  margin-bottom:.16rem;
  color:var(--color-primary-blue);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.how-stage h3{
  margin:0;
  color:var(--color-heading);
  font-size:.98rem;
  line-height:1.22;
}
.how-stage p{
  max-width:185px;
  margin:.34rem auto 0;
  color:var(--color-text-muted);
  font-size:.82rem;
  line-height:1.4;
}
.how-stage:last-child .how-stage-icon{
  color:var(--color-verified-green);
  border-color:rgba(22,163,74,.24);
}
.how-closing{
  max-width:760px;
  margin:1.55rem auto 0;
  text-align:center;
  color:var(--color-heading);
  font-size:.96rem;
  font-weight:650;
}
@media(max-width:960px){
  .how-journey{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .how-journey::before{
    display:none;
  }
}
@media(max-width:680px){
  .solution-section{
    padding-bottom:4rem !important;
  }
  .how-section{
    padding:3.25rem 1.25rem 3.5rem;
  }
  .how-title{
    font-size:2rem;
  }
  .how-journey{
    grid-template-columns:1fr;
    gap:.8rem;
  }
  .how-stage{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:.85rem;
    align-items:center;
    text-align:left;
  }
  .how-stage-icon{
    width:58px;
    height:58px;
    margin:0;
  }
  .how-stage p{
    max-width:none;
    margin:.2rem 0 0;
  }
  .how-stage-kicker{
    margin-bottom:.1rem;
  }
}

/* ==========================================================
   Extracted style block 6: section5-business-impact
   ========================================================== */
.impact-section{
  background:#ffffff;
  padding:4rem 2rem 4.25rem;
}
.impact-container{
  width:min(1120px,100%);
  margin:0 auto;
}
.impact-header{
  max-width:760px;
  margin:0 auto 2.1rem;
  text-align:center;
}
.impact-eyebrow{
  margin:0 0 .6rem;
  color:var(--color-primary-blue);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.impact-title{
  margin:0;
  color:var(--color-text-main);
  font-size:clamp(1.95rem,2.9vw,2.85rem);
  line-height:1.07;
  letter-spacing:-.035em;
}
.impact-description{
  max-width:680px;
  margin:.75rem auto 0;
  color:var(--color-text-muted);
  font-size:.95rem;
  line-height:1.5;
}
.impact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
  margin-top:2rem;
}
.impact-item{
  text-align:center;
  padding:.25rem .75rem;
}
.impact-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  margin:0 auto .8rem;
  border:1px solid rgba(2,132,199,.18);
  border-radius:18px;
  background:#F8FBFF;
  color:var(--color-primary-blue);
}
.impact-icon svg{
  width:27px;
  height:27px;
}
.impact-item h3{
  margin:0;
  color:var(--color-text-main);
  font-size:1.05rem;
  line-height:1.25;
}
.impact-item p{
  max-width:275px;
  margin:.45rem auto 0;
  color:var(--color-text-muted);
  font-size:.88rem;
  line-height:1.48;
}
.impact-closing{
  max-width:760px;
  margin:1.8rem auto 0;
  text-align:center;
  color:var(--color-text-main);
  font-size:1rem;
  font-weight:650;
}
@media(max-width:820px){
  .impact-section{
    padding:3.5rem 1.25rem 3.75rem;
  }
  .impact-grid{
    grid-template-columns:1fr;
    gap:1.4rem;
  }
  .impact-item{
    max-width:520px;
    margin:0 auto;
  }
}

/* ==========================================================
   Extracted style block 7: section6-integrations
   ========================================================== */
.integration-section{
  background:#f8fbff;
  padding:4rem 2rem 4.25rem;
}
.integration-container{
  width:min(1120px,100%);
  margin:0 auto;
}
.integration-header{
  max-width:780px;
  margin:0 auto 2.2rem;
  text-align:center;
}
.integration-eyebrow{
  margin:0 0 .6rem;
  color:var(--color-primary-blue);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.integration-title{
  margin:0;
  color:var(--color-text-main);
  font-size:clamp(1.95rem,2.9vw,2.85rem);
  line-height:1.07;
  letter-spacing:-.035em;
}
.integration-description{
  max-width:710px;
  margin:.75rem auto 0;
  color:var(--color-text-muted);
  font-size:.95rem;
  line-height:1.5;
}
.integration-map{
  position:relative;
  margin:2.1rem auto 0;
  padding:2rem 1.5rem 1.75rem;
  border:1px solid var(--color-border-light);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.integration-core{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:170px;
  height:54px;
  margin:0 auto 1.7rem;
  border:1px solid rgba(2,132,199,.24);
  border-radius:16px;
  background:#f0f9ff;
  color:var(--color-primary-blue);
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.integration-groups{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.integration-groups::before{
  content:"";
  position:absolute;
  top:-26px;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:linear-gradient(90deg,rgba(2,132,199,.12),rgba(2,132,199,.5),rgba(2,132,199,.12));
}
.integration-group{
  position:relative;
  padding:1rem .75rem 0;
  text-align:center;
}
.integration-group::before{
  content:"";
  position:absolute;
  top:-26px;
  left:50%;
  width:1px;
  height:26px;
  background:rgba(2,132,199,.28);
}
.integration-group h3{
  margin:0 0 .6rem;
  color:var(--color-text-main);
  font-size:.95rem;
}
.integration-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
}
.integration-pill{
  padding:.42rem .65rem;
  border:1px solid var(--color-border-light);
  border-radius:999px;
  background:#fff;
  color:var(--color-text-muted);
  font-size:.76rem;
  font-weight:650;
  line-height:1;
}
.integration-pill.is-active{
  color:var(--color-primary-blue);
  border-color:rgba(2,132,199,.25);
  background:#f0f9ff;
}
.integration-pill.is-roadmap{
  color:var(--color-text-subtle);
  background:var(--color-neutral-fill);
}
.integration-pill small{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.integration-pill.is-roadmap small{
  color:var(--color-text-subtle);
}
.integration-pill.is-active small{
  color:var(--color-primary-blue);
}
.integration-pill + .integration-pill{}
.integration-pill span{
  white-space:nowrap;
}
.integration-pill .status-label{
  margin-left:.18rem;
}
.integration-pill.is-roadmap .status-label::before{
  content:"· ";
}
.integration-pill.is-active .status-label::before{
  content:"· ";
}
.integration-pill.is-active .status-label{
  color:var(--color-primary-blue);
}
.integration-pill.is-roadmap .status-label{
  color:var(--color-text-subtle);
}
.integration-pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:2rem;
}
.integration-pillar{
  padding:1.3rem 1.25rem;
  border-top:1px solid var(--color-border-light);
}
.integration-pillar h3{
  margin:0 0 .4rem;
  color:var(--color-text-main);
  font-size:1rem;
}
.integration-pillar p{
  margin:0;
  color:var(--color-text-muted);
  font-size:.88rem;
  line-height:1.5;
}
.integration-closing{
  max-width:760px;
  margin:1.8rem auto 0;
  text-align:center;
  color:var(--color-text-main);
  font-size:1rem;
  font-weight:650;
}
@media(max-width:900px){
  .integration-groups{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem 1rem;
  }
  .integration-groups::before,
  .integration-group::before{
    display:none;
  }
  .integration-pillar-grid{
    grid-template-columns:1fr;
    gap:.4rem;
  }
}
@media(max-width:680px){
  .integration-section{
    padding:3.5rem 1.25rem 3.75rem;
  }
  .integration-map{
    padding:1.5rem 1rem;
  }
  .integration-groups{
    grid-template-columns:1fr;
  }
  .integration-core{
    width:155px;
  }
}

/* ==========================================================
   Extracted style block 8: sections7-8
   ========================================================== */
.credibility-section{
  background:#ffffff;
  padding:4rem 2rem 4.25rem;
}
.credibility-container{
  width:min(1080px,100%);
  margin:0 auto;
  text-align:center;
}
.credibility-eyebrow{
  margin:0 0 .65rem;
  color:var(--color-primary-blue);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.credibility-title{
  max-width:820px;
  margin:0 auto;
  color:var(--color-text-main);
  font-size:clamp(1.95rem,2.9vw,2.85rem);
  line-height:1.08;
  letter-spacing:-.035em;
}
.credibility-copy{
  max-width:780px;
  margin:.85rem auto 0;
  color:var(--color-text-muted);
  font-size:.96rem;
  line-height:1.58;
}
.credibility-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin:2.3rem auto 0;
}
.credibility-metric{
  padding:1.65rem 1.25rem 1.5rem;
  border:1px solid var(--color-border-light);
  border-radius:18px;
  background:#fbfdff;
}
.credibility-value{
  display:block;
  margin:0 0 .35rem;
  color:var(--color-text-main);
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.credibility-label{
  display:block;
  color:var(--color-text-muted);
  font-size:.82rem;
  line-height:1.4;
}
.credibility-closing{
  max-width:760px;
  margin:1.8rem auto 0;
  color:var(--color-text-main);
  font-size:.98rem;
  font-weight:650;
  line-height:1.5;
}

.final-cta-section{
  background:#0d1b2a;
  padding:4.6rem 2rem 4.8rem;
}
.final-cta-container{
  width:min(900px,100%);
  margin:0 auto;
  text-align:center;
}
.final-cta-title{
  margin:0;
  color:#ffffff;
  font-size:clamp(2.1rem,3.5vw,3.35rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.final-cta-copy{
  max-width:680px;
  margin:.9rem auto 0;
  color:rgba(255,255,255,.72);
  font-size:.98rem;
  line-height:1.58;
}
.final-cta-actions{
  display:flex;
  justify-content:center;
  gap:.85rem;
  margin-top:1.8rem;
}
.final-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.78rem 1.25rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:750;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.final-cta-button:hover{
  transform:translateY(-1px);
}
.final-cta-button.primary{
  background:#ffffff;
  color:#0d1b2a;
}
.final-cta-button.secondary{
  border:1px solid rgba(255,255,255,.25);
  color:#ffffff;
  background:transparent;
}
.final-cta-button.secondary:hover{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.05);
}
.final-cta-note{
  margin:1rem 0 0;
  color:rgba(255,255,255,.5);
  font-size:.76rem;
}
@media(max-width:760px){
  .credibility-section{
    padding:3.5rem 1.25rem 3.75rem;
  }
  .credibility-metrics{
    grid-template-columns:1fr;
  }
  .final-cta-section{
    padding:4rem 1.25rem 4.2rem;
  }
  .final-cta-actions{
    flex-direction:column;
    align-items:stretch;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ==========================================================
   Extracted style block 9: section2-cohesive-restyle
   ========================================================== */
/* Section 2 only — preserve the original structure and copy */
.problem-section{
  width:min(1120px,calc(100% - 4rem))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:5.25rem 0 5.5rem!important;
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  gap:4rem!important;
  align-items:center!important;
  border-top:1px solid var(--color-border-light)!important;
  background:#fff!important;
}

.problem-copy{
  max-width:520px!important;
}

.problem-section .section-eyebrow{
  margin-bottom:.7rem!important;
  color:var(--color-primary-blue)!important;
  font-size:.75rem!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}

.problem-title{
  margin:0 0 1.15rem!important;
  color:var(--color-text-main)!important;
  font-size:clamp(2.15rem,3.55vw,3.65rem)!important;
  font-weight:700!important;
  line-height:1.06!important;
  letter-spacing:-.04em!important;
}

.problem-description{
  color:var(--color-text-muted)!important;
  font-size:.98rem!important;
  line-height:1.62!important;
}

.problem-description + .problem-description{
  margin-top:.75rem!important;
}

.problem-closing{
  margin-top:1.35rem!important;
  color:var(--color-text-main)!important;
  font-size:1rem!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.015em!important;
}

.problem-consequences{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:.9rem!important;
  border-top:0!important;
}

.consequence-item{
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  gap:1rem!important;
  align-items:start!important;
  padding:1.25rem 1.3rem!important;
  border:1px solid var(--color-border-light)!important;
  border-radius:16px!important;
  background:#fbfdff!important;
  box-shadow:0 10px 26px rgba(15,23,42,.035)!important;
}

.consequence-number{
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(2,132,199,.22)!important;
  border-radius:50%!important;
  background:#f0f9ff!important;
  color:var(--color-primary-blue)!important;
  font-size:.76rem!important;
  font-weight:800!important;
}

.consequence-title{
  margin:0 0 .35rem!important;
  color:var(--color-text-main)!important;
  font-size:1.02rem!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:-.02em!important;
}

.consequence-text{
  color:var(--color-text-muted)!important;
  font-size:.88rem!important;
  line-height:1.55!important;
}

@media(max-width:900px){
  .problem-section{
    width:min(100% - 3rem,760px)!important;
    grid-template-columns:1fr!important;
    gap:2.5rem!important;
    padding:4.25rem 0 4.75rem!important;
  }
  .problem-copy{
    max-width:720px!important;
    text-align:center!important;
    margin:0 auto!important;
  }
}

@media(max-width:680px){
  .problem-section{
    width:calc(100% - 2.5rem)!important;
    padding:3.5rem 0 4rem!important;
  }
  .problem-title{
    font-size:2.25rem!important;
  }
  .consequence-item{
    grid-template-columns:36px 1fr!important;
    gap:.8rem!important;
    padding:1.1rem!important;
  }
}

/* ==========================================================
   Extracted style block 10: section2-centered-restyle
   ========================================================== */
/* Section 2 only — centered presentation matching the visual language of Sections 3–7 */
.problem-section{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:4.6rem 2rem 4.9rem!important;
  display:block!important;
  background:#f8fbff!important;
  border-top:0!important;
}

.problem-copy{
  width:min(900px,100%)!important;
  max-width:900px!important;
  margin:0 auto!important;
  text-align:center!important;
}

.problem-section .section-eyebrow{
  margin:0 0 .7rem!important;
  color:var(--color-primary-blue)!important;
  font-size:.75rem!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

.problem-title{
  max-width:920px!important;
  margin:0 auto!important;
  color:var(--color-text-main)!important;
  font-size:clamp(2rem,3.05vw,3.05rem)!important;
  font-weight:700!important;
  line-height:1.08!important;
  letter-spacing:-.038em!important;
}

.problem-description{
  max-width:780px!important;
  margin:.85rem auto 0!important;
  color:var(--color-text-muted)!important;
  font-size:.96rem!important;
  line-height:1.58!important;
}

.problem-description + .problem-description{
  margin-top:.55rem!important;
}

.problem-closing{
  max-width:760px!important;
  margin:1.55rem auto 0!important;
  color:var(--color-text-main)!important;
  font-size:.98rem!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.01em!important;
}

.problem-consequences{
  width:min(1120px,100%)!important;
  margin:2.45rem auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1.15rem!important;
  border-top:0!important;
}

.consequence-item{
  display:block!important;
  padding:1.55rem 1.35rem 1.45rem!important;
  border:1px solid var(--color-border-light)!important;
  border-radius:18px!important;
  background:#ffffff!important;
  text-align:center!important;
  box-shadow:0 10px 26px rgba(15,23,42,.035)!important;
}

.consequence-number{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:38px!important;
  margin:0 auto .9rem!important;
  border:1px solid rgba(2,132,199,.22)!important;
  border-radius:50%!important;
  background:#f0f9ff!important;
  color:var(--color-primary-blue)!important;
  font-size:.76rem!important;
  font-weight:800!important;
}

.consequence-title{
  margin:0 0 .45rem!important;
  color:var(--color-text-main)!important;
  font-size:1rem!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:-.018em!important;
}

.consequence-text{
  margin:0!important;
  color:var(--color-text-muted)!important;
  font-size:.86rem!important;
  line-height:1.52!important;
}

@media(max-width:900px){
  .problem-section{
    padding:4.1rem 1.5rem 4.4rem!important;
  }
  .problem-consequences{
    grid-template-columns:1fr!important;
    max-width:720px!important;
  }
}

@media(max-width:680px){
  .problem-section{
    padding:3.5rem 1.25rem 3.9rem!important;
  }
  .problem-title{
    font-size:2.15rem!important;
  }
}

/* ==========================================================
   Extracted style block 11: mobile-premium-optimization
   ========================================================== */
/* Dedicated phone layout: compact, intentional, and touch friendly. */
@media (max-width: 680px) {
  :root { --header-height: 68px; }

  body { overflow-x: hidden; }

  .navbar {
    height: var(--header-height);
    padding: 0 1rem;
    gap: .75rem;
  }
  .brand-logo-asset { width: 154px !important; }
  .nav-actions { gap: .5rem; flex-shrink: 0; }
  .nav-actions .btn-text { display: none; }
  .nav-actions .nav-resources-link { display: inline-flex; }
  .btn-primary-sm {
    padding: .65rem .85rem;
    border-radius: 8px;
    font-size: .78rem;
    white-space: nowrap;
  }

  .hero {
    min-height: auto;
    display: block;
    padding: 2rem 1rem 2.75rem;
  }
  .hero-copy {
    align-items: center;
    text-align: center;
    transform: none;
  }
  .badge {
    margin-bottom: 1rem;
    padding: .34rem .75rem;
    font-size: .74rem;
  }
  .hero-title {
    max-width: 355px;
    margin: 0 auto 1rem;
    font-size: clamp(2.15rem, 10.7vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.045em;
  }
  .hero-description {
    max-width: 355px;
    margin: 0 auto 1.5rem;
    font-size: 1rem;
    line-height: 1.55;
  }
  .hero-cta-group {
    width: 100%;
    max-width: 355px;
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .btn-primary-lg,
  .btn-secondary-lg {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    text-align: center;
    padding: .8rem 1rem;
    border-radius: 9px;
  }
  .btn-secondary-lg {
    border: 1px solid var(--color-border-light);
    background: #fff;
  }

  /* A compact mobile-specific journey instead of the tall desktop stack. */
  .hero-visual-stage {
    min-height: 0;
    margin-top: 2rem;
    padding: 1.25rem .85rem 1.1rem;
    border-radius: 18px;
  }
  .journey-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1.2rem .7rem;
    width: 100%;
    height: auto;
  }
  .journey-svg-layer,
  .attribution-unknown-label,
  .journey-pulse,
  .journey-node-group::after { display: none !important; }

  .journey-node-group { min-width: 0; }
  .channels-stack {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
  }
  .channel-pill {
    width: auto;
    min-width: 0;
    padding: .34rem .56rem;
    border-radius: 7px;
    font-size: .68rem;
  }

  /* phone, bridge, and TV become one concise horizontal story */
  .journey-container > .journey-node-group:nth-of-type(2) { grid-column: 1; }
  .journey-container > .journey-node-group:nth-of-type(3) { display: none !important; }
  .journey-container > .journey-node-group:nth-of-type(4) { grid-column: 2; }
  .journey-container > .journey-node-group:nth-of-type(5) { grid-column: 3; }

  .journey-container > .journey-node-group:nth-of-type(2),
  .journey-container > .journey-node-group:nth-of-type(4) { position: relative; }
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group:nth-of-type(4)::before {
    content: '→';
    position: absolute;
    top: 50%;
    right: -.8rem;
    z-index: 4;
    transform: translateY(-50%);
    color: var(--color-primary-blue);
    font-size: 1.1rem;
    font-weight: 800;
  }

  .mobile-device-card {
    width: 66px;
    height: 112px;
    border-radius: 15px;
  }
  .mobile-status-text { font-size: .55rem; }
  .ctvbridge-glow-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }
  .ctvbridge-node-asset,
  .ctvbridge-node-asset svg { width: 39px; height: 45px; }
  .ctvbridge-node-label { font-size: .68rem; }
  .ctv-display-card { width: 72px; height: 48px; }
  .verification-pill {
    top: -29px;
    padding: .2rem .42rem;
    font-size: .55rem;
  }
  .node-label { font-size: .62rem; }

  .business-insight-card {
    max-width: none;
    margin-top: 1.15rem;
    padding: .7rem .8rem;
    border-radius: 10px;
  }
  .insight-card-header { margin-bottom: .45rem; padding-bottom: .4rem; }
  .insight-card-title { font-size: .62rem; }
  .insight-pill { font-size: .58rem; }
  .insight-grid { grid-template-columns: repeat(2, 1fr); gap: .45rem .7rem; }
  .metric-label { font-size: .55rem; }
  .metric-value { font-size: .64rem; white-space: normal; }

  /* Consistent mobile section rhythm. */
  .problem-section,
  .solution-section,
  .how-section,
  .impact-section,
  .integration-section,
  .credibility-section,
  .final-cta-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .problem-section { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
  .problem-title,
  .solution-title,
  .how-title,
  .impact-title,
  .integration-title,
  .credibility-title,
  .final-cta-title {
    font-size: clamp(1.9rem, 8.8vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
  .problem-description,
  .solution-description,
  .how-description,
  .impact-description,
  .integration-description,
  .credibility-description,
  .final-cta-description {
    font-size: .98rem !important;
    line-height: 1.6 !important;
  }

  /* More compact solution cards. */
  .solution-flow { gap: .8rem !important; }
  .solution-step {
    min-height: 0 !important;
    padding: 1rem 1rem 1rem 4.75rem !important;
    border-radius: 14px !important;
  }
  .solution-step-top {
    left: .85rem !important;
    top: .95rem !important;
    width: 52px !important;
    height: 52px !important;
  }
  .solution-step-icon { width: 23px !important; height: 23px !important; }
  .solution-step h3,
  .solution-step-title { font-size: 1rem !important; line-height: 1.25 !important; }
  .solution-step p,
  .solution-step-text { font-size: .88rem !important; line-height: 1.48 !important; }
  .solution-closing { margin-top: 1.25rem !important; font-size: .95rem !important; }

  .how-stage { padding: .3rem 0; }
  .how-stage-icon { width: 52px; height: 52px; border-radius: 15px; }
  .how-stage p { font-size: .84rem; }

  .impact-grid,
  .integration-grid { gap: .85rem !important; }

  section { scroll-margin-top: calc(var(--header-height) + 10px); }
}

@media (max-width: 380px) {
  .brand-logo-asset { width: 138px !important; }
  .btn-primary-sm { padding: .58rem .7rem; font-size: .72rem; }
  .hero-title { font-size: 2.05rem; }
}

/* ==========================================================
   Extracted style block 12: mobile-vertical-journey-v5
   ========================================================== */
.channel-icon { display:none; }
@media (max-width: 680px) {
  .hero-visual-stage { padding: .9rem .75rem 1rem !important; }
  .journey-container {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:0 !important;
    min-height:0 !important;
    padding:1.05rem .8rem 1rem !important;
  }
  .journey-svg-layer,
  .mobile-channel-flow,
  .attribution-unknown-label { display:none !important; }

  .channels-stack {
    order:1 !important;
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.55rem !important;
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
  }
  .channel-pill {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.55rem !important;
    min-height:46px !important;
    padding:.62rem .78rem !important;
    border-radius:12px !important;
    font-size:.84rem !important;
    white-space:nowrap !important;
  }
  .channel-icon {
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 25px !important;
    width:25px !important;
    height:25px !important;
    border-radius:7px !important;
    font-weight:800 !important;
    font-size:.9rem !important;
    line-height:1 !important;
    color:white !important;
  }
  .channel-icon.google { background:conic-gradient(from 35deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); }
  .channel-icon.meta { background:#1877f2; font-size:1.1rem !important; }
  .channel-icon.tiktok { background:#111827; text-shadow:2px 0 #25f4ee,-2px 0 #fe2c55; }
  .channel-icon.email { background:#0284c7; }
  .channel-icon.push { background:#7c3aed; font-size:.7rem !important; }
  .channel-icon.qr { background:#0f172a; }

  .journey-container > .journey-node-group { position:relative !important; }
  .journey-container > .journey-node-group:not(.channels-stack)::before,
  .journey-container > .journey-node-group:not(.channels-stack)::after { content:none !important; }

  .journey-container > .journey-node-group:nth-of-type(2) { order:2 !important; margin-top:66px !important; }
  .journey-container > .journey-node-group:nth-of-type(3) { order:3 !important; margin-top:66px !important; display:flex !important; }
  .journey-container > .journey-node-group:nth-of-type(4) { order:4 !important; margin-top:66px !important; }
  .journey-container > .journey-node-group:nth-of-type(5) { order:5 !important; margin-top:76px !important; }

  /* One centered down-arrow between every stage. */
  .channels-stack::after,
  .journey-container > .journey-node-group:nth-of-type(2)::after,
  .journey-container > .journey-node-group:nth-of-type(3)::after,
  .journey-container > .journey-node-group:nth-of-type(4)::after {
    content:'↓' !important;
    position:absolute !important;
    left:50% !important;
    bottom:-54px !important;
    transform:translateX(-50%) !important;
    color:var(--color-primary-blue) !important;
    font-size:2rem !important;
    font-weight:700 !important;
    line-height:1 !important;
    background:transparent !important;
    width:auto !important;
    height:auto !important;
    border:0 !important;
  }

  .mobile-device-card { width:138px !important; height:214px !important; }
  .user-node { align-items:center !important; }
  .user-avatar-circle { width:58px !important; height:58px !important; }
  .user-node .node-label { display:block !important; margin-top:.35rem !important; font-weight:700 !important; }
  .ctvbridge-glow-wrapper { width:104px !important; height:104px !important; }
  .ctvbridge-node-label { margin-top:.45rem !important; font-size:1rem !important; }
  .ctv-node-wrapper { padding-top:0 !important; }
  .verification-pill {
    position:static !important;
    transform:none !important;
    margin:0 auto .65rem !important;
    width:max-content !important;
  }

  .insight-card { margin-top:1.05rem !important; width:100% !important; }
  .solution-flow::before { left:calc(.85rem + 26px) !important; right:auto !important; }
}

/* ==========================================================
   Extracted style block 13: responsive-journey-v6
   ========================================================== */
/* Responsive journey v6: explicit class-based ordering for phone, tablet, and desktop */
.channel-brand-icon{display:inline-grid;place-items:center;flex:0 0 25px;width:25px;height:25px}
.channel-brand-icon svg{display:block;width:100%;height:100%}
.channel-label{display:inline-block}

/* Brand icons on desktop as well */
.channels-stack .channel-pill{display:flex;align-items:center;gap:.5rem;text-align:left}

/* Tablet */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage{min-height:0!important;padding:1.4rem 1.15rem 1.25rem!important}
  .journey-container{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:auto auto!important;gap:1.75rem .55rem!important;width:100%!important;height:auto!important;align-items:center!important}
  .journey-svg-layer,.mobile-channel-flow,.attribution-unknown-label,.journey-pulse{display:none!important}
  .channels-stack{grid-column:1/-1!important;grid-row:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.6rem!important;width:100%!important;max-width:650px!important;margin:0 auto!important}
  .channel-pill{width:100%!important;min-height:48px!important;padding:.62rem .75rem!important;border-radius:11px!important;font-size:.82rem!important;justify-content:flex-start!important}
  .journey-container>.journey-node-group{position:relative!important;min-width:0!important}
  .journey-container>.journey-node-group::before{content:none!important}
  .journey-container>.journey-node-group::after{content:none!important}
  .journey-container>.journey-node-group:not(.channels-stack){grid-row:2!important;margin:0!important;display:flex!important}
  .journey-container>.journey-node-group:nth-of-type(2){grid-column:1/2!important}
  .user-node{grid-column:3/4!important}
  .ctvbridge-hero-node{grid-column:5/6!important}
  .ctv-node-wrapper{grid-column:7/8!important}
  .journey-container>.journey-node-group:nth-of-type(2)::after,.user-node::after,.ctvbridge-hero-node::after{content:'→'!important;position:absolute!important;right:-1.15rem!important;top:50%!important;transform:translateY(-50%)!important;color:var(--color-primary-blue)!important;font-size:1.7rem!important;font-weight:800!important;line-height:1!important}
  .mobile-device-card{width:86px!important;height:142px!important}
  .user-avatar-circle{width:54px!important;height:54px!important}
  .user-node .node-label{display:block!important;margin-top:.35rem!important}
  .ctvbridge-glow-wrapper{width:76px!important;height:76px!important}
  .ctvbridge-node-label{font-size:.82rem!important;margin-top:.4rem!important}
  .ctv-display-card{width:91px!important;height:61px!important}
  .verification-pill{top:-36px!important;font-size:.64rem!important;white-space:nowrap!important}
  .business-insight-card{margin-top:1.25rem!important}
  .solution-flow::before{left:50%!important;transform:translateX(-50%)!important}
}

/* Phone: intentionally vertical story */
@media (max-width:680px){
  .hero-visual-stage{min-height:0!important;padding:.9rem .72rem 1rem!important}
  .journey-container{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;width:100%!important;height:auto!important;min-height:0!important;padding:.9rem .65rem .85rem!important}
  .journey-svg-layer,.mobile-channel-flow,.attribution-unknown-label,.journey-pulse{display:none!important}
  .channels-stack{order:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.48rem!important;width:100%!important;max-width:390px!important;margin:0 auto!important;position:relative!important}
  .channel-pill{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:.38rem!important;width:100%!important;min-height:44px!important;padding:.48rem .44rem!important;border-radius:10px!important;font-size:.69rem!important;white-space:nowrap!important}
  .channel-brand-icon{flex-basis:23px;width:23px;height:23px}
  .journey-container>.journey-node-group{position:relative!important;display:flex!important;margin-left:auto!important;margin-right:auto!important}
  .journey-container>.journey-node-group::before{content:none!important}
  .channels-stack::after,.journey-container>.journey-node-group:nth-of-type(2)::after,.user-node::after,.ctvbridge-hero-node::after{content:'↓'!important;position:absolute!important;left:50%!important;bottom:-49px!important;transform:translateX(-50%)!important;color:var(--color-primary-blue)!important;font-size:1.85rem!important;font-weight:800!important;line-height:1!important;width:auto!important;height:auto!important;background:transparent!important;border:0!important}
  .journey-container>.journey-node-group:nth-of-type(2){order:2!important;margin-top:62px!important}
  .user-node{order:3!important;margin-top:62px!important;align-items:center!important}
  .ctvbridge-hero-node{order:4!important;margin-top:62px!important}
  .ctv-node-wrapper{order:5!important;margin-top:66px!important;padding-top:0!important}
  .mobile-device-card{width:112px!important;height:176px!important;border-radius:22px!important}
  .mobile-status-text{font-size:.72rem!important}
  .user-avatar-circle{width:58px!important;height:58px!important}
  .user-node .node-label{display:block!important;margin-top:.32rem!important;font-weight:700!important}
  .ctvbridge-glow-wrapper{width:92px!important;height:92px!important}
  .ctvbridge-node-label{font-size:.9rem!important;margin-top:.4rem!important}
  .ctv-display-card{width:104px!important;height:70px!important}
  .verification-pill{position:static!important;transform:none!important;margin:0 auto .55rem!important;width:max-content!important;font-size:.68rem!important}
  .business-insight-card{margin-top:1rem!important;width:100%!important}
  .solution-flow::before{left:50%!important;right:auto!important;transform:translateX(-50%)!important}
}

/* ==========================================================
   Extracted style block 14: channel-grid-fix-v8
   ========================================================== */
/* Fix: keep channel group as a grid after generic journey-node flex rules */
@media (min-width:681px) and (max-width:1024px){
  .journey-container > .journey-node-group.channels-stack{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width:680px){
  .journey-container > .journey-node-group.channels-stack{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width:350px){
  .journey-container > .journey-node-group.channels-stack{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ==========================================================
   Extracted style block 15: mobile-spacing-pulse-v9
   ========================================================== */
@media (max-width:680px){
  /* Tighter vertical rhythm so the full story is easier to scan on a phone. */
  .journey-container>.journey-node-group:nth-of-type(2){margin-top:42px!important}
  .user-node{margin-top:42px!important}
  .ctvbridge-hero-node{margin-top:42px!important}
  .ctv-node-wrapper{margin-top:46px!important}

  /* Bring each connector closer to the next object. */
  .channels-stack::after,
  .journey-container>.journey-node-group:nth-of-type(2)::after,
  .user-node::after,
  .ctvbridge-hero-node::after{
    bottom:-36px!important;
    font-size:1.55rem!important;
    animation:mobileFlowPulse 1.45s ease-in-out infinite!important;
    text-shadow:0 0 0 rgba(2,132,199,0);
  }
  .journey-container>.journey-node-group:nth-of-type(2)::after{animation-delay:.18s!important}
  .user-node::after{animation-delay:.36s!important}
  .ctvbridge-hero-node::after{animation-delay:.54s!important}

  /* Subtle pulse on the user and bridge nodes, matching the desktop energy. */
  .user-avatar-circle,
  .ctvbridge-glow-wrapper{
    animation:mobileNodePulse 2.2s ease-in-out infinite!important;
  }
  .ctvbridge-glow-wrapper{animation-delay:.55s!important}

  @keyframes mobileFlowPulse{
    0%,100%{opacity:.35;transform:translateX(-50%) translateY(-2px) scale(.9);text-shadow:0 0 0 rgba(2,132,199,0)}
    50%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.08);text-shadow:0 0 14px rgba(2,132,199,.32)}
  }
  @keyframes mobileNodePulse{
    0%,100%{box-shadow:0 6px 18px rgba(15,23,42,.08),0 0 0 0 rgba(2,132,199,0)}
    50%{box-shadow:0 8px 22px rgba(15,23,42,.10),0 0 0 9px rgba(2,132,199,.10)}
  }
}

/* ==========================================================
   Extracted style block 16: mobile-visible-flow-pulse-v10
   ========================================================== */
@media (max-width:680px){
  /* A clearly visible traveling pulse on every vertical handoff. */
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:8!important;
    left:50%!important;
    bottom:-8px!important;
    width:8px!important;
    height:8px!important;
    border-radius:999px!important;
    background:#0284C7!important;
    box-shadow:0 0 0 5px rgba(2,132,199,.13),0 0 14px rgba(2,132,199,.55)!important;
    transform:translate(-50%,0) scale(.75)!important;
    opacity:0!important;
    animation:mobileTravelPulse 1.65s cubic-bezier(.4,0,.2,1) infinite!important;
    pointer-events:none!important;
  }
  .journey-container > .journey-node-group:nth-of-type(2)::before{animation-delay:.28s!important}
  .journey-container > .journey-node-group.user-node::before{animation-delay:.56s!important}
  .journey-container > .journey-node-group.ctvbridge-hero-node::before{animation-delay:.84s!important}

  /* Keep the arrows steady so the moving pulse is easy to read. */
  .channels-stack::after,
  .journey-container>.journey-node-group:nth-of-type(2)::after,
  .user-node::after,
  .ctvbridge-hero-node::after{
    animation:none!important;
    opacity:.9!important;
    text-shadow:none!important;
  }

  @keyframes mobileTravelPulse{
    0%{opacity:0;transform:translate(-50%,0) scale(.65)}
    14%{opacity:1}
    72%{opacity:1;transform:translate(-50%,31px) scale(1)}
    100%{opacity:0;transform:translate(-50%,38px) scale(.7)}
  }
}

/* ==========================================================
   Extracted style block 17: hero-mobile-refactor-v1
   ========================================================== */
/* Final mobile hero refactor. This block intentionally supersedes prior mobile journey patches. */
@media (max-width: 680px) {
  .hero-visual-stage {
    margin-top: 1.75rem !important;
    padding: 1rem .75rem 1.15rem !important;
    overflow: visible !important;
  }

  .journey-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: .55rem .4rem .75rem !important;
    overflow: visible !important;
  }

  /* Desktop SVG is not suitable for the vertical phone composition. */
  .journey-svg-layer,
  .mobile-channel-flow,
  .attribution-unknown-label,
  .journey-pulse {
    display: none !important;
  }

  .journey-container > .journey-node-group {
    position: relative !important;
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .journey-container > .journey-node-group.channels-stack {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .channel-pill {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: .48rem .45rem !important;
    justify-content: flex-start !important;
    gap: .4rem !important;
    border-radius: 10px !important;
    font-size: .69rem !important;
    white-space: nowrap !important;
  }

  .channel-brand-icon {
    flex: 0 0 23px !important;
    width: 23px !important;
    height: 23px !important;
  }

  /* Explicit mobile order and tighter spacing. */
  .journey-container > .journey-node-group:nth-of-type(2) {
    order: 2 !important;
    margin-top: 52px !important;
  }
  .journey-container > .journey-node-group.user-node {
    order: 3 !important;
    margin-top: 52px !important;
    align-items: center !important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node {
    order: 4 !important;
    margin-top: 52px !important;
  }
  .journey-container > .journey-node-group.ctv-node-wrapper {
    order: 5 !important;
    margin-top: 56px !important;
    padding-top: 0 !important;
  }

  /* A real connector track between each stage. */
  .journey-container > .journey-node-group.channels-stack::after,
  .journey-container > .journey-node-group:nth-of-type(2)::after,
  .journey-container > .journey-node-group.user-node::after,
  .journey-container > .journey-node-group.ctvbridge-hero-node::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 50% !important;
    bottom: -43px !important;
    width: 2px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(2,132,199,.28), #0284C7 52%, rgba(2,132,199,.42)) !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    animation: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* The animated pulse travels visibly down the connector track. */
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 7 !important;
    left: 50% !important;
    bottom: -13px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #0284C7 !important;
    box-shadow: 0 0 0 5px rgba(2,132,199,.13), 0 0 15px rgba(2,132,199,.72) !important;
    opacity: 0 !important;
    transform: translate(-50%, 0) scale(.72) !important;
    animation: ctvMobileConnectorPulse 2.4s cubic-bezier(.4,0,.2,1) infinite !important;
    pointer-events: none !important;
  }

  .journey-container > .journey-node-group:nth-of-type(2)::before {
    animation-delay: .6s !important;
  }
  .journey-container > .journey-node-group.user-node::before {
    animation-delay: 1.2s !important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    animation-delay: 1.8s !important;
  }

  .mobile-device-card {
    width: 112px !important;
    height: 176px !important;
    border-radius: 22px !important;
  }
  .mobile-status-text { font-size: .72rem !important; }
  .user-avatar-circle { width: 58px !important; height: 58px !important; }
  .user-node .node-label {
    display: block !important;
    margin-top: .32rem !important;
    font-weight: 700 !important;
  }
  .ctvbridge-glow-wrapper { width: 92px !important; height: 92px !important; }
  .ctvbridge-node-label { margin-top: .4rem !important; font-size: .9rem !important; }
  .ctv-display-card { width: 104px !important; height: 70px !important; }
  .verification-pill {
    position: static !important;
    transform: none !important;
    margin: 0 auto .55rem !important;
    width: max-content !important;
    font-size: .68rem !important;
  }
  .business-insight-card { margin-top: 1rem !important; width: 100% !important; }

  @keyframes ctvMobileConnectorPulse {
    0%, 8% {
      opacity: 0;
      transform: translate(-50%, 0) scale(.65);
    }
    18% { opacity: 1; }
    72% {
      opacity: 1;
      transform: translate(-50%, 30px) scale(1);
    }
    88%, 100% {
      opacity: 0;
      transform: translate(-50%, 34px) scale(.7);
    }
  }
}

@media (max-width: 350px) {
  .journey-container > .journey-node-group.channels-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    display: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   Extracted style block 18: hero-mobile-refactor-v2
   ========================================================== */
/* Mobile journey refinement: restore the unknown-attribution step and use a true moving progress dot. */
@media (max-width: 680px) {
  /* Keep the desktop SVG hidden, but reuse the desktop unknown-attribution element as a mobile step. */
  .journey-svg-layer,
  .mobile-channel-flow,
  .journey-pulse {
    display: none !important;
  }

  .journey-container > .journey-node-group:nth-of-type(2) { order: 2 !important; margin-top: 48px !important; }
  .journey-container > .journey-node-group.user-node { order: 3 !important; margin-top: 48px !important; }

  .attribution-unknown-label {
    order: 4 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 48px auto 0 !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    color: var(--color-text-muted) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    pointer-events: none !important;
  }

  .attribution-unknown-label .unknown-mark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-bottom: .38rem !important;
    border: 1px dashed #94A3B8 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #64748B !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.05) !important;
  }

  .journey-container > .journey-node-group.ctvbridge-hero-node { order: 5 !important; margin-top: 48px !important; }
  .journey-container > .journey-node-group.ctv-node-wrapper { order: 6 !important; margin-top: 52px !important; }

  /* Quiet tracks: they provide direction without looking like the animation itself. */
  .journey-container > .journey-node-group.channels-stack::after,
  .journey-container > .journey-node-group:nth-of-type(2)::after,
  .journey-container > .journey-node-group.user-node::after,
  .attribution-unknown-label::after,
  .journey-container > .journey-node-group.ctvbridge-hero-node::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    bottom: -39px !important;
    width: 2px !important;
    height: 30px !important;
    border: 0 !important;
    background: repeating-linear-gradient(
      to bottom,
      rgba(148,163,184,.75) 0 4px,
      transparent 4px 8px
    ) !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    animation: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* The progress is the dot, not the line. One dot advances through the journey in sequence. */
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .attribution-unknown-label::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    bottom: -9px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #0284C7 !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(2,132,199,.14), 0 3px 10px rgba(2,132,199,.42) !important;
    opacity: 0 !important;
    transform: translate(-50%, 0) scale(.8) !important;
    animation: ctvMobileProgressDot 5s cubic-bezier(.4,0,.2,1) infinite !important;
    pointer-events: none !important;
  }

  .journey-container > .journey-node-group:nth-of-type(2)::before { animation-delay: 1s !important; }
  .journey-container > .journey-node-group.user-node::before { animation-delay: 2s !important; }
  .attribution-unknown-label::before { animation-delay: 3s !important; }
  .journey-container > .journey-node-group.ctvbridge-hero-node::before { animation-delay: 4s !important; }

  @keyframes ctvMobileProgressDot {
    0%, 2% { opacity: 0; transform: translate(-50%, 0) scale(.7); }
    5% { opacity: 1; }
    15% { opacity: 1; transform: translate(-50%, 26px) scale(1); }
    19%, 100% { opacity: 0; transform: translate(-50%, 30px) scale(.75); }
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .attribution-unknown-label::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    display: none !important;
  }
}

/* ==========================================================
   Extracted style block 19: hero-mobile-refactor-v3-desktop-sequence
   ========================================================== */
/* Mobile uses the same narrative timing as desktop:
   channels → phone → user → attribution unknown → CTVBridge → verified TV app. */
@media (max-width: 680px) {
  .journey-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto 118px auto !important;
    row-gap: 46px !important;
    justify-items: center !important;
    align-items: center !important;
    position: relative !important;
    padding: .55rem .4rem .75rem !important;
  }

  .journey-container > .journey-node-group.channels-stack {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  .journey-container > .journey-node-group:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }
  .journey-container > .journey-node-group.user-node {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 0 !important;
    align-self: center !important;
    animation: bridgeSequence var(--animation-duration) ease-in-out infinite !important;
  }
  .journey-container > .journey-node-group.ctv-node-wrapper {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin: 0 !important;
  }

  /* Unknown attribution occupies the exact same transition slot as CTVBridge.
     It is not a permanent extra step and therefore does not change the order. */
  .attribution-unknown-label {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    align-self: center !important;
    justify-self: center !important;
    display: flex !important;
    width: 126px !important;
    margin: 0 !important;
    opacity: 0;
    transform: translateY(4px) !important;
    animation: mobileUnknownDesktopTiming var(--animation-duration) ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 9 !important;
  }

  .attribution-unknown-label .unknown-mark {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
  }

  /* Remove the extra connector created by v2's temporary unknown-attribution row. */
  .attribution-unknown-label::before,
  .attribution-unknown-label::after {
    display: none !important;
    content: none !important;
  }

  /* All connectors begin as quiet tracks. */
  .journey-container > .journey-node-group.channels-stack::after,
  .journey-container > .journey-node-group:nth-of-type(2)::after,
  .journey-container > .journey-node-group.user-node::after,
  .journey-container > .journey-node-group.ctvbridge-hero-node::after {
    bottom: -39px !important;
    width: 2px !important;
    height: 31px !important;
    background: repeating-linear-gradient(to bottom, rgba(148,163,184,.72) 0 4px, transparent 4px 8px) !important;
    opacity: 0 !important;
    animation-duration: var(--animation-duration) !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }

  .journey-container > .journey-node-group.channels-stack::after {
    animation-name: mobileTrackChannels !important;
  }
  .journey-container > .journey-node-group:nth-of-type(2)::after {
    animation-name: mobileTrackPhoneUser !important;
  }
  .journey-container > .journey-node-group.user-node::after {
    animation-name: mobileTrackGapRestore !important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node::after {
    animation-name: mobileTrackBridgeTv !important;
  }

  /* A single progress dot advances through each connector in desktop sequence timing. */
  .journey-container > .journey-node-group.channels-stack::before,
  .journey-container > .journey-node-group:nth-of-type(2)::before,
  .journey-container > .journey-node-group.user-node::before,
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    bottom: -8px !important;
    width: 10px !important;
    height: 10px !important;
    opacity: 0 !important;
    animation-duration: var(--animation-duration) !important;
    animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
  }
  .journey-container > .journey-node-group.channels-stack::before {
    animation-name: mobileDotChannels !important;
  }
  .journey-container > .journey-node-group:nth-of-type(2)::before {
    animation-name: mobileDotPhoneUser !important;
  }
  .journey-container > .journey-node-group.user-node::before {
    animation-name: mobileDotUserBridge !important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node::before {
    animation-name: mobileDotBridgeTv !important;
  }

  @keyframes mobileUnknownDesktopTiming {
    0%, 28% { opacity: 0; transform: translateY(4px); }
    33%, 44% { opacity: 1; transform: translateY(0); }
    49%, 100% { opacity: 0; transform: translateY(-3px); }
  }

  @keyframes mobileTrackChannels {
    0%, 6% { opacity: 0; }
    11%, 88% { opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  @keyframes mobileTrackPhoneUser {
    0%, 19% { opacity: 0; }
    24%, 88% { opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  @keyframes mobileTrackGapRestore {
    0%, 29% { opacity: 0; background: repeating-linear-gradient(to bottom, rgba(148,163,184,.72) 0 4px, transparent 4px 8px); }
    33%, 45% { opacity: 1; background: repeating-linear-gradient(to bottom, rgba(148,163,184,.72) 0 4px, transparent 4px 8px); }
    49% { opacity: 0; }
    53%, 88% { opacity: 1; background: #0284C7; }
    96%, 100% { opacity: 0; }
  }
  @keyframes mobileTrackBridgeTv {
    0%, 48% { opacity: 0; }
    53%, 88% { opacity: 1; background: #0284C7; }
    96%, 100% { opacity: 0; }
  }

  @keyframes mobileDotChannels {
    0%, 8% { opacity: 0; transform: translate(-50%,0) scale(.72); }
    10% { opacity: 1; }
    17% { opacity: 1; transform: translate(-50%,27px) scale(1); }
    19%,100% { opacity: 0; transform: translate(-50%,31px) scale(.72); }
  }
  @keyframes mobileDotPhoneUser {
    0%, 21% { opacity: 0; transform: translate(-50%,0) scale(.72); }
    23% { opacity: 1; }
    28% { opacity: 1; transform: translate(-50%,27px) scale(1); }
    30%,100% { opacity: 0; transform: translate(-50%,31px) scale(.72); }
  }
  @keyframes mobileDotUserBridge {
    0%, 51% { opacity: 0; transform: translate(-50%,0) scale(.72); }
    53% { opacity: 1; }
    59% { opacity: 1; transform: translate(-50%,27px) scale(1); }
    61%,100% { opacity: 0; transform: translate(-50%,31px) scale(.72); }
  }
  @keyframes mobileDotBridgeTv {
    0%, 57% { opacity: 0; transform: translate(-50%,0) scale(.72); }
    59% { opacity: 1; }
    66% { opacity: 1; transform: translate(-50%,27px) scale(1); }
    68%,100% { opacity: 0; transform: translate(-50%,31px) scale(.72); }
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .attribution-unknown-label { display: none !important; }
  .journey-container > .journey-node-group.ctvbridge-hero-node {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================
   Extracted style block 20: hero-mobile-v4-state-machine
   ========================================================== */
@media (max-width:680px){
  .journey-container{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto 118px auto!important;
    row-gap:46px!important;
    justify-items:center!important;
    align-items:center!important;
    position:relative!important;
    overflow:visible!important;
  }
  .journey-svg-layer,.mobile-channel-flow{display:none!important}
  .journey-container>.channels-stack{grid-row:1!important;grid-column:1!important}
  .journey-container>.journey-node-group:nth-of-type(2){grid-row:2!important;grid-column:1!important}
  .journey-container>.user-node{grid-row:3!important;grid-column:1!important}
  .journey-container>.ctvbridge-hero-node,
  .journey-container>.attribution-unknown-label{grid-row:4!important;grid-column:1!important}
  .journey-container>.ctv-node-wrapper{grid-row:5!important;grid-column:1!important}

  /* JS owns the mobile narrative. This prevents older override blocks from competing. */
  .journey-container>.channels-stack,
  .journey-container>.journey-node-group:nth-of-type(2),
  .journey-container>.user-node,
  .journey-container>.ctvbridge-hero-node,
  .journey-container>.ctv-node-wrapper,
  .attribution-unknown-label,
  .verification-pill,.verified-check-indicator,.business-insight-card{
    animation:none!important;
    transition:opacity .38s ease,transform .38s ease,filter .38s ease!important;
  }
  .journey-container>.channels-stack,
  .journey-container>.journey-node-group:nth-of-type(2),
  .journey-container>.user-node,
  .journey-container>.ctv-node-wrapper,
  .business-insight-card{opacity:0!important;transform:translateY(8px)!important}
  .journey-container>.ctvbridge-hero-node{opacity:0!important;transform:scale(.82)!important;filter:blur(2px)!important}
  .attribution-unknown-label{
    position:relative!important;inset:auto!important;left:auto!important;top:auto!important;
    display:flex!important;width:126px!important;margin:0!important;align-self:center!important;justify-self:center!important;
    opacity:0!important;transform:translateY(5px)!important;z-index:10!important;pointer-events:none!important;
  }
  .attribution-unknown-label .unknown-mark{font-size:1.8rem!important}
  .verification-pill,.verified-check-indicator{opacity:0!important;transform:translateY(5px) scale(.96)!important}

  .mobile-on{opacity:1!important;transform:none!important;filter:none!important}
  .mobile-bridge-on{opacity:1!important;transform:scale(1)!important;filter:none!important}
  .mobile-unknown-on{opacity:1!important;transform:none!important}
  .mobile-verified-on{opacity:1!important;transform:none!important}

  /* Remove every legacy pseudo connector; real track elements are inserted by JS. */
  .journey-container>.journey-node-group::before,
  .journey-container>.journey-node-group::after,
  .attribution-unknown-label::before,
  .attribution-unknown-label::after{display:none!important;content:none!important}

  .mobile-progress-track{
    position:absolute;z-index:4;width:2px;
    background:repeating-linear-gradient(to bottom,rgba(148,163,184,.72) 0 4px,transparent 4px 8px);
    border-radius:999px;pointer-events:none;opacity:0;transition:opacity .22s ease;
  }
  .mobile-progress-track.is-visible{opacity:1}
  .mobile-progress-dot{
    position:absolute;z-index:12;left:50%;top:0;width:10px;height:10px;border-radius:50%;
    background:#0284C7;box-shadow:0 0 0 4px rgba(2,132,199,.12),0 0 12px rgba(2,132,199,.55);
    transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  }
  .mobile-progress-dot.is-moving{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (max-width:680px){
  .journey-container>.channels-stack,
  .journey-container>.journey-node-group:nth-of-type(2),
  .journey-container>.user-node,
  .journey-container>.ctvbridge-hero-node,
  .journey-container>.ctv-node-wrapper,
  .verification-pill,.verified-check-indicator,.business-insight-card{opacity:1!important;transform:none!important;filter:none!important}
  .attribution-unknown-label,.mobile-progress-track,.mobile-progress-dot{display:none!important}
}

/* ==========================================================
   Extracted style block 21: hero-mobile-v5-specificity-fix
   ========================================================== */
@media (max-width:680px){
  /* State classes must outrank the earlier hidden-state selectors. */
  .journey-container > .journey-node-group.channels-stack.mobile-on,
  .journey-container > .journey-node-group.tablet-phone-node.mobile-on,
  .journey-container > .journey-node-group.user-node.mobile-on,
  .journey-container > .journey-node-group.ctv-node-wrapper.mobile-on,
  .hero-visual-stage .business-insight-card.mobile-on {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .journey-container > .journey-node-group.ctvbridge-hero-node.mobile-bridge-on {
    opacity:1!important;
    transform:scale(1)!important;
    filter:none!important;
  }
  .journey-container > .attribution-unknown-label.mobile-unknown-on {
    opacity:1!important;
    transform:none!important;
  }
  .journey-container .verification-pill.mobile-verified-on,
  .journey-container .verified-check-indicator.mobile-verified-on {
    opacity:1!important;
    transform:none!important;
  }

  /* Keep the unknown state clean and separate from the CTVBridge logo. */
  .journey-container > .attribution-unknown-label {
    color:var(--color-text-muted)!important;
    text-align:center!important;
  }
  .journey-container > .attribution-unknown-label .unknown-mark {
    color:var(--color-text-muted)!important;
  }
}

/* ==========================================================
   Extracted style block 22: desktop-tablet-hero-repair-v7
   ========================================================== */
/* Repair only tablet and desktop. Mobile remains exactly as approved. */
@media (min-width:681px){
  .channels-stack .channel-icon{
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    border-radius:6px !important;
    color:#fff !important;
    font-weight:800 !important;
    font-size:.78rem !important;
    line-height:1 !important;
  }
  .channels-stack .channel-pill{
    width:118px !important;
    min-height:34px !important;
    justify-content:flex-start !important;
    gap:.52rem !important;
    padding:.38rem .55rem !important;
    text-align:left !important;
  }
  .channel-icon.google{background:conic-gradient(from 35deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0)!important}
  .channel-icon.meta{background:#1877f2!important;font-size:1rem!important}
  .channel-icon.tiktok{background:#111827!important;text-shadow:1.5px 0 #25f4ee,-1.5px 0 #fe2c55!important}
  .channel-icon.email{background:#0284c7!important}
  .channel-icon.push{background:#7c3aed!important;font-size:.65rem!important}
  .channel-icon.qr{background:#0f172a!important}

  /* Center the temporary unknown-attribution state in the actual gap. */
  .journey-container > .attribution-unknown-label{
    left:60.7% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:112px !important;
    margin:0 !important;
  }
  .journey-container > .attribution-unknown-label .unknown-mark{
    display:grid !important;
    place-items:center !important;
    width:34px !important;
    height:34px !important;
    border:1px dashed #94A3B8 !important;
    border-radius:10px !important;
    background:#fff !important;
    font-size:1.35rem !important;
    line-height:1 !important;
  }

  /* A cleaner single moving pulse instead of a stretched waveform. */
  .journey-pulse{
    display:block !important;
    fill:#0284C7 !important;
    filter:drop-shadow(0 0 3px rgba(2,132,199,.8)) drop-shadow(0 0 8px rgba(2,132,199,.35)) !important;
    animation:none !important;
  }
}
@media (min-width:681px) and (max-width:1024px){
  .journey-container > .attribution-unknown-label{left:60.7% !important}
  .channels-stack .channel-pill{width:112px !important}
}

/* ==========================================================
   Extracted style block 23: desktop-hero-phase-fix-v8
   ========================================================== */
/* Desktop-only story correction. Tablet and approved mobile are unchanged. */
@media (min-width:1025px){
  /* The unknown-attribution state occupies the exact CTVBridge position. */
  .journey-container > .attribution-unknown-label{
    left:69.35% !important;
    top:50% !important;
    width:120px !important;
    transform:translate(-50%,-50%) !important;
    gap:.5rem !important;
  }
  .journey-container > .attribution-unknown-label .unknown-mark{
    box-sizing:border-box !important;
    width:64px !important;
    height:64px !important;
    display:grid !important;
    place-items:center !important;
    border:1.5px dashed #94A3B8 !important;
    border-radius:16px !important;
    background:#fff !important;
    font-size:1.8rem !important;
    line-height:1 !important;
    box-shadow:0 4px 10px rgba(15,23,42,.05) !important;
  }
  /* Disable the old continuous pulse animation; SMIL controls each phase. */
  .desktop-phase-pulses .phase-pulse{
    display:block !important;
    opacity:0;
    fill:#0284C7 !important;
    animation:none !important;
    filter:drop-shadow(0 0 3px rgba(2,132,199,.85)) drop-shadow(0 0 8px rgba(2,132,199,.35)) !important;
  }
}

@media (max-width:1024px){
  .desktop-phase-pulses{display:none !important;}
}

/* ==========================================================
   Extracted style block 24: desktop-mobile-timing-v9
   ========================================================== */
@media (min-width: 681px) and (max-width: 1024px) {
  .journey-container > .journey-node-group.tablet-phone-node.desktop-on {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}
   @media (min-width:1025px){
  /* Desktop uses the same staged controller as mobile. */
  .journey-container .desktop-phase-pulses,
  .journey-container .journey-pulse,
  .journey-svg-layer .path-phone-user,
  .journey-svg-layer .path-gap-dotted,
  .journey-svg-layer .path-user-ctvbridge,
  .journey-svg-layer .path-ctvbridge-tv{display:none!important;}

  .journey-container>.journey-node-group.channels-stack,
  .journey-container>.journey-node-group:nth-of-type(2),
  .journey-container>.journey-node-group.user-node,
  .journey-container>.journey-node-group.ctvbridge-hero-node,
  .journey-container>.journey-node-group.ctv-node-wrapper,
  .journey-container>.attribution-unknown-label,
  .journey-container .verification-pill,
  .journey-container .verified-check-indicator,
  .hero-visual-stage .business-insight-card{
    animation:none!important;
    transition:opacity .28s ease,transform .28s ease!important;
  }

  .journey-container>.journey-node-group.channels-stack,
  .journey-container>.journey-node-group:nth-of-type(2),
  .journey-container>.journey-node-group.user-node,
  .journey-container>.journey-node-group.ctvbridge-hero-node,
  .journey-container>.journey-node-group.ctv-node-wrapper,
  .hero-visual-stage .business-insight-card{
    opacity:0!important;
    filter:none!important;
  }
  .journey-container>.attribution-unknown-label{
    opacity:0!important;
    position:absolute!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
  }
  .journey-container .verification-pill,
  .journey-container .verified-check-indicator{opacity:0!important;}

  .journey-container>.journey-node-group.desktop-on,
  .hero-visual-stage .business-insight-card.desktop-on{
    opacity:1!important;
    transform:none!important;
  }
  .journey-container>.journey-node-group.ctvbridge-hero-node.desktop-bridge-on{
    opacity:1!important;
    transform:none!important;
  }
  .journey-container>.attribution-unknown-label.desktop-unknown-on{
    opacity:1!important;
    position:absolute!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    z-index:14!important;
  }
  .journey-container .verification-pill.desktop-verified-on,
  .journey-container .verified-check-indicator.desktop-verified-on{
    opacity:1!important;
    transform:none!important;
  }

  .desktop-progress-track{
    position:absolute;
    z-index:2;
    height:2px;
    transform-origin:left center;
    background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 10px);
    opacity:0;
    pointer-events:none;
  }
  .desktop-progress-track.is-visible{opacity:1;}
  .desktop-progress-dot{
    position:absolute;
    z-index:15;
    width:9px;height:9px;border-radius:50%;
    background:#0284C7;
    box-shadow:0 0 0 4px rgba(2,132,199,.10),0 0 12px rgba(2,132,199,.5);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-50%);
  }
  .desktop-progress-dot.is-moving{opacity:1;}

  /* Remove legacy arrows/pseudo-pulses on desktop. */
  .journey-container>.journey-node-group:nth-of-type(2)::before,
  .journey-container>.journey-node-group:nth-of-type(2)::after,
  .journey-container>.journey-node-group.user-node::before,
  .journey-container>.journey-node-group.user-node::after,
  .journey-container>.journey-node-group.ctvbridge-hero-node::before,
  .journey-container>.journey-node-group.ctvbridge-hero-node::after,
  .journey-container>.attribution-unknown-label::before,
  .journey-container>.attribution-unknown-label::after{display:none!important;content:none!important;}
}
@media (max-width:1024px){.desktop-progress-track,.desktop-progress-dot{display:none!important;}}

/* ==========================================================
   Extracted style block 25: desktop-clean-sequence-v11
   ========================================================== */
@media (min-width:1025px){
  /* Desktop v11: one clean state machine; mobile/tablet remain untouched. */
  .journey-container .path-channels-group{opacity:0!important;transition:opacity .32s ease!important;}
  .journey-container.desktop-channel-lines-on .path-channels-group{opacity:1!important;}

  /* The original free-floating unknown label is not used on desktop. */
  .journey-container>.attribution-unknown-label{display:none!important;}

  /* CTVBridge and Attribution Unknown share one exact slot. */
  .journey-container>.journey-node-group.ctvbridge-hero-node{
    opacity:0!important;
    visibility:hidden!important;
    transform:none!important;
  }
  .journey-container>.journey-node-group.ctvbridge-hero-node.desktop-slot-on{
    opacity:1!important;
    visibility:visible!important;
  }
  .journey-container>.journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .journey-container>.journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{
    opacity:0!important;
    visibility:hidden!important;
    transition:opacity .24s ease!important;
  }
  .journey-container>.journey-node-group.ctvbridge-hero-node.desktop-show-bridge .ctvbridge-glow-wrapper,
  .journey-container>.journey-node-group.ctvbridge-hero-node.desktop-show-bridge .ctvbridge-node-label{
    opacity:1!important;
    visibility:visible!important;
  }
  .desktop-slot-unknown{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:20!important;
    color:#64748B!important;
    text-align:center!important;
    font-weight:700!important;
    line-height:1.05!important;
    transition:opacity .24s ease!important;
  }
  .desktop-slot-unknown .unknown-mark{
    width:62px!important;height:62px!important;
    display:grid!important;place-items:center!important;
    border:2px dashed #94A3B8!important;border-radius:16px!important;
    background:#fff!important;font-size:30px!important;font-weight:700!important;
  }
  .ctvbridge-hero-node.desktop-slot-on:not(.desktop-show-bridge) .desktop-slot-unknown{
    opacity:1!important;visibility:visible!important;
  }
  .ctvbridge-hero-node.desktop-show-bridge .desktop-slot-unknown{
    opacity:0!important;visibility:hidden!important;
  }

  /* Hard-hide every inactive desktop state so the canvas returns fully blank. */
  .journey-container>.journey-node-group.channels-stack:not(.desktop-on),
  .journey-container>.journey-node-group:nth-of-type(2):not(.desktop-on),
  .journey-container>.journey-node-group.user-node:not(.desktop-on),
  .journey-container>.journey-node-group.ctv-node-wrapper:not(.desktop-on),
  .hero-visual-stage .business-insight-card:not(.desktop-on){
    opacity:0!important;visibility:hidden!important;
  }
  .journey-container>.journey-node-group.desktop-on,
  .hero-visual-stage .business-insight-card.desktop-on{
    opacity:1!important;visibility:visible!important;
  }
  .journey-container .verification-pill:not(.desktop-verified-on),
  .journey-container .verified-check-indicator:not(.desktop-verified-on){
    opacity:0!important;visibility:hidden!important;
  }
  .journey-container .verification-pill.desktop-verified-on,
  .journey-container .verified-check-indicator.desktop-verified-on{
    opacity:1!important;visibility:visible!important;
  }
}

/* ==========================================================
   Extracted style block 26: tablet-desktop-layout-v13
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Tablet mirrors the approved desktop composition, only scaled to fit. */
  .hero-visual-stage{padding:1.6rem 1.25rem!important;min-height:610px!important;overflow:hidden!important;}
  .journey-container{
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    height:330px!important;
    gap:clamp(.35rem,1vw,.8rem)!important;
    padding:0 .25rem!important;
  }
  .journey-container>.journey-node-group{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;margin:0!important;min-width:0!important;grid-column:auto!important;grid-row:auto!important;order:initial!important;}
  .journey-container>.journey-node-group::before,
  .journey-container>.journey-node-group::after{display:none!important;content:none!important;}

  .journey-container>.channels-stack{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
    width:126px!important;max-width:126px!important;gap:.42rem!important;margin:0!important;
  }
  .journey-container .channel-pill{
    width:126px!important;min-height:34px!important;padding:.32rem .5rem!important;
    justify-content:flex-start!important;gap:.45rem!important;font-size:.72rem!important;border-radius:7px!important;
  }
  .journey-container .channel-icon{width:22px!important;height:22px!important;min-width:22px!important;}

  .journey-container .mobile-device-card{width:72px!important;height:136px!important;border-radius:16px!important;padding:.35rem!important;}
  .journey-container .engagement-label{font-size:.66rem!important;line-height:1.08!important;}
  .journey-container .engagement-icon-circle{width:28px!important;height:28px!important;margin-bottom:.3rem!important;}
  .journey-container .user-avatar-circle{width:54px!important;height:54px!important;}
  .journey-container .user-node-label{font-size:.72rem!important;margin-top:.4rem!important;}
  .journey-container .ctvbridge-glow-wrapper{transform:scale(.82)!important;transform-origin:center!important;}
  .journey-container .ctvbridge-node-label{font-size:.75rem!important;margin-top:.2rem!important;}
  .journey-container .ctv-display-card{transform:scale(.78)!important;transform-origin:center!important;}
  .journey-container .ctv-node-label{font-size:.72rem!important;margin-top:-.2rem!important;}
  .journey-container .verification-pill{transform:scale(.78)!important;transform-origin:center!important;right:-22px!important;top:-34px!important;white-space:nowrap!important;}

  .journey-container .journey-svg-layer{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;pointer-events:none!important;}
  .journey-container .path-channels-group{opacity:0!important;transition:opacity .32s ease!important;}
  .journey-container.tablet13-channel-lines-on .path-channels-group{opacity:1!important;}
  .journey-container .path-phone-user,.journey-container .path-gap-dotted,.journey-container .path-user-ctvbridge,.journey-container .path-ctvbridge-tv,.journey-container .desktop-phase-pulses{opacity:0!important;visibility:hidden!important;}
  .journey-container>.attribution-unknown-label{display:none!important;}

  .journey-container>.journey-node-group.ctvbridge-hero-node{opacity:0!important;visibility:hidden!important;transform:none!important;}
  .journey-container>.journey-node-group.ctvbridge-hero-node.tablet13-slot-on{opacity:1!important;visibility:visible!important;}
  .journey-container>.journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .journey-container>.journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{opacity:0!important;visibility:hidden!important;transition:opacity .24s ease!important;}
  .journey-container>.journey-node-group.ctvbridge-hero-node.tablet13-show-bridge .ctvbridge-glow-wrapper,
  .journey-container>.journey-node-group.ctvbridge-hero-node.tablet13-show-bridge .ctvbridge-node-label{opacity:1!important;visibility:visible!important;}
  .tablet13-slot-unknown{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;opacity:0!important;visibility:hidden!important;z-index:20!important;color:#64748B!important;text-align:center!important;font-size:.68rem!important;font-weight:700!important;line-height:1.05!important;}
  .tablet13-slot-unknown .unknown-mark{width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border:2px dashed #94A3B8!important;border-radius:14px!important;background:#fff!important;font-size:25px!important;}
  .ctvbridge-hero-node.tablet13-slot-on:not(.tablet13-show-bridge) .tablet13-slot-unknown{opacity:1!important;visibility:visible!important;}

  .journey-container>.channels-stack:not(.tablet13-on),
  .journey-container>.journey-node-group:nth-of-type(2):not(.tablet13-on),
  .journey-container>.user-node:not(.tablet13-on),
  .journey-container>.ctv-node-wrapper:not(.tablet13-on),
  .hero-visual-stage .business-insight-card:not(.tablet13-on){opacity:0!important;visibility:hidden!important;}
  .journey-container>.tablet13-on,.hero-visual-stage .business-insight-card.tablet13-on{opacity:1!important;visibility:visible!important;}
  .journey-container .verification-pill:not(.tablet13-verified-on),.journey-container .verified-check-indicator:not(.tablet13-verified-on){opacity:0!important;visibility:hidden!important;}
  .journey-container .verification-pill.tablet13-verified-on,.journey-container .verified-check-indicator.tablet13-verified-on{opacity:1!important;visibility:visible!important;}

  .tablet13-progress-track{position:absolute!important;z-index:2!important;height:2px!important;transform-origin:left center!important;background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 10px)!important;opacity:0!important;pointer-events:none!important;}
  .tablet13-progress-track.is-visible{opacity:1!important;}
  .tablet13-progress-dot{position:absolute!important;z-index:30!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#0284C7!important;box-shadow:0 0 0 4px rgba(2,132,199,.10),0 0 12px rgba(2,132,199,.5)!important;opacity:0!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;}

  .hero-visual-stage .business-insight-card{width:min(72%,590px)!important;margin-top:1rem!important;padding:1rem 1.2rem!important;}
  .hero-visual-stage .insight-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.65rem!important;}
  .hero-visual-stage .insight-title{font-size:.82rem!important;}
  .hero-visual-stage .insight-label{font-size:.64rem!important;}
  .hero-visual-stage .insight-value{font-size:.7rem!important;}
}
@media (max-width:680px),(min-width:1025px){.tablet13-progress-track,.tablet13-progress-dot{display:none!important;}}

/* ==========================================================
   Extracted style block 27: consistent-section-intro-line-spacing
   ========================================================== */
/* Keep the introductory paragraph line spacing consistent below every section headline. */
.hero-description,
.problem-description,
.solution-description,
.how-description,
.impact-description,
.integration-description,
.credibility-copy,
.final-cta-copy {
  line-height: 1.58 !important;
}

/* ==========================================================
   Extracted style block 28: desktop-section-breathing-room-v21
   ========================================================== */
/* Desktop only: add breathing room to every section after the hero. Hero remains untouched. */
@media (min-width: 1025px) {
  .problem-section,
  .solution-section,
  .how-section,
  .impact-section,
  .integration-section,
  .credibility-section,
  .final-cta-section {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }

  /* Consistent space between headline and introductory paragraph. */
  .problem-title,
  .solution-title,
  .how-title,
  .impact-title,
  .integration-title,
  .credibility-title,
  .final-cta-title {
    margin-bottom: 1.4rem !important;
  }

  /* Consistent space between intro copy and the main visual/content block. */
  .problem-description,
  .solution-description,
  .how-description,
  .impact-description,
  .integration-description,
  .credibility-copy,
  .final-cta-copy {
    margin-bottom: 2.25rem !important;
  }

  /* More separation between major content components. */
  .problem-copy {
    padding-right: 3rem !important;
  }

  .problem-consequences,
  .solution-flow,
  .how-journey,
  .impact-grid,
  .integration-map,
  .credibility-metrics,
  .final-cta-actions {
    margin-top: 0.5rem !important;
  }

  .solution-closing,
  .how-closing,
  .impact-closing,
  .integration-closing,
  .credibility-closing {
    margin-top: 2.25rem !important;
  }

  .integration-pillar-grid {
    margin-top: 2rem !important;
  }

  .final-cta-note {
    margin-top: 1.25rem !important;
  }
}

/* ==========================================================
   Extracted style block 29: tablet-vertical-phased-v15
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Strong tablet reset: preserve the desktop left-to-right composition. */
  .hero-visual-stage{padding:1.4rem 1rem!important;min-height:610px!important;overflow:hidden!important;}
  .journey-container{
    position:relative!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:space-between!important;
    width:100%!important;height:350px!important;min-height:350px!important;
    gap:.35rem!important;padding:0 .35rem!important;overflow:visible!important;
  }
  .journey-container > .journey-node-group{
    position:relative!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    margin:0!important;margin-top:0!important;margin-left:0!important;margin-right:0!important;
    min-width:0!important;width:auto!important;max-width:none!important;
    grid-column:auto!important;grid-row:auto!important;order:initial!important;
    transform:none!important;overflow:visible!important;
  }
  .journey-container > .journey-node-group.channels-stack{
    order:initial!important;display:flex!important;flex-direction:column!important;
    flex-wrap:nowrap!important;align-items:stretch!important;justify-content:center!important;
    width:126px!important;min-width:126px!important;max-width:126px!important;
    gap:.42rem!important;margin:0!important;padding:0!important;
  }
  .journey-container > .journey-node-group.channels-stack > .channel-pill{
    position:relative!important;inset:auto!important;transform:none!important;
    display:flex!important;width:126px!important;min-width:126px!important;max-width:126px!important;
    min-height:34px!important;margin:0!important;padding:.32rem .5rem!important;
    align-items:center!important;justify-content:flex-start!important;gap:.45rem!important;
    font-size:.72rem!important;line-height:1.1!important;white-space:nowrap!important;
    border-radius:7px!important;
  }
  .journey-container > .journey-node-group.channels-stack .channel-icon{
    width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;
  }
  .journey-container > .journey-node-group.tablet-phone-node{order:initial!important;margin:0!important;}
  .journey-container > .journey-node-group.user-node,
  .journey-container > .journey-node-group.ctvbridge-hero-node,
  .journey-container > .journey-node-group.ctv-node-wrapper{order:initial!important;margin:0!important;}

  .journey-container .mobile-device-card{width:72px!important;height:136px!important;border-radius:16px!important;padding:.35rem!important;}
  .journey-container .engagement-label{font-size:.66rem!important;line-height:1.08!important;}
  .journey-container .engagement-icon-circle{width:28px!important;height:28px!important;margin-bottom:.3rem!important;}
  .journey-container .user-avatar-circle{width:54px!important;height:54px!important;}
  .journey-container .user-node-label{font-size:.72rem!important;margin-top:.4rem!important;}
  .journey-container .ctvbridge-glow-wrapper{transform:scale(.82)!important;transform-origin:center!important;}
  .journey-container .ctvbridge-node-label{font-size:.75rem!important;margin-top:.2rem!important;}
  .journey-container .ctv-display-card{transform:scale(.78)!important;transform-origin:center!important;}
  .journey-container .ctv-node-label{font-size:.72rem!important;margin-top:-.2rem!important;}
  .journey-container .verification-pill{transform:scale(.78)!important;transform-origin:center!important;right:-22px!important;top:-34px!important;white-space:nowrap!important;}

  .journey-container .journey-svg-layer{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;pointer-events:none!important;}
  .journey-container .path-channels-group{opacity:0!important;transition:opacity .32s ease!important;}
  .journey-container.tablet14-channel-lines-on .path-channels-group{opacity:1!important;}
  .journey-container .path-phone-user,.journey-container .path-gap-dotted,.journey-container .path-user-ctvbridge,.journey-container .path-ctvbridge-tv,.journey-container .desktop-phase-pulses{opacity:0!important;visibility:hidden!important;}
  .journey-container > .attribution-unknown-label{display:none!important;}

  .journey-container > .journey-node-group.ctvbridge-hero-node{opacity:0!important;visibility:hidden!important;}
  .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-slot-on{opacity:1!important;visibility:visible!important;}
  .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{opacity:0!important;visibility:hidden!important;transition:opacity .24s ease!important;}
  .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-glow-wrapper,
  .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-node-label{opacity:1!important;visibility:visible!important;}
  .tablet14-slot-unknown{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;opacity:0!important;visibility:hidden!important;z-index:20!important;color:#64748B!important;text-align:center!important;font-size:.68rem!important;font-weight:700!important;line-height:1.05!important;}
  .tablet14-slot-unknown .unknown-mark{width:50px!important;height:50px!important;display:grid!important;place-items:center!important;border:2px dashed #94A3B8!important;border-radius:14px!important;background:#fff!important;font-size:25px!important;}
  .ctvbridge-hero-node.tablet14-slot-on:not(.tablet14-show-bridge) .tablet14-slot-unknown{opacity:1!important;visibility:visible!important;}

  .journey-container > .channels-stack:not(.tablet14-on),
  .journey-container > .journey-node-group.tablet-phone-node:not(.tablet14-on),
  .journey-container > .user-node:not(.tablet14-on),
  .journey-container > .ctv-node-wrapper:not(.tablet14-on),
  .hero-visual-stage .business-insight-card:not(.tablet14-on){opacity:0!important;visibility:hidden!important;}
  .journey-container > .tablet14-on,.hero-visual-stage .business-insight-card.tablet14-on{opacity:1!important;visibility:visible!important;}
  /* v15: stable tablet state selectors. These override legacy mobile/desktop animation rules. */
  .hero-visual-stage .journey-container > .journey-node-group.channels-stack.tablet14-on,
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node.tablet14-on,
  .hero-visual-stage .journey-container > .journey-node-group.user-node.tablet14-on,
  .hero-visual-stage .journey-container > .journey-node-group.ctv-node-wrapper.tablet14-on {
    display:flex!important;opacity:1!important;visibility:visible!important;transform:none!important;
  }
  .hero-visual-stage .journey-container > .journey-node-group.channels-stack:not(.tablet14-on),
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node:not(.tablet14-on),
  .hero-visual-stage .journey-container > .journey-node-group.user-node:not(.tablet14-on),
  .hero-visual-stage .journey-container > .journey-node-group.ctv-node-wrapper:not(.tablet14-on) {
    opacity:0!important;visibility:hidden!important;
  }
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-slot-on {
    display:flex!important;opacity:1!important;visibility:visible!important;transform:none!important;
  }
  .hero-visual-stage .business-insight-card.tablet14-on{display:block!important;opacity:1!important;visibility:visible!important;}
  .hero-visual-stage .business-insight-card:not(.tablet14-on){opacity:0!important;visibility:hidden!important;}
  .journey-container .verification-pill:not(.tablet14-verified-on),.journey-container .verified-check-indicator:not(.tablet14-verified-on){opacity:0!important;visibility:hidden!important;}
  .journey-container .verification-pill.tablet14-verified-on,.journey-container .verified-check-indicator.tablet14-verified-on{opacity:1!important;visibility:visible!important;}

  .tablet14-progress-track{position:absolute!important;z-index:2!important;height:2px!important;transform-origin:left center!important;background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 10px)!important;opacity:0!important;pointer-events:none!important;}
  .tablet14-progress-track.is-visible{opacity:1!important;}
  .tablet14-progress-dot{position:absolute!important;z-index:30!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#0284C7!important;box-shadow:0 0 0 4px rgba(2,132,199,.10),0 0 12px rgba(2,132,199,.5)!important;opacity:0!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;}

  .hero-visual-stage .business-insight-card{width:min(76%,590px)!important;margin-top:1rem!important;padding:1rem 1.2rem!important;}
  .hero-visual-stage .insight-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.65rem!important;}
}
@media (max-width:680px),(min-width:1025px){.tablet14-progress-track,.tablet14-progress-dot{display:none!important;}}

/* ==========================================================
   Extracted style block 30: tablet-pulse-final-fix-v17
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  .journey-container .tablet14-progress-dot{
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
  }
  .journey-container .tablet14-progress-dot.tablet14-pulse-on{
    visibility:visible!important;
    opacity:1!important;
  }
}

/* ==========================================================
   Extracted style block 31: chrome-svg-render-fix-v19
   ========================================================== */
/* Chrome-safe rendering for the marketing-channel SVG paths.
   The old pathLength/dash animation can create long black spikes in Chromium. */
@media (min-width:681px){
  .journey-container .journey-svg-layer .path-channels-group .journey-path{
    animation:none !important;
    fill:none !important;
    stroke:#0284C7 !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    vector-effect:non-scaling-stroke !important;
    shape-rendering:geometricPrecision !important;
  }
  /* The JS state machine controls visibility; prevent legacy SVG animations from competing. */
  .journey-container .journey-svg-layer .path-phone-user .journey-path,
  .journey-container .journey-svg-layer .path-user-ctvbridge .journey-path,
  .journey-container .journey-svg-layer .path-ctvbridge-tv .journey-path,
  .journey-container .journey-svg-layer .path-gap-dotted .journey-path{
    animation:none !important;
    fill:none !important;
    stroke-dashoffset:0 !important;
    vector-effect:non-scaling-stroke !important;
  }
}

/* ==========================================================
   Extracted style block 32: chrome-safe-connectors-and-tablet-spacing-v22
   ========================================================== */
/* Marketing connectors are deliberately isolated from every legacy journey-path
   dash animation. This prevents Chromium from drawing black spikes. */
@media (min-width:681px){
  .journey-container .journey-svg-layer .path-channels-group .channel-connector-safe{
    display:block !important;
    fill:none !important;
    stroke:#0284C7 !important;
    stroke-width:2.4 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    animation:none !important;
    transition:none !important;
    vector-effect:non-scaling-stroke !important;
    shape-rendering:geometricPrecision !important;
  }
  /* Remove obsolete arrow/pulse pseudo-elements that can overlap the real nodes. */
  .journey-container > .journey-node-group::after,
  .journey-container > .journey-node-group::before,
  .channels-stack::after,
  .channels-stack::before{
    content:none !important;
  }
}

/* Give the approved horizontal tablet composition fixed node lanes so icons do
   not crowd or overlap at narrower Chromium viewport widths. */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage .journey-container{
    justify-content:space-between !important;
    column-gap:0 !important;
    padding-left:.5rem !important;
    padding-right:.5rem !important;
  }
  .hero-visual-stage .journey-container > .channels-stack{
    flex:0 0 126px !important;
    width:126px !important;
  }
  .hero-visual-stage .journey-container > .tablet-phone-node{
    flex:0 0 78px !important;
    width:78px !important;
  }
  .hero-visual-stage .journey-container > .user-node{
    flex:0 0 62px !important;
    width:62px !important;
  }
  .hero-visual-stage .journey-container > .ctvbridge-hero-node{
    flex:0 0 94px !important;
    width:94px !important;
  }
  .hero-visual-stage .journey-container > .ctv-node-wrapper{
    flex:0 0 112px !important;
    width:112px !important;
  }
  .hero-visual-stage .journey-container .ctvbridge-glow-wrapper{
    transform:scale(.74) !important;
  }
  .hero-visual-stage .journey-container .ctv-display-card{
    transform:scale(.68) !important;
  }
  .hero-visual-stage .journey-container .verification-pill{
    transform:scale(.7) !important;
    right:-12px !important;
  }
}
/* Mobile hero: JavaScript is the only animation controller */
@media (max-width: 680px) {
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node,
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node .mobile-device-card,
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node .mobile-device-card::before,
  .hero-visual-stage .journey-container > .journey-node-group.tablet-phone-node .mobile-device-card::after {
    animation: none !important;
  }

  .hero-visual-stage
    .journey-container
    > .journey-node-group.tablet-phone-node.mobile-on,
  .hero-visual-stage
    .journey-container
    > .journey-node-group.tablet-phone-node.mobile-on
    .mobile-device-card {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ==========================================================
   Mobile hero compact layout — approved iPhone direction
   ========================================================== */
@media (max-width: 680px) {
  .hero-visual-stage {
    margin-top: 1rem !important;
    padding: .45rem .45rem .6rem !important;
  }

  .hero-visual-stage .journey-container {
    grid-template-rows: auto auto auto 82px auto !important;
    row-gap: 14px !important;
    padding: .45rem .5rem .55rem !important;
  }

  /* Six marketing sources in a compact 3 × 2 grid. */
  .hero-visual-stage .channels-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-visual-stage .channels-stack .channel-pill {
    min-width: 0 !important;
    min-height: 35px !important;
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .hero-visual-stage .channels-stack .channel-icon {
    flex: 0 0 21px !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }

  /* Smaller engagement phone. */
  .hero-visual-stage .tablet-phone-node .mobile-device-card {
    width: 76px !important;
    height: 122px !important;
    min-width: 76px !important;
    min-height: 122px !important;
    border-radius: 16px !important;
  }

  .hero-visual-stage .tablet-phone-node .mobile-screen-content {
    padding: 8px 5px !important;
    gap: 7px !important;
  }

  .hero-visual-stage .tablet-phone-node .check-circle-blue {
    width: 25px !important;
    height: 25px !important;
  }

  .hero-visual-stage .tablet-phone-node .mobile-status-text {
    max-width: 68px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  /* Compress the middle of the story without changing its sequence. */
  .hero-visual-stage .user-avatar-circle {
    width: 48px !important;
    height: 48px !important;
  }

  .hero-visual-stage .user-node .node-label,
  .hero-visual-stage .ctv-node-wrapper .node-label {
    margin-top: 3px !important;
    font-size: 10px !important;
  }

  .hero-visual-stage .ctvbridge-glow-wrapper {
    width: 66px !important;
    height: 66px !important;
    border-radius: 14px !important;
  }

  .hero-visual-stage .ctvbridge-node-asset,
  .hero-visual-stage .ctvbridge-node-asset svg {
    width: 42px !important;
    height: 52px !important;
  }

  .hero-visual-stage .ctvbridge-node-label {
    margin-top: 4px !important;
    font-size: 12px !important;
  }

  /* Keep the user → CTV path visually continuous through CTVBridge. */
  .hero-visual-stage .mobile-progress-track {
    width: 2px !important;
    background: repeating-linear-gradient(
      to bottom,
      rgba(148, 163, 184, .78) 0 4px,
      transparent 4px 8px
    ) !important;
  }

  .hero-visual-stage .ctv-display-card {
    width: 96px !important;
    height: 62px !important;
    font-size: 14px !important;
  }

  .hero-visual-stage .ctv-stand-stem { height: 9px !important; }
  .hero-visual-stage .ctv-stand-base { width: 34px !important; }

  .hero-visual-stage .verification-pill {
    top: -24px !important;
    right: 50% !important;
    transform: translateX(50%) translateY(5px) scale(.96) !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .hero-visual-stage .verification-pill.mobile-verified-on {
    transform: translateX(50%) !important;
  }

  /* Compact proof card so the complete animation fits in the iPhone view. */
  .hero-visual-stage + .business-insight-card,
  .business-insight-card {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    margin: .45rem auto 0 !important;
    padding: .6rem .7rem !important;
    border-radius: 10px !important;
  }

  .business-insight-card .insight-card-header {
    margin-bottom: .38rem !important;
    padding-bottom: .38rem !important;
  }

  .business-insight-card .insight-card-title { font-size: 9px !important; }
  .business-insight-card .insight-pill { padding: 3px 6px !important; font-size: 9px !important; }
  .business-insight-card .insight-grid { gap: .3rem .55rem !important; }
  .business-insight-card .metric-label { font-size: 8px !important; }
  .business-insight-card .metric-value { font-size: 10px !important; line-height: 1.15 !important; }
}

@media (max-width: 390px) {
  .hero-visual-stage .channels-stack .channel-pill {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 10px !important;
  }
  .hero-visual-stage .channels-stack .channel-icon {
    flex-basis: 19px !important;
    width: 19px !important;
    height: 19px !important;
  }
}

/* ==========================================================
   Mobile hero spacing v3 — approved airy iPhone composition
   Keeps the complete animation section inside the first phone viewport.
   ========================================================== */
@media (max-width: 680px) {
  .hero {
    box-sizing: border-box !important;
    min-height: calc(100svh - var(--header-height)) !important;
    padding: .75rem 1rem 1rem !important;
  }

  .hero-visual-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: calc(100svh - var(--header-height) - 1.75rem) !important;
    margin-top: 0 !important;
    padding: .7rem .55rem .75rem !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .hero-visual-stage .journey-container {
    grid-template-rows: auto auto auto 88px auto !important;
    row-gap: 19px !important;
    padding: .35rem .45rem 0 !important;
  }

  /* Give the top of the journey room without enlarging the cards. */
  .hero-visual-stage .channels-stack {
    margin-bottom: 2px !important;
  }

  /* Air between the major narrative steps. */
  .hero-visual-stage .tablet-phone-node,
  .hero-visual-stage .user-node,
  .hero-visual-stage .ctvbridge-hero-node,
  .hero-visual-stage .ctv-node-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-visual-stage .verification-pill {
    top: -27px !important;
  }

  /* Keep the evidence card within the same visual panel, with a clear gap. */
  .hero-visual-stage .business-insight-card,
  .business-insight-card {
    flex: 0 0 auto !important;
    margin: 1px auto 0 !important;
  }

  /* Ensure the following section begins below the first viewport. */
  .problem-section {
    margin-top: 0 !important;
  }
}

/* ==========================================================
   Mobile hero spacing v4 — distribute unused panel space
   Keeps the proof card inside the hero and adds air between
   each step of the iPhone attribution journey.
   ========================================================== */
@media (max-width: 680px) {
  .hero-visual-stage {
    justify-content: space-between !important;
    gap: 24px !important;
    padding-bottom: 1rem !important;
  }

  .hero-visual-stage .journey-container {
    grid-template-rows: auto auto auto 104px auto !important;
    row-gap: 27px !important;
    padding-top: .55rem !important;
  }

  .hero-visual-stage .channels-stack {
    margin-bottom: 4px !important;
  }

  .hero-visual-stage .business-insight-card,
  .business-insight-card {
    margin: 0 auto !important;
  }
}

/* ==========================================================
   Mobile hero spacing v5 — approved final distribution
   Uses the existing hero height, redistributes the lower empty
   space between the journey steps, and places verification
   directly below the TV while leaving the proof card anchored.
   ========================================================== */
@media (max-width: 680px) {
  /* Preserve the established overall animation height. */
  .hero-visual-stage {
    min-height: calc(100svh - var(--header-height) - 1.75rem) !important;
    justify-content: space-between !important;
    padding-bottom: 1rem !important;
  }

  /* Use the available lower whitespace between the narrative steps. */
  .hero-visual-stage .journey-container {
    grid-template-rows: auto auto auto 104px auto !important;
    row-gap: 34px !important;
    padding-top: .55rem !important;
    padding-bottom: 0 !important;
  }

  .hero-visual-stage .channels-stack {
    margin-bottom: 8px !important;
  }

  .hero-visual-stage .tablet-phone-node,
  .hero-visual-stage .user-node,
  .hero-visual-stage .ctvbridge-hero-node {
    margin-bottom: 5px !important;
  }

  /* TV stays in the same final lane, while the verification pill
     becomes part of its vertical stack directly underneath it. */
  .hero-visual-stage .ctv-node-wrapper {
    transform: translateY(-8px) !important;
  }

  .hero-visual-stage .ctv-node-wrapper .ctv-display-card {
    order: 1 !important;
  }

  .hero-visual-stage .ctv-node-wrapper .ctv-stand-stem {
    order: 2 !important;
  }

  .hero-visual-stage .ctv-node-wrapper .ctv-stand-base {
    order: 3 !important;
  }

  .hero-visual-stage .ctv-node-wrapper > .node-label {
    order: 4 !important;
  }

  .hero-visual-stage .ctv-node-wrapper .verification-pill {
    position: static !important;
    inset: auto !important;
    order: 5 !important;
    margin-top: 8px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .hero-visual-stage .ctv-node-wrapper .verification-pill.mobile-verified-on {
    transform: none !important;
  }

  /* Keep the proof card at the bottom of the established panel. */
  .hero-visual-stage .business-insight-card,
  .business-insight-card {
    margin: 0 auto !important;
  }
}

/* ==========================================================
   Mobile attribution path v6 — continuous user-to-TV line
   The unknown attribution state and CTVBridge share one slot
   above a single uninterrupted dotted path.
   ========================================================== */
@media (max-width: 680px) {
  .hero-visual-stage .journey-container {
    position: relative !important;
  }

  /* One continuous dotted path from the user center to the TV center. */
  .hero-visual-stage .mobile-attribution-track {
    position: absolute !important;
    width: 2px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border-radius: 999px !important;
    background: repeating-linear-gradient(
      to bottom,
      rgba(148, 163, 184, .82) 0 4px,
      transparent 4px 8px
    ) !important;
    transition: opacity .22s ease !important;
    transform: translateX(-50%) !important;
  }

  .hero-visual-stage .mobile-attribution-track.is-visible {
    opacity: 1 !important;
  }

  /* The nodes sit above the line, rather than breaking its geometry. */
  .hero-visual-stage .user-node,
  .hero-visual-stage .ctvbridge-hero-node,
  .hero-visual-stage .ctv-node-wrapper {
    position: relative !important;
    z-index: 6 !important;
  }

  /* The separate legacy unknown label is no longer used on mobile. */
  .hero-visual-stage .journey-container > .attribution-unknown-label {
    display: none !important;
  }

  /* Reserve the CTVBridge row from the moment attribution becomes unknown. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node.mobile-slot-on {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  /* Hide the logo until it replaces the unknown icon. */
  .hero-visual-stage .ctvbridge-hero-node.mobile-slot-on:not(.mobile-show-bridge)
    .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node.mobile-slot-on:not(.mobile-show-bridge)
    .ctvbridge-node-label {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .hero-visual-stage .ctvbridge-hero-node.mobile-show-bridge
    .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node.mobile-show-bridge
    .ctvbridge-node-label {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Unknown attribution appears in the exact same slot as the later logo. */
  .hero-visual-stage .mobile-slot-unknown {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: var(--color-text-muted) !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(.94) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    pointer-events: none !important;
  }

  .hero-visual-stage .mobile-slot-unknown .unknown-mark {
    font-size: 28px !important;
    line-height: .9 !important;
  }

  .hero-visual-stage .mobile-slot-unknown.mobile-unknown-on {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
  }

  /* The two pulse tracks remain animation guides only; the base path is continuous. */
  .hero-visual-stage .mobile-progress-track:nth-last-of-type(3),
  .hero-visual-stage .mobile-progress-track:nth-last-of-type(2) {
    z-index: 3 !important;
  }
}

/* ==========================================================
   Mobile attribution timing v7 — user-to-TV pulse sequence
   The pulse traverses the full path first. The attribution
   state then appears midway and is replaced by CTVBridge.
   ========================================================== */
@media (max-width: 680px) {
  /* Keep the attribution state opaque so the dotted path never
     shows through the icon itself. */
  .hero-visual-stage .mobile-slot-unknown .unknown-mark {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 58px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow:
      0 0 0 1px rgba(226, 232, 240, .95),
      0 8px 22px rgba(15, 23, 42, .08) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* The shared attribution/CTVBridge slot remains above the path. */
  .hero-visual-stage .ctvbridge-hero-node,
  .hero-visual-stage .mobile-slot-unknown,
  .hero-visual-stage .ctvbridge-glow-wrapper {
    position: relative !important;
    z-index: 7 !important;
  }

  /* The base path fades with the rest of the loop. */
  .hero-visual-stage .mobile-attribution-track {
    transition: opacity .32s ease !important;
  }
}

/* ==========================================================
   Mobile attribution timing v8 — two-stage attribution flow
   User pulse → attribution hold → CTVBridge hold → TV pulse.
   ========================================================== */
@media (max-width: 680px) {
  /* Keep both replacement states centered in the identical shared slot. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node.mobile-slot-on,
  .hero-visual-stage .journey-container > .ctvbridge-hero-node.mobile-show-bridge {
    transform: none !important;
  }

  /* The unknown state fully covers the dotted line while it is visible. */
  .hero-visual-stage .mobile-slot-unknown {
    z-index: 10 !important;
  }

  .hero-visual-stage .mobile-slot-unknown .unknown-mark {
    background: #fff !important;
  }

  /* Keep the CTVBridge artwork above the uninterrupted base path. */
  .hero-visual-stage .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-node-label {
    position: relative !important;
    z-index: 9 !important;
  }
}

/* ==========================================================
   Mobile shared attribution slot v9 — corrected replacement geometry
   Attribution Unknown and CTVBridge occupy one identical midpoint slot.
   ========================================================== */
@media (max-width: 680px) {
  /* Keep the existing grid row as the fixed midpoint lane. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node {
    position: relative !important;
    width: 126px !important;
    height: 104px !important;
    min-height: 104px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    filter: none !important;
    z-index: 8 !important;
  }

  .hero-visual-stage .journey-container > .ctvbridge-hero-node.mobile-slot-on {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Both states fill the same parent box. No independent top/margin offsets. */
  .hero-visual-stage .ctvbridge-hero-node > .mobile-replacement-state {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(.96) !important;
    transition: opacity .24s ease, transform .24s ease !important;
    pointer-events: none !important;
  }

  .hero-visual-stage .ctvbridge-hero-node > .mobile-replacement-state.mobile-state-on {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
  }

  /* Unknown state uses a white opaque circle so the dotted path is hidden. */
  .hero-visual-stage .mobile-slot-unknown .unknown-mark {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 58px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--color-text-muted) !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 1px rgba(226,232,240,.95),0 8px 22px rgba(15,23,42,.08) !important;
  }

  .hero-visual-stage .mobile-slot-unknown {
    color: var(--color-text-muted) !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
  }

  /* Logo state is centered in exactly the same box as the unknown state. */
  .hero-visual-stage .mobile-slot-bridge .ctvbridge-glow-wrapper {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 66px !important;
    height: 66px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hero-visual-stage .mobile-slot-bridge .ctvbridge-node-label {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    font-size: 12px !important;
  }

  /* The continuous path is confined strictly to User → TV. */
  .hero-visual-stage .mobile-attribution-track {
    z-index: 2 !important;
    overflow: hidden !important;
  }

  .hero-visual-stage .user-node,
  .hero-visual-stage .ctvbridge-hero-node,
  .hero-visual-stage .ctv-node-wrapper {
    z-index: 6 !important;
  }

  .hero-visual-stage .ctvbridge-hero-node {
    z-index: 9 !important;
  }
}

/* ==========================================================
   Mobile hero final safe-area polish v13
   Raises the lower journey ending on regular iPhones so the
   proof card is fully visible above Safari's bottom controls.
   ========================================================== */
@media (max-width: 680px) {
  /* Raise the TV and its attached verification pill by 10px. */
  .hero-visual-stage .ctv-node-wrapper {
    transform: translateY(-18px) !important;
  }

  /* Keep the pill visually connected to the TV. */
  .hero-visual-stage .ctv-node-wrapper .verification-pill {
    margin-top: 4px !important;
  }

  /* Raise the proof card into the phone safe viewing area. */
  .hero-visual-stage .business-insight-card,
  .business-insight-card {
    transform: translateY(-24px) !important;
  }
}

/* ==========================================================
   Tablet marketing-source consolidation
   Six visible channels transition into one Marketing Signal,
   then the pulse continues to the phone. Tablet only.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Remove the legacy blue fan / connector lines on tablet. */
  .hero-visual-stage .path-channels-group,
  .hero-visual-stage .journey-container.tablet14-channel-lines-on .path-channels-group,
  .hero-visual-stage .channels-stack::before,
  .hero-visual-stage .channels-stack::after{
    display:none !important;
    opacity:0 !important;
  }

  .hero-visual-stage .channels-stack{
    transform-origin:center center !important;
    transition:opacity .42s ease, transform .58s cubic-bezier(.4,0,.2,1), filter .42s ease !important;
  }

  .hero-visual-stage .journey-container.tablet-signal-collapsed > .channels-stack{
    opacity:0 !important;
    transform:scale(.62) !important;
    filter:blur(2px) !important;
    pointer-events:none !important;
  }

  .hero-visual-stage .tablet-marketing-signal{
    position:absolute !important;
    z-index:8 !important;
    width:96px !important;
    min-height:86px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:11px 8px !important;
    border:1px solid rgba(148,163,184,.34) !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:0 10px 24px rgba(15,23,42,.09) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translate(-50%,-50%) scale(.72) !important;
    transition:opacity .38s ease, transform .58s cubic-bezier(.2,.8,.2,1), visibility 0s linear .58s !important;
    pointer-events:none !important;
  }

  .hero-visual-stage .tablet-marketing-signal.tablet-signal-on{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate(-50%,-50%) scale(1) !important;
    transition-delay:.16s, .16s, 0s !important;
  }

  .tablet-marketing-signal-icon{
    position:relative !important;
    width:42px !important;
    height:34px !important;
    display:block !important;
  }

  .tablet-marketing-signal-icon span{
    position:absolute !important;
    left:50% !important;
    bottom:2px !important;
    border:2px solid #078dcc !important;
    border-bottom-color:transparent !important;
    border-left-color:transparent !important;
    border-radius:50% !important;
    transform:translateX(-50%) rotate(-45deg) !important;
  }
  .tablet-marketing-signal-icon span:nth-child(1){width:34px!important;height:34px!important;opacity:.38!important;}
  .tablet-marketing-signal-icon span:nth-child(2){width:24px!important;height:24px!important;bottom:7px!important;opacity:.68!important;}
  .tablet-marketing-signal-icon span:nth-child(3){width:12px!important;height:12px!important;bottom:13px!important;background:#078dcc!important;border-color:#078dcc!important;opacity:1!important;}

  .tablet-marketing-signal-label{
    color:#52657f !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}

/* ==========================================================
   Tablet channel-to-signal collapse refinement
   Each source card physically converges into the unified icon.
   No connector fan is displayed.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage .channels-stack{
    transition:none !important;
    filter:none !important;
    transform:none !important;
  }
  .hero-visual-stage .journey-container.tablet-signal-collapsed > .channels-stack{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .hero-visual-stage .channels-stack .channel-pill{
    will-change:transform,opacity,filter;
    transform-origin:center center;
  }
  .hero-visual-stage .tablet-marketing-signal{
    transition:opacity .3s ease,transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s !important;
  }
  .hero-visual-stage .tablet-marketing-signal.tablet-signal-on{
    transition-delay:0s,0s,0s !important;
  }
}

/* ==========================================================
   Tablet v4: true accordion channel collapse + crisp bridge
   Upper source cards fold down; lower source cards fold up.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage .channels-stack .channel-pill{
    opacity:1;
    filter:none !important;
    backface-visibility:hidden;
    transform-style:preserve-3d;
  }

  /* The cards are hidden only after the accordion motion has completed. */
  .hero-visual-stage .journey-container.tablet-signal-collapsed > .channels-stack,
  .hero-visual-stage .channels-stack{
    filter:none !important;
  }

  /* Keep the CTVBridge replacement crisp. Older mobile rules applied blur. */
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-slot-on,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge{
    filter:none !important;
  }
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-glow-wrapper,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-node-label{
    filter:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* ==========================================================
   Tablet v5: accordion merge polish
   Cards remain fully opaque while folding into the middle.
   The Marketing Signal appears only after the merge completes.
   Keep the CTVBridge replacement crisp and instantaneous.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage .channels-stack{
    overflow:visible !important;
  }

  .hero-visual-stage .channels-stack .channel-pill{
    opacity:1 !important;
    filter:none !important;
    transition:none !important;
    will-change:transform;
  }

  .hero-visual-stage .tablet-marketing-signal{
    opacity:0 !important;
    visibility:hidden !important;
    filter:none !important;
    transform:translate(-50%,-50%) scale(.84) !important;
    transition:opacity .18s ease-out, transform .26s cubic-bezier(.2,.9,.25,1), visibility 0s linear .26s !important;
  }

  .hero-visual-stage .tablet-marketing-signal.tablet-signal-on{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:translate(-50%,-50%) scale(1) !important;
    transition-delay:0s !important;
  }

  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{
    filter:none !important;
    animation:none !important;
  }

  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{
    transition:none !important;
  }

  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-glow-wrapper,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-node-label{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }
}

/* ==========================================================
   Tablet simplified source path
   Keep all six marketing channels visible. Remove the failed
   accordion / Marketing Signal treatment and use one dotted
   path from the stack center through the phone into the User.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  .hero-visual-stage .tablet-marketing-signal{
    display:none !important;
  }

  .hero-visual-stage .channels-stack,
  .hero-visual-stage .channels-stack .channel-pill{
    transform:none !important;
    filter:none !important;
    transition:none !important;
    opacity:1;
  }

  .hero-visual-stage .journey-container .path-channels-group{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .journey-container > .journey-node-group.ctvbridge-hero-node .ctvbridge-node-label{
    filter:none !important;
  }
}

/* ==========================================================
   FINAL TABLET PATH CONTROLLER v8
   Deliberately overrides all legacy tablet path experiments.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Remove every obsolete tablet signal/fan treatment. */
  .hero-visual-stage .tablet-marketing-signal,
  .hero-visual-stage .journey-container .path-channels-group,
  .hero-visual-stage .journey-container .path-phone-user,
  .hero-visual-stage .journey-container .path-gap-dotted,
  .hero-visual-stage .journey-container .path-user-ctvbridge,
  .hero-visual-stage .journey-container .path-ctvbridge-tv,
  .hero-visual-stage .journey-container .desktop-phase-pulses{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }

  .hero-visual-stage .channels-stack,
  .hero-visual-stage .channels-stack .channel-pill{
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
  }

  /* The custom tracks are the only tablet connector system. */
  .hero-visual-stage .tablet14-progress-track{
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    height:2px!important;
    opacity:0!important;
    visibility:hidden!important;
    transform-origin:left center!important;
    background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 10px)!important;
    pointer-events:none!important;
  }
  .hero-visual-stage .tablet14-progress-track.is-visible{
    opacity:1!important;
    visibility:visible!important;
  }
  .hero-visual-stage .tablet14-progress-dot{
    display:block!important;
    position:absolute!important;
    z-index:40!important;
    width:9px!important;
    height:9px!important;
    border-radius:50%!important;
    background:#0284C7!important;
    box-shadow:0 0 0 4px rgba(2,132,199,.10),0 0 12px rgba(2,132,199,.5)!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
  }
  .hero-visual-stage .tablet14-progress-dot.tablet14-pulse-on{
    opacity:1!important;
    visibility:visible!important;
  }

  /* JS owns tablet visibility. */
  .hero-visual-stage .journey-container > .channels-stack:not(.tablet14-on),
  .hero-visual-stage .journey-container > .tablet-phone-node:not(.tablet14-on),
  .hero-visual-stage .journey-container > .user-node:not(.tablet14-on),
  .hero-visual-stage .journey-container > .ctv-node-wrapper:not(.tablet14-on),
  .hero-visual-stage .business-insight-card:not(.tablet14-on){
    opacity:0!important;
    visibility:hidden!important;
  }
  .hero-visual-stage .journey-container > .channels-stack.tablet14-on,
  .hero-visual-stage .journey-container > .tablet-phone-node.tablet14-on,
  .hero-visual-stage .journey-container > .user-node.tablet14-on,
  .hero-visual-stage .journey-container > .ctv-node-wrapper.tablet14-on,
  .hero-visual-stage .business-insight-card.tablet14-on{
    opacity:1!important;
    visibility:visible!important;
  }

  /* Shared midpoint replacement slot: Unknown first, then CTVBridge. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node{
    opacity:0!important;
    visibility:hidden!important;
    filter:none!important;
  }
  .hero-visual-stage .journey-container > .ctvbridge-hero-node.tablet14-slot-on{
    opacity:1!important;
    visibility:visible!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .tablet14-slot-unknown{
    opacity:0!important;
    visibility:hidden!important;
  }
  .hero-visual-stage .ctvbridge-hero-node.tablet14-slot-on:not(.tablet14-show-bridge) .tablet14-slot-unknown{
    opacity:1!important;
    visibility:visible!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label{
    opacity:0!important;
    visibility:hidden!important;
    filter:none!important;
    animation:none!important;
  }
  .hero-visual-stage .ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node.tablet14-show-bridge .ctvbridge-node-label{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
  }

  .hero-visual-stage .verification-pill:not(.tablet14-verified-on),
  .hero-visual-stage .verified-check-indicator:not(.tablet14-verified-on){
    opacity:0!important;
    visibility:hidden!important;
  }
  .hero-visual-stage .verification-pill.tablet14-verified-on,
  .hero-visual-stage .verified-check-indicator.tablet14-verified-on{
    opacity:1!important;
    visibility:visible!important;
  }
}

/* ==========================================================
   FINAL TABLET POLISH v9
   Opaque midpoint states, attached TV stand, persistent phone.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Keep the tablet phone visible for the full JS-controlled loop. */
  .hero-visual-stage .journey-container > .tablet-phone-node,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card::before,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card::after{
    animation:none!important;
  }
  .hero-visual-stage .journey-container > .tablet-phone-node.tablet14-on,
  .hero-visual-stage .journey-container > .tablet-phone-node.tablet14-on .mobile-device-card{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
  }

  /* One opaque shared plate hides the dotted path behind both midpoint states. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node{
    z-index:12!important;
    min-width:92px!important;
    min-height:92px!important;
    padding:7px 10px!important;
    background:#fff!important;
    border-radius:18px!important;
    box-shadow:0 2px 8px rgba(15,23,42,.06)!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .tablet14-slot-unknown{
    inset:7px 10px!important;
    background:#fff!important;
    border-radius:14px!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .tablet14-slot-unknown .unknown-mark,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label{
    position:relative!important;
    z-index:2!important;
  }

  /* Size the TV directly instead of scaling only the screen, which detached its stand. */
  .hero-visual-stage .journey-container .ctv-display-card{
    width:72px!important;
    height:45px!important;
    transform:none!important;
    transform-origin:center!important;
  }
  .hero-visual-stage .journey-container .ctv-stand-stem{
    display:block!important;
    width:14px!important;
    height:7px!important;
    margin-top:0!important;
    background:#334155!important;
    transform:none!important;
  }
  .hero-visual-stage .journey-container .ctv-stand-base{
    display:block!important;
    width:32px!important;
    height:3px!important;
    margin-top:0!important;
    background:#334155!important;
    border-radius:2px!important;
    transform:none!important;
  }
}

/* ==========================================================
   FINAL TABLET POLISH v10
   Match the approved mobile midpoint styling without using
   one large white plate behind the icon and label.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* The shared slot itself stays transparent. Only the icon tile
     is opaque, so the dotted line is hidden cleanly behind it. */
  .hero-visual-stage .journey-container > .ctvbridge-hero-node{
    min-width:110px!important;
    min-height:96px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  /* Attribution Unknown: solid circular tile, matching mobile. */
  .hero-visual-stage .ctvbridge-hero-node .tablet14-slot-unknown{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#64748B!important;
    font-size:.72rem!important;
    font-weight:600!important;
    line-height:1.05!important;
    text-align:center!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .tablet14-slot-unknown .unknown-mark{
    width:58px!important;
    height:58px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 58px!important;
    margin:0!important;
    background:#FFFFFF!important;
    border:1px solid #DCE4EE!important;
    border-radius:50%!important;
    box-shadow:0 7px 18px rgba(15,23,42,.08)!important;
    color:#64748B!important;
    font-size:2rem!important;
    font-weight:700!important;
    line-height:1!important;
  }

  /* CTVBridge: use the existing mobile-style rounded square and glow.
     Do not add a second white plate behind the label. */
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper{
    width:64px!important;
    height:64px!important;
    flex:0 0 64px!important;
    margin:0!important;
    background:#FFFFFF!important;
    border:2px solid #0284C7!important;
    border-radius:16px!important;
    box-shadow:
      0 0 0 9px rgba(2,132,199,.07),
      0 7px 18px rgba(15,23,42,.08)!important;
    overflow:hidden!important;
  }
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label{
    margin-top:7px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* ==========================================================
   FINAL TABLET SPACING v11
   Reduce unused vertical space inside the hero panel and
   tighten the transitions from CTA -> visual -> Section 2.
   ========================================================== */
@media (min-width:681px) and (max-width:1024px){
  /* Pull the tablet visual closer to the CTA and reduce the
     unused space below it before the next section. */
  .hero{
    gap:1.5rem!important;
    padding-bottom:1.25rem!important;
    min-height:auto!important;
  }

  /* Cut the excess panel height approximately in half while
     preserving room for the channel stack and proof card. */
  .hero-visual-stage{
    min-height:440px!important;
    padding:1rem 1rem .9rem!important;
    justify-content:center!important;
  }

  .hero-visual-stage .journey-container{
    height:275px!important;
    min-height:275px!important;
  }

  .hero-visual-stage .business-insight-card{
    margin-top:.45rem!important;
  }

  /* Bring the next section closer to the completed hero panel. */
  .problem-section{
    padding-top:2.3rem!important;
  }
}

/* ==========================================================
   DESKTOP v12 — mirror approved tablet/mobile sequence
   ========================================================== */
@media (min-width:1025px){
  .hero-visual-stage .tablet-marketing-signal,
  .hero-visual-stage .journey-container .path-channels-group,
  .hero-visual-stage .journey-container .path-phone-user,
  .hero-visual-stage .journey-container .path-gap-dotted,
  .hero-visual-stage .journey-container .path-user-ctvbridge,
  .hero-visual-stage .journey-container .path-ctvbridge-tv,
  .hero-visual-stage .journey-container .desktop-phase-pulses,
  .hero-visual-stage .desktop-progress-track,
  .hero-visual-stage .desktop-progress-dot{display:none!important;opacity:0!important;visibility:hidden!important;}

  .hero-visual-stage .channels-stack,
  .hero-visual-stage .channels-stack .channel-pill{transform:none!important;filter:none!important;animation:none!important;transition:none!important;}

  .hero-visual-stage .desktop15-progress-track{display:block!important;position:absolute!important;z-index:2!important;height:2px!important;opacity:0!important;visibility:hidden!important;transform-origin:left center!important;background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 10px)!important;pointer-events:none!important;}
  .hero-visual-stage .desktop15-progress-track.is-visible{opacity:1!important;visibility:visible!important;}
  .hero-visual-stage .desktop15-progress-dot{display:block!important;position:absolute!important;z-index:40!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#0284C7!important;box-shadow:0 0 0 4px rgba(2,132,199,.10),0 0 12px rgba(2,132,199,.5)!important;opacity:0!important;visibility:hidden!important;transform:translate(-50%,-50%)!important;pointer-events:none!important;}
  .hero-visual-stage .desktop15-progress-dot.desktop15-pulse-on{opacity:1!important;visibility:visible!important;}

  .hero-visual-stage .journey-container > .channels-stack:not(.desktop15-on),
  .hero-visual-stage .journey-container > .tablet-phone-node:not(.desktop15-on),
  .hero-visual-stage .journey-container > .user-node:not(.desktop15-on),
  .hero-visual-stage .journey-container > .ctv-node-wrapper:not(.desktop15-on),
  .hero-visual-stage .business-insight-card:not(.desktop15-on){opacity:0!important;visibility:hidden!important;}
  .hero-visual-stage .journey-container > .channels-stack.desktop15-on,
  .hero-visual-stage .journey-container > .tablet-phone-node.desktop15-on,
  .hero-visual-stage .journey-container > .user-node.desktop15-on,
  .hero-visual-stage .journey-container > .ctv-node-wrapper.desktop15-on,
  .hero-visual-stage .business-insight-card.desktop15-on{opacity:1!important;visibility:visible!important;}

  .hero-visual-stage .journey-container > .tablet-phone-node,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card::before,
  .hero-visual-stage .journey-container > .tablet-phone-node .mobile-device-card::after{animation:none!important;}
  .hero-visual-stage .journey-container > .tablet-phone-node.desktop15-on,
  .hero-visual-stage .journey-container > .tablet-phone-node.desktop15-on .mobile-device-card{opacity:1!important;visibility:visible!important;filter:none!important;}

  .hero-visual-stage .journey-container > .ctvbridge-hero-node{opacity:0!important;visibility:hidden!important;filter:none!important;min-width:120px!important;min-height:104px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;z-index:12!important;}
  .hero-visual-stage .journey-container > .ctvbridge-hero-node.desktop15-slot-on{opacity:1!important;visibility:visible!important;}
  .hero-visual-stage .ctvbridge-hero-node .desktop15-slot-unknown{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:0!important;background:transparent!important;color:#64748B!important;font-size:.82rem!important;font-weight:600!important;line-height:1.05!important;text-align:center!important;opacity:0!important;visibility:hidden!important;}
  .hero-visual-stage .ctvbridge-hero-node.desktop15-slot-on:not(.desktop15-show-bridge) .desktop15-slot-unknown{opacity:1!important;visibility:visible!important;}
  .hero-visual-stage .ctvbridge-hero-node .desktop15-slot-unknown .unknown-mark{width:66px!important;height:66px!important;display:grid!important;place-items:center!important;flex:0 0 66px!important;margin:0!important;background:#fff!important;border:1px solid #DCE4EE!important;border-radius:50%!important;box-shadow:0 7px 18px rgba(15,23,42,.08)!important;color:#64748B!important;font-size:2.2rem!important;font-weight:700!important;line-height:1!important;}
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label{opacity:0!important;visibility:hidden!important;filter:none!important;animation:none!important;}
  .hero-visual-stage .ctvbridge-hero-node.desktop15-show-bridge .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node.desktop15-show-bridge .ctvbridge-node-label{opacity:1!important;visibility:visible!important;filter:none!important;}
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper{width:72px!important;height:72px!important;flex:0 0 72px!important;margin:0!important;background:#fff!important;border:2px solid #0284C7!important;border-radius:17px!important;box-shadow:0 0 0 10px rgba(2,132,199,.07),0 7px 18px rgba(15,23,42,.08)!important;overflow:hidden!important;}
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label{margin-top:8px!important;background:transparent!important;box-shadow:none!important;}

  .hero-visual-stage .verification-pill:not(.desktop15-verified-on),
  .hero-visual-stage .verified-check-indicator:not(.desktop15-verified-on){opacity:0!important;visibility:hidden!important;}
  .hero-visual-stage .verification-pill.desktop15-verified-on,
  .hero-visual-stage .verified-check-indicator.desktop15-verified-on{opacity:1!important;visibility:visible!important;}

  .hero-visual-stage .journey-container .ctv-display-card{transform:none!important;transform-origin:center!important;}
  .hero-visual-stage .journey-container .ctv-stand-stem{display:block!important;margin-top:0!important;transform:none!important;}
  .hero-visual-stage .journey-container .ctv-stand-base{display:block!important;margin-top:0!important;transform:none!important;}
}

/* Maintain readable minimums after all compact mobile overrides above. */
@media (max-width:680px){
  .hero-visual-stage .channels-stack .channel-pill,
  .hero-visual-stage .channels-stack .channel-icon,
  .hero-visual-stage .tablet-phone-node .mobile-status-text,
  .hero-visual-stage .user-node .node-label,
  .hero-visual-stage .ctv-node-wrapper .node-label,
  .hero-visual-stage .verification-pill,
  .hero-visual-stage .mobile-slot-unknown{
    font-size:11px!important;
  }

  .business-insight-card .insight-card-title,
  .business-insight-card .insight-pill,
  .business-insight-card .metric-label{
    font-size:10px!important;
  }

  .business-insight-card .metric-value{
    font-size:11px!important;
  }
}

/* Preserve the established hero typography at the standard tablet breakpoint.
   Text-only sizing is isolated from node geometry, spacing, and animation. */
@media (min-width:768px) and (max-width:1024px){
  .hero-visual-stage .channels-stack .channel-pill{
    font-size:.78rem!important;
  }

  .hero-visual-stage .tablet-phone-node .mobile-status-text,
  .hero-visual-stage .user-node .node-label,
  .hero-visual-stage .ctv-node-wrapper .node-label{
    font-size:.75rem!important;
  }

  .hero-visual-stage .ctvbridge-node-label{
    font-size:.82rem!important;
  }

  .hero-visual-stage .verification-pill{
    font-size:.72rem!important;
  }

  .hero-visual-stage .business-insight-card .insight-card-title{
    font-size:.82rem!important;
  }

  .hero-visual-stage .business-insight-card .insight-pill{
    font-size:.72rem!important;
  }

  .hero-visual-stage .business-insight-card .metric-label{
    font-size:.7rem!important;
  }

  .hero-visual-stage .business-insight-card .metric-value{
    font-size:.78rem!important;
  }
}

/* Final reduced-motion state overrides every breakpoint animation rule above. */
@media (prefers-reduced-motion:reduce){
  .hero-visual-stage .journey-container > .channels-stack,
  .hero-visual-stage .journey-container > .tablet-phone-node,
  .hero-visual-stage .journey-container > .user-node,
  .hero-visual-stage .journey-container > .ctvbridge-hero-node,
  .hero-visual-stage .journey-container > .ctv-node-wrapper,
  .hero-visual-stage .business-insight-card,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-glow-wrapper,
  .hero-visual-stage .ctvbridge-hero-node .ctvbridge-node-label,
  .hero-visual-stage .verification-pill,
  .hero-visual-stage .verified-check-indicator{
    opacity:1!important;
    visibility:visible!important;
    animation:none!important;
    transition:none!important;
    filter:none!important;
  }

  .hero-visual-stage .journey-container > .ctvbridge-hero-node{
    transform:none!important;
  }

  .hero-visual-stage .attribution-unknown-label,
  .hero-visual-stage .mobile-replacement-state,
  .hero-visual-stage .tablet14-slot-unknown,
  .hero-visual-stage .desktop15-slot-unknown,
  .hero-visual-stage .journey-pulse,
  .hero-visual-stage [class*="progress-dot"]{
    display:none!important;
  }
}

/* Center the Solution headline block in the phone layout. */
@media (max-width:680px){
  .solution-title{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  .solution-section .solution-header > .section-eyebrow{
    display:block!important;
    width:100%!important;
    text-align:center!important;
  }
}