@import url("/theme.css?v=5.1.2-motion-20260927-r2");
/* Template utilities only; reference styling lives in _ploy_static/_astro. */

/* Croworder wordmark. The original Ploy SVG is replaced in the static markup
   with a real local image so the brand keeps its proportions at every size. */
:is([data-el="ploy-logo"], .nav__desktop-logo) {
  position: relative !important;
  width: 130px !important;
  height: 30px !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center;
  color: transparent !important;
  font-size: 0 !important;
}
:is([data-el="ploy-logo"], .nav__desktop-logo)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: url("/assets/croworder-logo.svg") center / contain no-repeat;
  pointer-events: none;
}
:is([data-el="ploy-logo"], .nav__desktop-logo) > :not(.croworder-wordmark) {
  display: none !important;
}
:is([data-el="ploy-logo"], .nav__desktop-logo) img {
  position: relative;
  z-index: 2;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
[theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo),
[data-theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo) {
  color: #ffffff;
}
[theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo) img,
[data-theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo) img {
  content: url("/assets/croworder-logo-light.svg");
}
[theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo)::before,
[data-theme="dark"] :is([data-el="ploy-logo"], .nav__desktop-logo)::before {
  background-image: url("/assets/croworder-logo-light.svg");
}
@media (max-width: 540px) {
  [data-el="ploy-logo"] {
    width: 94px !important;
    height: 26px !important;
  }
}

/* Keep the reference's animated geometry and timing. These selectors only
   tint existing surfaces that are driven by the original CSS variables. */
#v5-demo-dialog { border: 0; border-radius: 22px; padding: 32px; width: min(620px, calc(100% - 32px)); max-height: 85dvh; margin: auto; color: #090b10; background: #ffffff; font: 16px/1.6 Arial, sans-serif; box-shadow: 0 24px 100px #06152c33; }
#v5-demo-dialog::backdrop { background: #06152c99; backdrop-filter: blur(8px); }
#v5-demo-dialog h2 { font: 600 28px/1.2 Arial, sans-serif; padding-right: 28px; margin: 0 0 20px; }
#v5-demo-dialog video { width: 100%; border-radius: 12px; }
#v5-demo-dialog p { margin-top: 16px; }
.v5-close { position: absolute; right: 16px; top: 10px; font: 32px/1 Arial; cursor: pointer; border: 0; background: transparent; padding: 8px; }
#v5-catalog-link { position: fixed; z-index: 9999; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: 30px; color: white; background: #06152ce8; border: 1px solid #ffffff40; font: 12px/1.3 Arial, sans-serif; text-decoration: none; box-shadow: 0 4px 20px #06152c33; }
:focus-visible { outline: 3px solid #58a6ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }


/* CROWORDER wordmark system — reuses the site's own typography. */
.croworder-nav-brand {
  width: 176px !important;
  min-width: 176px !important;
  height: 32px !important;
  margin-right: 30px !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
[data-el="ploy-logo"].croworder-nav-brand {
  width: 126px !important;
  min-width: 126px !important;
  height: 28px !important;
  margin-right: 0 !important;
}
.croworder-wordmark-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  width: max-content;
  color: #090b10;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .9;
  text-transform: uppercase;
  white-space: nowrap;
}
.croworder-wordmark-letter {
  display: inline-block;
  transform-origin: bottom left;
  color: inherit;
  transition: color .4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform, color;
}
.croworder-wordmark--nav { font-size: 22px; }
.croworder-wordmark--card { font-size: 16px; letter-spacing: -0.045em; }
.croworder-wordmark--badge { font-size: 18px; letter-spacing: -0.045em; }
.croworder-wordmark--inline { font-size: 17px; }
.croworder-wordmark--stage,
.croworder-wordmark--footer {
  font-family: inherit;
  font-size: clamp(72px, 10vw, 176px);
  font-weight: 900;
  letter-spacing: -0.07em;
  justify-content: center;
  width: 100%;
}
.croworder-wordmark--footer {
  color: #fff;
  font-size: clamp(64px, 9vw, 150px);
}
.croworder-large-brand-host {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.croworder-large-brand-host > .croworder-wordmark-text {
  position: relative;
  z-index: 2;
  margin: auto;
}
.croworder-card-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #115fce;
  color: #fff;
  font: 800 11px/1 inherit;
}

/* Contrast policy: dark/blue surfaces use white type; nested light cards reset to dark. */
.croworder-dark-surface { color: #fff !important; }
.croworder-dark-surface :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small) {
  color: inherit !important;
}
.croworder-dark-surface svg:not(.lucide) path[fill] { fill: currentColor !important; }
.croworder-dark-surface svg path[stroke] { stroke: currentColor !important; }
.croworder-dark-surface .croworder-light-surface {
  color: #090b10 !important;
}
.croworder-dark-surface .croworder-light-surface :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small) {
  color: inherit !important;
}
.croworder-dark-surface .croworder-light-surface svg:not(.lucide) path[fill] { fill: currentColor !important; }
.croworder-dark-surface .croworder-light-surface svg path[stroke] { stroke: currentColor !important; }

@media (max-width: 959px) {
  [data-el="ploy-logo"].croworder-nav-brand {
    width: 112px !important;
    min-width: 112px !important;
    height: 26px !important;
  }
  .croworder-wordmark--nav { font-size: 18px; }
}
@media (max-width: 540px) {
  [data-el="ploy-logo"].croworder-nav-brand {
    width: 104px !important;
    min-width: 104px !important;
    height: 24px !important;
  }
  .croworder-wordmark--nav { font-size: 17px; }
  .croworder-wordmark--stage { font-size: clamp(54px, 16vw, 92px); }
}

/* Let the text wordmark fully replace the legacy image/background logo. */
[data-el="ploy-logo"].croworder-nav-brand::before { display: none !important; }
[data-el="ploy-logo"].croworder-nav-brand > .croworder-wordmark-text {
  display: inline-flex !important;
  position: relative !important;
  z-index: 3 !important;
}
[data-el="ploy-logo"].croworder-nav-brand > img.croworder-wordmark { display: none !important; }


/* V5.1 hard visual rules — robust even before/after Astro hydration. */

/* Header: name only, larger, no symbol artwork. */
.nav__desktop-logo,
[data-el="ploy-logo"] {
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
}
.nav__desktop-logo::before,
[data-el="ploy-logo"]::before {
  display: none !important;
  content: none !important;
}
.nav__desktop-logo > img,
[data-el="ploy-logo"] > img {
  display: none !important;
}
.nav__desktop-logo .croworder-wordmark-text,
[data-el="ploy-logo"] .croworder-wordmark-text {
  display: inline-flex !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  letter-spacing: -0.06em !important;
  color: #090b10 !important;
}

/* Shared animated wordmarks inside engine/service cards. */
.croworder-engine-wordmark,
[data-el="card"] .croworder-wordmark--shared,
[data-el="notebook-card"] .croworder-wordmark--shared {
  font-size: 18px !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
  color: #090b10 !important;
}

/* Large branded composition replaces the old PLOY balloon scene cleanly. */
.croworder-stage-brand-host {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 1180px !important;
  height: clamp(360px, 52vw, 680px) !important;
  margin: 0 auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.croworder-stage-brand-host .croworder-wordmark--stage {
  font-size: clamp(72px, 11vw, 174px) !important;
  color: #090b10 !important;
}
.croworder-footer-brand-host {
  min-height: clamp(180px, 24vw, 360px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Blue / navy / dark surfaces always use white text. */
.bg-ploy-brand-blue:not(.bg-ploy-brand-blue-light),
.bg-ploy-background-accent-primary,
.bg-ploy-background-accent-secondary,
.bg-ploy-background-inverse,
.bg-ploy-button-primary-background,
.bg-ploy-surface-dark {
  color: #ffffff !important;
}
.bg-ploy-brand-blue:not(.bg-ploy-brand-blue-light)
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small),
.bg-ploy-background-accent-primary
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small),
.bg-ploy-background-accent-secondary
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small),
.bg-ploy-background-inverse
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small),
.bg-ploy-button-primary-background
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small),
.bg-ploy-surface-dark
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small) {
  color: #ffffff !important;
}

