/* Site-level CSS added after the Webflow bundle. Webflow's stylesheet is
   generated and must stay untouched, so anything the replatform adds to the
   shared chrome lives here. Linked into every page by generate_pages.mjs. */

/* Full-height sections that are not the first on the page.
 *
 * The header is pinned and opaque once the page is scrolled — banner plus the
 * navbar's solid surface, and the breadcrumb strip where there is one. A
 * section built to be exactly one viewport tall centres its content on the
 * whole viewport, so that top slice of it ends up behind the header. Heroes
 * are exempt by design: chrome floating over the first section is intentional,
 * and none of these classes ever appears there.
 *
 * The inset is a transparent top border rather than padding, for two reasons.
 * box-sizing is border-box site-wide, so the border comes out of the declared
 * 100vh instead of adding to it — the panes keep their exact height, their
 * top:0, and every sticky and scroll-trigger point they already had. And it
 * composes: these panes carry their own padding-top at mobile, which still
 * applies on top of it. Backgrounds are painted to the border box, so gradient
 * bands still fill the full height; only the content moves down.
 *
 * --header-h comes from nav-scroll.js and already tracks the breakpoint and
 * whether a breadcrumb strip is present. The 0px fallback makes this a no-op
 * if that script never runs, and it resolves to the bare nav height once the
 * announcement banner is deleted. */
@media (min-width: 768px) {
  .sticky-rail-content,
  .sticky-rail-overlay,
  .sticky-rail-short,
  .height-regular,
  .section ~ .section.is-full-height {
    border-top: var(--header-h, 0px) solid transparent;
  }
}

/* Phones restack these stories: the rails drop to half height and the mockup
   moves above the copy, so most panes size to their content and need nothing.
   Only the two below are still a full viewport tall.
 *
 * .sticky-rail-overlay already reserves top padding at mobile — 100px, 120px,
 * 140px or 160px depending on the variant, each set at a specificity that
 * outranks anything reasonable we could write. Those are this design's own
 * header clearance, drawn against a ~100px nav-and-breadcrumb strip. So rather
 * than fight per variant, add only the difference: whatever our header costs
 * beyond the 100px already accounted for. Clamped at zero, so when the
 * announcement banner is deleted and --header-h drops back to the bare nav,
 * this contributes nothing and each variant's own padding governs again. */
@media (max-width: 767px) {
  .sticky-rail-overlay {
    border-top-width: max(0px, calc(var(--header-h, 100px) - 100px));
    border-top-style: solid;
    border-top-color: transparent;
  }
  /* The mockup rail has to move by the same amount as the copy rail. They are
     separate stickies sharing one screen, and the copy is inset by its own
     padding above — inset one without the other and the copy slides straight
     down into the mockup. These reserve nothing of their own, so they take the
     full header. */
  .sticky-rail-content {
    border-top: var(--header-h, 0px) solid transparent;
  }

  /* The big mockups in these stories are height:100% of their pane, so they
     already shrink with it — but the step copy is a separate overlay that
     moves on its own, and on a phone the two pass close enough that the
     graphic crowds the second line. Give the copy its clearance back by
     taking the same amount off the graphic: whatever our header costs beyond
     the 100px this design already reserved. Same clamp as above, so it comes
     to nothing once the announcement banner is gone. */
  .sticky-phone-solo,
  .home-scrolling-content {
    max-height: calc(100% - max(0px, calc(var(--header-h, 100px) - 100px)));
  }
}

/* Homepage hero top spacing on collapsed-nav widths (client, round 3 wrap-up).
 *
 * The hero stacks .padding-top---nav (which exactly clears the fixed header)
 * with its own .padding-y---m.padding-y-mob---xl — a further ~56-59px before
 * the video card. That rhythm predates the announcement banner; with ~50px
 * of extra chrome above, the page opens on a third of a screen of cream.
 * Bring the hero's own share down to the 32px the reworked solutions and
 * compare heroes use, so the whole site opens with the same cadence.
 *
 * Scoped by the homepage's Webflow page id — the same padding classes pace
 * sections on nearly every migrated page (news posts, creator pages), and
 * those keep their rhythm. The id comes from the frozen snapshot, so it is
 * stable. Desktop (>991px) is untouched. */
