/* ============================================================
   BRAND OVERRIDES — palette matched to the real logo turquoise.
   Loaded last so it wins.
   ============================================================ */

:root{
  /* logo turquoise palette */
  --brand:    #5BC7C3;   /* primary turquoise (logo body) */
  --brand-2:  #2BA39E;   /* deeper teal for emphasis */
  --brand-3:  #BDEAE7;   /* pale mint (bubbles) */
  --brand-4:  #E6F7F5;   /* very pale wash */
}

/* hide the old inline SVG logo classes wherever they linger */
.brand-logo{ display:none !important; }

/* image-based logo */
.brand-img{ display:block; height:auto; width:auto; user-select:none; }
.brand-img--nav{    height: 124px; max-width: 420px; }
.brand-img--lg{     height: 150px; max-width: 420px; }
.brand-img--footer{ height: 96px; max-width: 240px; }
.nav__logo{ padding:0; display:inline-flex; align-items:center; align-self:center; }

/* Ensure every child of the nav is centered vertically in the bar. */
.nav{ align-items: center !important; }
.nav > * { align-self: center; }

/* When the nav becomes scrolled (sticky pill state), shrink logo so it
   matches the buttons' visual height — keeps the sticky bar compact. */
.nav.is-scrolled .brand-img--nav{ height: 60px; max-width: 220px; }

@media (max-width: 900px){
  .brand-img--nav{ height: 92px; max-width: 320px; }
  .nav.is-scrolled .brand-img--nav{ height: 52px; max-width: 190px; }
}
@media (max-width: 540px){
  .brand-img--nav{ height: 72px; max-width: 240px; }
  .nav.is-scrolled .brand-img--nav{ height: 44px; max-width: 160px; }
}

/* ============================================================
   PALETTE SWAPS — anywhere blue accents leaked in
   ============================================================ */
.hero-h1 .italic{ color: var(--brand-2); }
.section-head h2 em{ color: var(--brand-2); }
.how__title em{ color: var(--brand-2); }
.faq__left h2 em{ color: var(--brand-2); }
.why__left h2 em{ color: var(--brand-2); }
.cta h2 em{ color: var(--brand); }
.pricing__note a{ border-bottom-color: var(--brand); }
.service__body ul li::before{ border-color: var(--brand-2); }
.plan ul li::before{ border-color: var(--brand); }
.plan--featured ul li::before{ border-color: var(--brand); }

/* gradients to monochrome turquoise */
.btn--primary{ background: linear-gradient(180deg, #14323F, #0B1733); }
.btn--primary::before{
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(91,199,195,.55), transparent 60%);
}
.btn--ghost:hover .play{ background: var(--brand-2); }
.cta .btn--primary{ background:#fff; color:var(--ink); }

.nav__logo-mark,
.glass-card .ico,
.glass-card .ico--mint,
.glass-card .ico--blue,
.hero-chip__ico,
.hero-chip__ico--mint,
.hero-chip__ico--blue{
  background: linear-gradient(135deg, #7DDAD6 0%, #2BA39E 100%);
}

/* hero badge in brand color rim */
.hero-badge{ border: 1px solid rgba(91,199,195,.4); }

/* loader bar gradient */
.loader__bar span{
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}
.how__progress-bar,
.journey__meter-bar span,
.hero__steps li span,
.hero-rail__item i{ background: var(--ink); }
.hero-rail__item i{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* avatars / palette dots in hero used blue — switch to mint */
.avatars span:nth-child(3){ background-image: linear-gradient(135deg, #BDEAE7 0%, #5BC7C3 100%); }

/* journey path gradient */
.journey__path-svg defs linearGradient stop:nth-child(2){ stop-color: var(--brand) !important; }

/* link underline */
.link{ color: var(--ink); }
.link:hover{ color: var(--brand-2); }

/* glass step rail icon bg */
.hero__steps li span{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* ============================================================
   SCENE LOGOS — replace B&T labels with the brand image
   ============================================================ */

/* How it works — van logo overlay */
.scene__van{ position: relative; }
.scene__van-logo{
  position: absolute;
  left: 4%;
  top: 36%;
  width: 38%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* pack bag — show logo instead of text */
.pack-body{
  background: #fff !important;
  padding: 6px;
}
.pack-body img{
  width: 100%; height: 100%;
  object-fit: contain;
}

/* door bag — logo instead of text */
.door-bag__body{
  background: #fff !important;
  border: 3px solid #0B1733;
  padding: 8px;
}
.door-bag__body img{
  width: 100%; height: 100%;
  object-fit: contain;
}

/* journey van logo overlay */
.journey__van{ position: absolute; }
.journey__van-logo{
  position: absolute;
  left: 4%;
  top: 30%;
  width: 38%;
  height: auto;
  pointer-events: none;
}

/* journey path gradient — recolor stops to brand only */
#jrnGrad stop:nth-child(1){ stop-color: var(--brand); }
#jrnGrad stop:nth-child(2){ stop-color: var(--brand-2); }
#jrnGrad stop:nth-child(3){ stop-color: var(--brand); }