/* Light cards nested inside dark surfaces return to dark type. */
:is(
  .bg-ploy-brand-blue:not(.bg-ploy-brand-blue-light),
  .bg-ploy-background-accent-primary,
  .bg-ploy-background-accent-secondary,
  .bg-ploy-background-inverse,
  .bg-ploy-button-primary-background,
  .bg-ploy-surface-dark
) :is(
  .bg-ploy-background-secondary,
  .bg-ploy-neutral-primary,
  .bg-ploy-brand-blue-light,
  .croworder-light-surface
) {
  color: #090b10 !important;
}
:is(
  .bg-ploy-brand-blue:not(.bg-ploy-brand-blue-light),
  .bg-ploy-background-accent-primary,
  .bg-ploy-background-accent-secondary,
  .bg-ploy-background-inverse,
  .bg-ploy-button-primary-background,
  .bg-ploy-surface-dark
) :is(
  .bg-ploy-background-secondary,
  .bg-ploy-neutral-primary,
  .bg-ploy-brand-blue-light,
  .croworder-light-surface
) :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small) {
  color: #090b10 !important;
}

/* Slight rounding for previously square editorial panels. */
.rounded-sm,
[data-el="faq-item"],
[data-el="card"],
[data-el="notebook-card"] {
  border-radius: 12px !important;
}
[class*="bg-ploy-brand-blue"][class*="border"],
[class*="bg-ploy-background-accent"][class*="border"] {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Keep primary CTA readable on blue surfaces. */
.bg-ploy-brand-blue:not(.bg-ploy-brand-blue-light) .bg-ploy-button-primary-background,
.bg-ploy-background-accent-primary .bg-ploy-button-primary-background,
.bg-ploy-background-accent-secondary .bg-ploy-button-primary-background {
  color: #ffffff !important;
}

/* Make the wordmark responsive without reintroducing the symbol. */
@media (max-width: 959px) {
  .nav__desktop-logo .croworder-wordmark-text,
  [data-el="ploy-logo"] .croworder-wordmark-text {
    font-size: 21px !important;
  }
}
@media (max-width: 540px) {
  [data-el="ploy-logo"] {
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
  }
  [data-el="ploy-logo"] .croworder-wordmark-text {
    font-size: 19px !important;
  }
}


/* Refinements from visual review 2026-09-25. */

/* Give the CROWORDER wordmark more presence in the floating navigation. */
.nav__desktop-menu {
  min-height: 56px !important;
  padding-left: 28px !important;
  padding-right: 24px !important;
}
.nav__desktop-logo {
  margin-right: 42px !important;
}
.nav__desktop-logo .croworder-wordmark-text,
[data-el="ploy-logo"] .croworder-wordmark-text {
  font-size: 29px !important;
  font-weight: 900 !important;
  letter-spacing: -0.065em !important;
}
[data-el="ploy-logo"] {
  min-width: 142px !important;
  justify-content: center !important;
}

/* The original footer art disabled pointer events. Re-enable them for the new animated wordmark. */
.footer__balloon.croworder-footer-brand-host,
.croworder-footer-brand-host,
.croworder-footer-brand-host .croworder-wordmark-text,
.croworder-wordmark--footer {
  pointer-events: auto !important;
  cursor: default;
}
.croworder-wordmark--footer {
  user-select: none;
}

/* Engine/process card header spacing. */
[data-el="card"] .croworder-wordmark--shared {
  flex: 0 0 auto;
  margin-right: 2px;
}
[data-el="card"] .croworder-wordmark--shared + span,
[data-el="card"] .croworder-engine-wordmark + span {
  flex: 0 0 auto;
}

/* Active punch/accordion cards are dark blue even when no bg utility class is present. */
[data-el="faq-item"][data-accordion-status="active"],
[data-el="faq-item"][data-default-open="true"] {
  color: #ffffff !important;
}
[data-el="faq-item"][data-accordion-status="active"]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button),
[data-el="faq-item"][data-default-open="true"]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button) {
  color: #ffffff !important;
}
[data-el="faq-item"][data-accordion-status="active"] .bg-ploy-text-primary,
[data-el="faq-item"][data-default-open="true"] .bg-ploy-text-primary {
  background-color: #ffffff !important;
}
[data-el="faq-item"][data-accordion-status="active"] svg path,
[data-el="faq-item"][data-default-open="true"] svg path {
  stroke: currentColor !important;
}