@media (max-width: 991px) {
  html[data-wf-page="65e1317cf73c2995b3c67ac0"] .padding-top---nav > .padding-y---m.padding-y-mob---xl {
    padding-top: 32px;
  }
}

/* Collapsed nav gutters.
 *
 * Below 991px the navbar renders two logos and two hamburgers on top of each
 * other: the desktop row's pair plus the mobile row's pair, the latter living
 * inside Webflow's ._w-nav-overlay. Every one of them is positioned by its
 * own hardcoded offset rather than by the navbar's gutters — .brand-link by a
 * 25px margin, .mobile-nav-logo by left:25px, and each hamburger by whatever
 * its padded 60px tap target lands on. On the live site those offsets happened
 * to coincide, so the duplicates overlapped and the pair read as one; move one
 * of each and they separate visibly.
 *
 * So all four are pinned to the same line, and it is the site gutter (mirroring
 * .primary-grid) — the line the banner, the breadcrumbs and the page content
 * already hold. The hamburgers are pulled out by 18px, their padding plus the
 * slack around the 24px icon, so the icon lands on the gutter rather than the
 * invisible box around it. */
@media (max-width: 991px) {
  .navbar .navbar-content.is-dropdown-menu {
    padding-left: 25px;
    padding-right: 25px;
  }
  .navbar .brand-link {
    margin-left: 25px;
  }
  .navbar .navbar-content.is-dropdown-menu .mobile-nav-logo {
    left: 25px;
  }
  /* Both selectors on purpose: the mobile row's button carries a Webflow
     margin that outranks the plain one. */
  .navbar .nav-menu-button,
  .navbar .navbar-content.is-dropdown-menu .nav-menu-button {
    margin-right: -18px;
  }
}
@media (max-width: 479px) {
  .navbar .navbar-content.is-dropdown-menu {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar .brand-link {
    margin-left: 20px;
  }
  .navbar .navbar-content.is-dropdown-menu .mobile-nav-logo {
    left: 20px;
  }
}

/* Vertical parity for the two stacked logos.
 *
 * The collapsed nav overlaps the desktop .brand-link with the overlay's
 * .mobile-nav-logo. .brand-link.is-new is pinned at top:20px, but
 * .mobile-nav-logo carries no top and flows to a 19px offset — 1px higher — so
 * opening the menu, which brings the overlay's copy to the front, nudged the
 * logo (and its tagline) up 1px. Below 480px .brand-link switches to top:19px
 * and the two already coincide, so this only applies in the range between.
 * Both share the same anchor (the announcement banner's bottom edge), so
 * pinning the overlay logo to the same top:20px lands it exactly on the
 * resting one — a flow-independent match, unlike a margin nudge, which the
 * overlay's centred flex line only half-applies. */
@media (min-width: 480px) and (max-width: 991px) {
  .navbar .navbar-content.is-dropdown-menu .mobile-nav-logo {
    top: 20px;
  }
}

/* In-page anchor landings clear the fixed header.
 *
 * The nav's mega-menu and the footer's Products column both link the product
 * families as /products#influence and so on — the only in-page anchors on the
 * site. Each of those ids sits exactly at the top of its section, so a
 * fragment jump parks that section's first pixel at y=0, which is behind the
 * banner and the navbar: the torn edge, the "PRODUCT" eyebrow and the product
 * name all land under the chrome and you have to scroll back up to read them.
 * scroll-margin-top offsets the landing so the section arrives just below the
 * header instead.
 *
 * The fallback matters as much as the value. Following one of these links is
 * a full navigation, and the browser scrolls to the fragment as soon as the
 * target parses — possibly before nav-scroll.js has published --header-h. So
 * fall back to the same height expressed in pure CSS (the banner's own
 * variable plus the 70px navbar) rather than to a bare 70px, which would land
 * the section a banner's height too high on exactly the path that matters. */
#influence,
#site,
#team,
#track,
#retail-media {
  scroll-margin-top: var(--header-h, calc(var(--etail-h, 0px) + 70px));
}

