/* Sharetru · Landing page header (2026). Tokens from the theme; nothing here is a brand constant. */
/* HubSpot wraps the module in a div exactly as tall as the header, which would pin a sticky
   header inside it. Make that wrapper the sticky element instead (same fix as the site header). */
.hs_cos_wrapper:has(> .lp26h), [data-global-resource-path]:has(.lp26h) { position: sticky; top: 0; z-index: 1000; }

.lp26h {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 1rem 1.5rem;
  padding: 0.75rem var(--st-inline);
  font-family: var(--st-font); color: var(--st-ink);
  border-top: 3px solid var(--st-royal); border-bottom: 1px solid var(--st-line);
  background: color-mix(in srgb, var(--st-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.lp26h__logo { display: inline-flex; align-items: center; flex: none; margin: 0; color: inherit; text-decoration: none; }
.lp26h__logo svg { height: 24px; width: auto; display: block; }
.lp26h__logo svg .lw { fill: var(--st-ink); }
.lp26h__logo svg .ls { fill: var(--st-royal); }
:root[data-theme="dark"] .lp26h__logo svg .ls { fill: var(--st-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp26h__logo svg .ls { fill: var(--st-ink); } }
.lp26h__logo img { height: 24px; width: auto; display: block; }
.lp26h__trust {
  flex: 1 1 auto; margin: 0; text-align: center;
  font-size: var(--st-fs-fine); font-weight: 600; letter-spacing: 0.01em; color: var(--st-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp26h__cta { margin-left: auto; flex: none; }
/* Scroll progress line (show_progress): sits on the header's 3 px top border and fills left to
   right with page scroll. Browsers with scroll-driven animations drive it from the root scroller
   with no script; module.js sets --lp26h-progress for the rest. It tracks the visitor's own
   scrolling, so it stays on under reduced motion (a position indicator, not an animation). */
.lp26h__progress {
  position: absolute; left: 0; top: -3px; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--lp26h-progress, 0));
  background: linear-gradient(90deg, var(--st-royal), var(--st-green));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .lp26h__progress { animation: lp26h-progress linear both; animation-timeline: scroll(root); transform: scaleX(0); }
  @keyframes lp26h-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media print { .lp26h__progress { display: none; } }

.lp26h-skip { position: absolute; left: -9999px; top: 0; z-index: 1001; display: inline-flex; align-items: center; min-height: 44px; background: var(--st-midnight); color: var(--st-white); padding: 10px 16px; text-decoration: none; font: 700 0.9375rem/1.2 var(--st-font); }
.lp26h-skip:focus { left: 16px; top: 16px; }

@media (max-width: 767px) {
  .lp26h { padding-block: 0.625rem; }
  .lp26h__trust { display: none; }
  .lp26h__cta { padding-inline: 1rem; font-size: 0.875rem; }
}