/* Slightly softer corners across editorial cards/panels. */
[data-el="faq-item"],
[data-el="card"],
[data-el="notebook-card"],
.rounded-sm {
  border-radius: 14px !important;
}

/* Avoid cramped pill+brand rows on narrower desktop widths. */
@media (max-width: 1180px) and (min-width: 960px) {
  .nav__desktop-logo .croworder-wordmark-text {
    font-size: 26px !important;
  }
  .nav__desktop-logo {
    margin-right: 32px !important;
  }
}
@media (max-width: 959px) {
  [data-el="ploy-logo"] {
    min-width: 126px !important;
  }
  [data-el="ploy-logo"] .croworder-wordmark-text {
    font-size: 22px !important;
  }
}


/* =========================================================
   CROWORDER GLOBAL CONTRAST SYSTEM
   Rule: light surface = dark type; dark surface = light type.
   The runtime also calculates real rendered luminance and sets
   data-crow-surface-tone="light|dark" on dynamic surfaces.
   ========================================================= */

/* First-paint deterministic surfaces */
:is(
  .bg-ploy-background-primary,
  .bg-ploy-background-secondary,
  .bg-ploy-neutral-primary,
  .bg-ploy-neutral-primary-100,
  .bg-ploy-brand-blue-light,
  .bg-ploy-brand-pink,
  .bg-ploy-brand-green,
  .bg-ploy-brand-green-bright,
  .bg-ploy-brand-yellow,
  .bg-ploy-background-accent-tertiary,
  .bg-white
) {
  color: #090b10 !important;
}