/* Footer, to the design delivered with the marketing pages: brand column with
   tagline and socials, Solutions, Company, and the comparison pills. Type and
   colour tokens are the export's own (#FBFAF8 ground, 12px uppercase heads,
   14.5px links, #57514F body, #A39C98 heads), so it reads as one piece with
   the pages it shipped alongside. */
.dc-footer {
  background: #FBFAF8;
  border-top: 1px solid #EFEBE7;
  font-family: 'Poppins', sans-serif;
}
.dc-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 40px 30px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.8fr 1fr 1.15fr;
  gap: 32px;
}
.dc-footer__brand .footer-logo {
  width: 132px;
  height: auto;
  margin-bottom: 14px;
  display: block;
}
.dc-footer__tagline {
  margin: 0 0 16px;
  font-weight: 400;
  max-width: 260px;
  font-size: 14px;
  line-height: 1.6;
  color: #8C847F;
}
.dc-footer__social {
  display: flex;
  gap: 10px;
}
.dc-footer__social .footer-social-link {
  width: 34px;
  height: 34px;
  border: 1px solid #E6DED9;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8C847F;
  transition: color .3s, border-color .3s;
}
.dc-footer__social .footer-social-link:hover {
  color: var(--primary, #E5157E);
  border-color: var(--primary, #E5157E);
}
/* The migrated social icons are 16-20px SVGs drawn for a dark footer: a
   filled shape in currentColor with the glyph knocked out in white. On this
   light ground the knockout becomes the footer's own colour. */
.dc-footer__social svg {
  width: 16px;
  height: 16px;
}
.dc-footer__social svg [fill="white"] {
  fill: #FBFAF8;
}
.dc-footer__head {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A39C98;
}
.dc-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.dc-footer__link {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #57514F;
  text-decoration: none;
  transition: color .3s;
}
.dc-footer__link:hover,
.dc-footer__link.is-current {
  color: var(--primary, #E5157E);
}
/* A listed item with no page behind it yet: muted and not a pointer, which
   is enough to read as unavailable without announcing a date. */
.dc-footer__link.is-plain {
  display: inline-flex;
  align-items: center;
  color: #A39C98;
  cursor: default;
}
.dc-footer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dc-footer__pill {
  font-size: 13px;
  font-weight: 600;
  color: #57514F;
  text-decoration: none;
  background: #fff;
  border: 1px solid #E6DED9;
  padding: 5px 11px;
  border-radius: 999px;
  transition: color .3s, border-color .3s, background-color .3s;
}
.dc-footer__pill:hover {
  color: var(--primary, #E5157E);
  border-color: #F6D2E3;
}
.dc-footer__pill.is-current {
  color: var(--primary, #E5157E);
  background: #FCEAF3;
  border-color: #F6D2E3;
}
.dc-footer__base {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 34px;
}
.dc-footer__copy {
  padding-top: 22px;
  border-top: 1px solid #EFEBE7;
  font-size: 13px;
  color: #A39C98;
}
@media (max-width: 991px) {
  .dc-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 34px 28px;
    padding: 48px 25px 24px;
  }
  .dc-footer__brand {
    grid-column: 1 / -1;
  }
  .dc-footer__base {
    padding: 0 25px 28px;
  }
}
@media (max-width: 479px) {
  .dc-footer__inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 20px;
  }
  .dc-footer__base {
    padding: 0 20px 24px;
  }
}

/* Creatable wordmark: the displayed nav/mobile logo is the brand pink #DC2185
   (matching the footer SVG), independent of the --primary token used elsewhere
   for buttons, text and backgrounds. The inline logo SVG is fill="currentColor",
   so its colour comes from CSS `color`; set that in the logo's pink states only,
   leaving the white-over-hero state white. Targeting .nav-logo (not .brand-link)
   outranks the runtime `.navbar.nav-solid .brand-link{…!important}` rule from
   nav-scroll.js and `.brand-link.text---white.text---primary` in the Webflow
   bundle, so the override wins wherever the logo is pink. */
.navbar .brand-link.text---primary .nav-logo,   /* baked pink (MarketingPage) */
.navbar.nav-solid .brand-link .nav-logo,         /* scrolled/solid (nav-scroll.js) */
.navbar .mobile-nav-logo .nav-logo {             /* mobile menu logo (always pink) */
  color: #DC2185 !important;
}