:is(
  .bg-ploy-background-accent-primary,
  .bg-ploy-background-accent-secondary,
  .bg-ploy-brand-blue,
  .bg-ploy-button-primary-background,
  .bg-black
) {
  color: #ffffff !important;
}

/* Actual rendered luminance always wins. */
[data-crow-surface-tone="light"] {
  color: #090b10 !important;
  --crow-surface-fg: #090b10;
  --crow-surface-muted: rgba(9, 11, 16, 0.72);
  --crow-surface-border: rgba(9, 11, 16, 0.12);
}
[data-crow-surface-tone="dark"] {
  color: #ffffff !important;
  --crow-surface-fg: #ffffff;
  --crow-surface-muted: rgba(255, 255, 255, 0.82);
  --crow-surface-border: rgba(255, 255, 255, 0.20);
}

/* Explicit text utilities from the reference inherit from the nearest surface.
   Because nested surfaces define their own color, this remains composable. */
[data-crow-surface-tone]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,strong,small,em) {
  color: inherit !important;
}

/* Punch-card / accordion fallback before JS computes luminance. */
[data-el="faq-item"][data-accordion-status="not-active"] {
  color: #090b10 !important;
}
[data-el="faq-item"][data-accordion-status="not-active"]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button) {
  color: inherit !important;
}

/* Blue accent is genuinely dark in the CROWORDER palette (#1768d8). */
[data-el="faq-item"][data-accordion-status="active"][data-crow-accent="blue"] {
  color: #ffffff !important;
}
[data-el="faq-item"][data-accordion-status="active"][data-crow-accent="blue"]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button) {
  color: inherit !important;
}

/* Pink / green / yellow active surfaces are light in the CROWORDER palette. */
[data-el="faq-item"][data-accordion-status="active"]:is(
  [data-crow-accent="pink"],
  [data-crow-accent="green"],
  [data-crow-accent="green-bright"],
  [data-crow-accent="yellow"]
) {
  color: #090b10 !important;
}
[data-el="faq-item"][data-accordion-status="active"]:is(
  [data-crow-accent="pink"],
  [data-crow-accent="green"],
  [data-crow-accent="green-bright"],
  [data-crow-accent="yellow"]
) :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button) {
  color: inherit !important;
}

/* Dot / divider colors follow the card foreground automatically. */
[data-el="faq-item"] .c_punchcard_dot,
[data-el="faq-item"] .bg-ploy-text-primary {
  background-color: currentColor !important;
}
[data-el="faq-item"] .c_faqitem_stroke {
  background-color: color-mix(in srgb, currentColor 18%, transparent) !important;
}

/* CTA surfaces are nested surfaces and keep their own contrast. */
.bg-ploy-button-primary-background,
.bg-ploy-button-primary-background
  :is(span,strong,small) {
  color: #ffffff !important;
}

/* Muted copy uses the correct foreground family rather than a fixed black/white. */
[data-crow-surface-tone="light"] :is(p,li) {
  --crow-copy-color: rgba(9, 11, 16, 0.76);
}
[data-crow-surface-tone="dark"] :is(p,li) {
  --crow-copy-color: rgba(255, 255, 255, 0.86);
}

/* Never let the historical default-open attribute force white after a card closes. */
[data-el="faq-item"][data-default-open="true"][data-accordion-status="not-active"],
[data-el="faq-item"][data-default-open="true"][data-accordion-status="not-active"]
  :is(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,small,button) {
  color: #090b10 !important;
}


/* =========================================================
   CROWORDER SERVICE HERO FILMS
   Home is intentionally excluded and will get a dedicated film later.
   ========================================================= */
.croworder-video-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #07111f !important;
  color: #fff !important;
}
.croworder-hero-film {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #07111f;
  pointer-events: none;
}
.croworder-hero-film__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .65s ease, transform 8s ease-out;
}
.croworder-video-hero--ready .croworder-hero-film__video {
  opacity: 1;
  transform: scale(1);
}
.croworder-hero-film__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,10,22,.78) 0%, rgba(3,10,22,.57) 45%, rgba(3,10,22,.42) 100%),
    linear-gradient(180deg, rgba(3,10,22,.18) 0%, rgba(3,10,22,.20) 55%, rgba(3,10,22,.48) 100%);
}

/* Feature/service centered heroes become cinematic full-width stages. */
.centered-hero.croworder-video-hero {
  min-height: min(760px, 82svh);
  display: flex;
  align-items: center;
  padding-top: 164px !important;
  padding-bottom: 116px !important;
}
.centered-hero.croworder-video-hero .centered-hero__inner {
  width: 100%;
}
.centered-hero.croworder-video-hero
  :is(.centered-hero__title,.centered-hero__description,.centered-hero__subheading) {
  color: #fff !important;
}
.centered-hero.croworder-video-hero .centered-hero__description {
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 1px 18px rgba(0,0,0,.25);
}
.centered-hero.croworder-video-hero .centered-hero__title {
  text-shadow: 0 2px 28px rgba(0,0,0,.22);
}

/* Sites / Landing / Redesign template hero. */
.lp-hero.croworder-video-hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.lp-hero.croworder-video-hero .lp-hero__inner {
  width: 100%;
}
.lp-hero.croworder-video-hero
  :is(.lp-hero__title,.lp-hero__description,.lp-hero__bullet) {
  color: #fff !important;
}
.lp-hero.croworder-video-hero .lp-hero__description,
.lp-hero.croworder-video-hero .lp-hero__bullet {
  color: rgba(255,255,255,.86) !important;
}
.lp-hero.croworder-video-hero .lp-hero__bullet svg {
  color: #fff !important;
}

/* The brief panel remains a light nested surface for readability. */
.lp-hero.croworder-video-hero .lp-signup-panel {
  color: #090b10 !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.48) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.lp-hero.croworder-video-hero .lp-signup-panel
  :is(h1,h2,h3,h4,p,span,a,li,strong,small,label) {
  color: inherit !important;
}

/* Keep films cinematic on mobile without making the page excessively tall. */
@media (max-width: 959px) {
  .centered-hero.croworder-video-hero {
    min-height: 680px;
    padding-top: 138px !important;
    padding-bottom: 90px !important;
  }
  .lp-hero.croworder-video-hero {
    min-height: 0;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .croworder-hero-film__overlay {
    background:
      linear-gradient(180deg, rgba(3,10,22,.68) 0%, rgba(3,10,22,.54) 46%, rgba(3,10,22,.72) 100%);
  }
}
@media (max-width: 540px) {
  .centered-hero.croworder-video-hero {
    min-height: 610px;
    padding-top: 120px !important;
    padding-bottom: 72px !important;
  }
  .lp-hero.croworder-video-hero {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}


/* Per-film contrast calibration from sampled video luminance. */
.croworder-video-hero {
  --crow-hero-overlay: .5;
  --crow-hero-text: #fff;
  --crow-hero-muted: rgba(255,255,255,.86);
}
.croworder-hero-film__overlay {
  background:
    linear-gradient(
      90deg,
      rgb(3 10 22 / calc(var(--crow-hero-overlay) + .12)) 0%,
      rgb(3 10 22 / var(--crow-hero-overlay)) 46%,
      rgb(3 10 22 / max(calc(var(--crow-hero-overlay) - .10), .16)) 100%
    ),
    linear-gradient(
      180deg,
      rgb(3 10 22 / .10) 0%,
      rgb(3 10 22 / .16) 55%,
      rgb(3 10 22 / calc(var(--crow-hero-overlay) + .04)) 100%
    ) !important;
}
.croworder-video-hero
  :is(h1,h2,h3,h4,h5,h6,.centered-hero__title,.lp-hero__title) {
  color: var(--crow-hero-text) !important;
}
.croworder-video-hero
  :is(p,li,.centered-hero__description,.lp-hero__description,.lp-hero__bullet) {
  color: var(--crow-hero-muted) !important;
}
.croworder-video-hero :is(a,button) {
  text-shadow: none;
}


/* =========================================================
   HERO FILM VISIBILITY + CONSISTENT LP NAV
   ========================================================= */

/* Generated service film must sit ABOVE the section background and BELOW copy. */
.croworder-video-hero {
  background: #07111f !important;
}
.croworder-video-hero > .croworder-hero-film {
  z-index: 0 !important;
}
.croworder-video-hero > :not(.croworder-hero-film) {
  position: relative;
  z-index: 2;
}
.croworder-hero-film__overlay {
  z-index: 1;
}
.croworder-hero-film__video {
  position: relative;
  z-index: 0;
}

/* The previous static visual is redundant once the cinematic film is mounted. */
.lp-hero.croworder-video-hero .lp-hero__visual {
  display: none !important;
}
.lp-hero.croworder-video-hero .lp-hero__copy {
  grid-row: 1 / span 2 !important;
  align-self: center;
}

/* Keep the light brief card clearly above the film. */
.lp-hero.croworder-video-hero .lp-hero__form-wrap {
  position: relative;
  z-index: 4 !important;
}

/* Shared menu for Sites / Landing / Redesign pages. */
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
}
.lp-topbar__nav-shell {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-services-menu {
  position: relative;
}
.lp-services-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #090b10;
  padding: 12px 2px;
}
.lp-services-menu > summary::-webkit-details-marker {
  display: none;
}
.lp-services-menu > summary::after {
  content: "↓";
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  transform: translateY(-1px);
  transition: transform .2s ease;
}
.lp-services-menu[open] > summary::after {
  transform: translateY(-1px) rotate(180deg);
}
.lp-services-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  width: 280px;
  padding: 10px;
  border: 1px solid rgba(9,11,16,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lp-services-menu__link {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: #090b10 !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.lp-services-menu__link:hover,
.lp-services-menu__link:focus-visible {
  background: rgba(17,95,206,.08);
}
@media (max-width: 760px) {
  .lp-topbar__nav-shell {
    gap: 14px;
  }
  .lp-services-menu > summary {
    font-size: 13px;
  }
  .lp-services-menu__panel {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 72px;
    width: auto;
  }
}
@media (max-width: 520px) {
  .lp-topbar__nav-shell {
    gap: 10px;
  }
  .lp-services-menu > summary {
    padding-inline: 0;
  }
}


/* =========================================================
   NATIVE SERVICE HERO FILMS — FINAL
   ========================================================= */
.croworder-native-video-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #07111f !important;
  color: #ffffff !important;
}
.croworder-native-hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #07111f;
  pointer-events: none;
}
.croworder-native-hero-film__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.croworder-native-hero-film__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,10,22,.68) 0%, rgba(3,10,22,.48) 50%, rgba(3,10,22,.34) 100%),
    linear-gradient(180deg, rgba(3,10,22,.10) 0%, rgba(3,10,22,.12) 55%, rgba(3,10,22,.42) 100%);
}
.croworder-native-video-hero > :not(.croworder-native-hero-film) {
  position: relative;
  z-index: 2;
}
.centered-hero.croworder-native-video-hero {
  min-height: min(760px, 82svh);
  display: flex;
  align-items: center;
  padding-top: 164px !important;
  padding-bottom: 116px !important;
}
.lp-hero.croworder-native-video-hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.croworder-native-video-hero
  :is(.centered-hero__title,.centered-hero__description,.centered-hero__subheading,
      .lp-hero__title,.lp-hero__description,.lp-hero__bullet) {
  color: #ffffff !important;
}
.croworder-native-video-hero
  :is(.centered-hero__description,.lp-hero__description,.lp-hero__bullet) {
  color: rgba(255,255,255,.86) !important;
}
.lp-hero.croworder-native-video-hero .lp-signup-panel {
  color: #090b10 !important;
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.48) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.lp-hero.croworder-native-video-hero .lp-signup-panel
  :is(h1,h2,h3,h4,p,span,a,li,strong,small,label) {
  color: inherit !important;
}
.lp-hero.croworder-native-video-hero .lp-signup-panel
  :is(.bg-ploy-button-primary-background, a.bg-ploy-button-primary-background, button.bg-ploy-button-primary-background),
.lp-hero.croworder-native-video-hero .lp-signup-panel
  :is(.bg-ploy-button-primary-background, a.bg-ploy-button-primary-background, button.bg-ploy-button-primary-background) * {
  color: #ffffff !important;
}

/* Any blue pill / button anywhere on LP pages uses white text. */
.lp-topbar .bg-ploy-brand-blue,
.lp-topbar .bg-ploy-brand-blue *,
.lp-hero .bg-ploy-brand-blue,
.lp-hero .bg-ploy-brand-blue *,
.lp-value .bg-ploy-brand-blue,
.lp-value .bg-ploy-brand-blue *,
.lp-footer .bg-ploy-brand-blue,
.lp-footer .bg-ploy-brand-blue * {
  color: #ffffff !important;
}

/* Full LP footer is intentionally blue with light text. */
.lp-footer,
.lp-footer :is(h1,h2,h3,h4,h5,h6,p,span,a,strong,small) {
  color: #ffffff !important;
}
.lp-footer__cta,
.lp-footer__cta * {
  color: #090b10 !important;
}

/* Complete services menu stays visible on LP topbar. */
.lp-topbar__nav-shell {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}
.lp-services-menu {
  display: block !important;
  position: relative !important;
}
.lp-services-menu > summary {
  display: inline-flex !important;
  align-items: center !important;
  color: #090b10 !important;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 2px;
}
.lp-services-menu > summary::-webkit-details-marker { display: none; }
.lp-services-menu > summary::after {
  content: "↓";
  margin-left: 7px;
  font-size: 11px;
  transition: transform .2s ease;
}
.lp-services-menu[open] > summary::after { transform: rotate(180deg); }
.lp-services-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  width: 280px;
  padding: 10px;
  border: 1px solid rgba(9,11,16,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lp-services-menu__link {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: #090b10 !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.lp-services-menu__link:hover,
.lp-services-menu__link:focus-visible {
  background: rgba(17,95,206,.08);
}
@media (max-width: 959px) {
  .centered-hero.croworder-native-video-hero {
    min-height: 680px;
    padding-top: 138px !important;
    padding-bottom: 90px !important;
  }
  .lp-hero.croworder-native-video-hero {
    min-height: 0;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
@media (max-width: 760px) {
  .lp-topbar__nav-shell { gap: 14px !important; }
  .lp-services-menu__panel {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 72px;
    width: auto;
  }
}

/* preview-trigger: native-service-heroes-final */


/* =========================================================
   FINAL SERVICE PAGE NORMALIZATION
   All service routes use one hero/nav/footer system.
   ========================================================= */

/* If any legacy runtime injector races with the native hero, native always wins. */
.croworder-native-video-hero > .croworder-hero-film,
.croworder-native-video-hero .croworder-hero-film {
  display: none !important;
}

/* One consistent full-bleed service hero across every route. */
.centered-hero.croworder-native-video-hero {
  min-height: clamp(660px, 82svh, 820px) !important;
  padding-top: 156px !important;
  padding-bottom: 108px !important;
}
.centered-hero.croworder-native-video-hero .centered-hero__inner {
  width: min(100%, 1320px) !important;
  margin-inline: auto !important;
}
.centered-hero.croworder-native-video-hero .centered-hero__title {
  max-width: 1180px;
  margin-inline: auto;
}
.centered-hero.croworder-native-video-hero .centered-hero__description {
  max-width: 720px !important;
  margin-inline: auto;
}

/* Shared navbar stays identical on every service route. */
.croworder-native-video-hero ~ * .nav,
.nav {
  font-family: inherit;
}

/* Remove legacy LP-only hero remnants if old markup ever survives hydration. */
.lp-hero__form-wrap,
.lp-signup-panel,
.lp-hero__visual {
  /* These are no longer part of the public LP composition. */
}
[data-el^="lp-"][data-el$="-hero"].centered-hero .lp-signup-panel,
[data-el^="lp-"][data-el$="-hero"].centered-hero .lp-hero__visual {
  display: none !important;
}

@media (max-width: 959px) {
  .centered-hero.croworder-native-video-hero {
    min-height: 660px !important;
    padding-top: 132px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 540px) {
  .centered-hero.croworder-native-video-hero {
    min-height: 590px !important;
    padding-top: 112px !important;
    padding-bottom: 64px !important;
  }
}


/* Final media rule: only the native service-hero film may render. */
.croworder-hero-film {
  display: none !important;
}
.croworder-native-hero-film {
  display: block !important;
}