/*
 * DICHANA 2.0 public design-control layer.
 * Centralizes page rhythm and owner-controlled tokens without rewriting the
 * generated public templates.
 */
:root {
  color-scheme: light;
  --dcn-public-header-top: clamp(10px, 1.45vw, 22px);
  --dcn-public-header-height: clamp(64px, 4.85vw, 78px);
  --dcn-public-header-gap: clamp(24px, 1.6vw, 32px);
  --dcn-public-hero-start: calc(
    var(--dcn-public-header-top) + var(--dcn-public-header-height) + var(--dcn-public-header-gap)
  );
}
body {
  color: var(--site-content-text);
  background: var(--site-surface);
}
main {
  color: var(--site-content-text);
  background-color: var(--site-content-bg);
}
a:not(.btn):not([class*="button"]) {
  accent-color: var(--site-link);
}
main :where(p,li) > a:not(.btn),
main .card-link {
  color: var(--site-link);
}
main > :where(
  .page-hero,.batch2-page-hero,.batch3-page-hero,.batch4-page-hero,
  .blog-hero-v8563,.article-hero-v8563,.contact-hero-v8564,
  .standard-v8562-hero,.product-library-hero,.hero
) {
  background-color: var(--site-hero-bg);
  color: var(--site-hero-text);
}
main > :where(
  .page-hero,.batch2-page-hero,.batch3-page-hero,.batch4-page-hero,
  .blog-hero-v8563,.article-hero-v8563,.contact-hero-v8564,
  .standard-v8562-hero,.product-library-hero,.hero
) :where(h1,h2,h3,p,.lead,.breadcrumb,.breadcrumb a) {
  color: inherit;
}
:where(.section-title,.section-heading) { color: var(--site-accent); }
:where(.soft-bg,.cyan-bg,.section-soft,.section-alt) {
  background-color: var(--site-alternate-bg, var(--site-surface-alt)) !important;
}
:where(.note,.search-empty,.product-library-empty) {
  background-color: var(--site-surface-alt);
}
:where(.card,.image-card,.blog-card,.product-cms-card) {
  border-color: var(--site-border);
  background-color: var(--site-card-bg);
  color: var(--site-card-text);
}
:where(.card,.image-card,.blog-card,.product-cms-card) :where(h2,h3,p,li) {
  color: inherit;
}
:where(.cta-band,.article-cta-box,.product-cms-cta,.dichana-builder__cta) {
  background-color: var(--site-cta-bg) !important;
  color: var(--site-cta-text);
}
:where(.cta-band,.article-cta-box,.product-cms-cta,.dichana-builder__cta) :where(h2,h3,p) {
  color: inherit;
}
.site-header {
  background-color: color-mix(in srgb, var(--site-header-bg) 92%, transparent) !important;
}
body:not(.home-page) .site-header {
  position: fixed !important;
  top: var(--dcn-public-header-top) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Metrics live on a dark brand band, so they must not inherit the generic
   owner-controlled white card surface. */
.metrics-band-v8577 .metric-card-v8577 {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.site-header .brand-logo-full {
  width: min(var(--site-header-logo-width), 42vw) !important;
  padding: var(--site-logo-clear-space);
  box-sizing: content-box;
  height: auto !important;
}
.btn-primary,
button.btn-primary,
.site-managed-footer-cta,
.tester-order-button,
.growth-btn {
  background: var(--site-button-primary-bg) !important;
  color: var(--site-button-primary-text, var(--site-button-text)) !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.site-managed-footer-cta:hover,
.tester-order-button:hover,
.growth-btn:hover {
  background: var(--site-button-primary-hover-bg) !important;
  color: var(--site-button-primary-text, var(--site-button-text)) !important;
}
.btn-secondary,
button.btn-secondary,
.btn-ghost,
.btn-video-ghost,
.cookie-reject-v8591,
.cookie-manage-v8591,
.product-nav-level1-button,
.product-nav-level2-button,
.product-nav-level3-button {
  background: var(--site-button-secondary-bg) !important;
  border-color: var(--site-button-secondary-border) !important;
  color: var(--site-button-secondary-text) !important;
}
.btn-secondary:hover,
button.btn-secondary:hover,
.btn-ghost:hover,
.btn-video-ghost:hover,
.cookie-reject-v8591:hover,
.cookie-manage-v8591:hover,
.product-nav-level1-button:hover,
.product-nav-level2-button:hover,
.product-nav-level3-button:hover {
  background: var(--site-button-secondary-hover-bg) !important;
  color: var(--site-button-secondary-text) !important;
}
.btn-cyan,
button.btn-cyan,
.mobile-call-link {
  background: var(--site-button-alternate-bg) !important;
  color: var(--site-button-alternate-text) !important;
}
.btn-cyan:hover,
button.btn-cyan:hover,
.mobile-call-link:hover {
  background: var(--site-button-alternate-hover-bg) !important;
  color: var(--site-button-alternate-text) !important;
}
:where(
  .btn-primary,.btn-secondary,.btn-cyan,.btn-ghost,.btn-video-ghost,
  .site-managed-footer-cta,.tester-order-button,.growth-btn,
  .cookie-reject-v8591,.cookie-manage-v8591,.mobile-call-link,
  .product-nav-level1-button,.product-nav-level2-button,.product-nav-level3-button
):focus-visible {
  outline: 3px solid var(--site-button-focus-ring) !important;
  outline-offset: 3px;
}
.kicker,
.breadcrumb a,
.card-link {
  color: var(--site-primary) !important;
}

/* 1–2: use the full safe viewport and remove both vertical/horizontal labels. */
body.home-page .formula-fullscreen-container,
body.homepage-category-showcase-v8553 .formula-fullscreen-container {
  width: calc(100vw - clamp(20px, 2.2vw, 44px)) !important;
  max-width: 1880px !important;
}
.formula-panel .vertical-label,
.formula-panel::after {
  display: none !important;
  content: none !important;
}
.formula-showcase-frame {
  width: 100%;
}

/* 10: one viewport-based page-start contract for every public route.
   The non-matching ID in :not() is an intentional specificity lock that
   retires legacy page-family !important rules without rewriting templates. */
html body:not(.home-page):not(#dichana-public-layout-v201) :is(
  main > .page-hero,
  main > .batch2-page-hero,
  main > .blog-hero-v8563,
  main article > .article-hero-v8563,
  main > .contact-hero-v8564,
  main > .product-hero-v8560,
  main > .standard-v8562-hero,
  main > .batch3-page-hero,
  main > .batch4-page-hero,
  main > .product-library-hero,
  main > .category-page-hero-v8577,
  main > .hero
) {
  box-sizing: border-box;
  padding-top: var(--dcn-public-hero-start) !important;
  margin-top: 0 !important;
}
html body:not(.home-page):not(#dichana-public-layout-v201) :is(
  main > .page-hero,
  main > .batch2-page-hero,
  main > .blog-hero-v8563,
  main article > .article-hero-v8563,
  main > .contact-hero-v8564,
  main > .product-hero-v8560,
  main > .standard-v8562-hero,
  main > .batch3-page-hero,
  main > .batch4-page-hero,
  main > .product-library-hero,
  main > .category-page-hero-v8577,
  main > .hero
) .breadcrumb {
  margin-top: 0 !important;
}
body:not(.home-page) :where(
  .page-hero,
  .batch2-page-hero,
  .blog-hero-v8563,
  .article-hero-v8563,
  .contact-hero-v8564,
  .product-hero-v8560,
  .standard-v8562-hero,
  .batch3-page-hero,
  .batch4-page-hero,
  .product-library-hero,
  main > .hero
) > .container,
body:not(.home-page) main > section > .container {
  width: min(calc(100% - clamp(28px, 4vw, 64px)), 1240px);
  margin-inline: auto;
}

/* 11: explicitly remove only elements marked in the supplied references. */
.hero-ctas .btn-arrow,
.hero-ctas .play-dot,
.contact-form-meta-v8566,
.article-eyebrow .article-meta-chip:last-child,
.claim-verification-banner-v132,
.claim-state-v132 {
  display: none !important;
}

/* 3: numbers stay readable while the runtime animates their numeric portion. */
[data-count-target],
[data-count-display],
[data-countup] {
  font-variant-numeric: tabular-nums;
}

/* Managed or existing hero image/video: tuning always applies, including the
   "use current media" mode. Decorative media stays below readable content. */
.site-control-media-tuned {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-control-media-active > .site-managed-hero-media::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  z-index: 1;
  background: var(--sc-overlay);
  opacity: var(--sc-overlay-opacity);
  pointer-events: none;
}
/* Keep Hero controls in their absolute overlay positions. Making them relative
   adds them to the Hero flex row and consumes the content's automatic margins. */
.site-control-media-tuned > :not(
  .site-managed-hero-media,
  .hero-fullscreen-media,
  .hero-video-bg,
  .hero-video-media,
  .hero-bg-video,
  .hero-cinema-overlay,
  .hero-video-toggle,
  .hero-scroll-cue
) {
  position: relative;
  z-index: 2;
}
.site-control-media-tuned > :where(
  .hero-fullscreen-media,
  .hero-video-bg,
  .hero-video-media,
  .hero-bg-video
) {
  z-index: 0 !important;
}
.site-control-media-tuned:not(.site-control-media-active) :where(
  .hero-fullscreen-media img,
  .hero-fullscreen-media video,
  .hero-video-bg,
  .hero-video-media,
  .hero-bg-video,
  figure img,
  figure video,
  .hero-stage img,
  .hero-stage video,
  [data-site-media-target] img,
  [data-site-media-target] video
) {
  object-position: var(--sc-focus-x) var(--sc-focus-y) !important;
  filter: brightness(var(--sc-brightness)) contrast(var(--sc-contrast)) !important;
}
.site-control-media-tuned[data-site-media-current="1"] :where(
  figure,
  .hero-stage,
  [data-site-media-target]
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-control-media-tuned[data-site-media-current="1"] :where(
  figure,
  .hero-stage,
  [data-site-media-target]
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sc-overlay);
  opacity: var(--sc-overlay-opacity);
  pointer-events: none;
}
.site-control-media-tuned[data-site-media-current="1"] :where(
  figure,
  .hero-stage,
  [data-site-media-target]
) > :not(img,video,picture) {
  position: relative;
  z-index: 2;
}
.site-control-media-active > .hero-cinema-overlay {
  display: none !important;
}
.site-control-media-tuned[data-site-media-current="1"] > .hero-cinema-overlay {
  display: block !important;
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  z-index: 1;
  background: var(--sc-overlay) !important;
  opacity: var(--sc-overlay-opacity) !important;
  pointer-events: none;
}
.site-control-media-active > :where(
  .hero-fullscreen-media,
  .hero-video-bg,
  .hero-video-media,
  .hero-bg-video
) {
  display: none !important;
}
.site-managed-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sc-overlay);
  pointer-events: none;
}
.site-managed-hero-media picture,
.site-managed-hero-media img,
.site-managed-hero-media video,
.site-managed-hero-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sc-focus-x) var(--sc-focus-y);
  filter: brightness(var(--sc-brightness)) contrast(var(--sc-contrast));
  border: 0;
}
.site-control-cta-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-control-cta-media > .site-managed-hero-media {
  z-index: 0;
}
.site-control-cta-media > :not(.site-managed-hero-media) {
  position: relative;
  z-index: 2;
}

/* 4: full owner-managed footer. */
.site-managed-footer {
  position: relative;
  z-index: 5;
  padding: clamp(56px, 7vw, 92px) clamp(22px, 5vw, 80px) 28px;
  color: var(--site-footer-text);
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--site-secondary) 22%, transparent), transparent 35%),
    linear-gradient(145deg, var(--site-footer-bg), color-mix(in srgb, var(--site-footer-bg) 82%, #000));
}
.site-managed-footer-grid {
  width: min(100%, 1360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(140px, .65fr));
  gap: clamp(28px, 4vw, 64px);
}
.site-managed-footer a {
  color: inherit;
  text-decoration: none;
  opacity: .78;
}
.site-managed-footer a:hover,
.site-managed-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.site-managed-footer img {
  display: block;
  width: min(var(--site-footer-logo-width), 100%);
  height: auto;
  margin-bottom: 22px;
}
.site-managed-footer p {
  max-width: 48ch;
  color: inherit;
  opacity: .76;
  line-height: 1.8;
}
.site-managed-footer strong {
  display: block;
  margin-bottom: 16px;
  font-size: 15px;
}
.site-managed-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.site-managed-footer .site-managed-footer-cta {
  display: inline-flex;
  margin-top: 22px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--site-primary);
  color: var(--site-button-text);
  font-weight: 700;
  opacity: 1;
}
.site-managed-footer-bottom {
  width: min(100%, 1360px);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--site-footer-text) 16%, transparent);
  opacity: .62;
  font-size: 13px;
}

@media (max-width: 1120px) {
  :root {
    --dcn-public-header-top: max(10px, env(safe-area-inset-top));
    --dcn-public-header-height: 72px;
    --dcn-public-header-gap: 22px;
  }
}
@media (max-width: 900px) {
  .site-managed-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-managed-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root {
    --dcn-public-header-top: max(8px, env(safe-area-inset-top));
    --dcn-public-header-height: 64px;
    --dcn-public-header-gap: 18px;
  }
}
@media (max-width: 620px) {
  .site-managed-footer-grid { grid-template-columns: 1fr; }
  .site-managed-footer-brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  [data-count-target],
  [data-count-display],
  [data-countup] { transition: none !important; }
}

/* v2.2.3 — Public menu Hero background restoration and CI polish.
   The Site Control overlay previously reused the Hero's own ::after layer in
   "current media" mode. That covered route gradients and decorative shapes.
   Managed media keeps its overlay on the media element above; current-mode
   Heroes now retain a light brand atmosphere without reducing readability. */
.site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--site-hero-bg);
  background-image:
    radial-gradient(
      circle at 3% 58%,
      color-mix(in srgb, var(--site-primary) 24%, transparent) 0,
      transparent 31%
    ),
    radial-gradient(
      circle at 96% 7%,
      color-mix(in srgb, var(--site-secondary) 25%, transparent) 0,
      transparent 34%
    ),
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--site-hero-bg) 86%, #fff) 0%,
      color-mix(in srgb, var(--site-hero-bg) 94%, var(--site-primary)) 48%,
      color-mix(in srgb, var(--site-hero-bg) 91%, var(--site-secondary)) 100%
    ) !important;
}
.site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: clamp(-210px, -10vw, -96px);
  bottom: clamp(-310px, -16vw, -150px);
  width: clamp(360px, 38vw, 680px);
  aspect-ratio: 1.16;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--site-primary) 24%, transparent);
  background:
    radial-gradient(circle at 58% 36%, rgba(255,255,255,.82) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, transparent 0 38%, color-mix(in srgb, var(--site-primary) 11%, transparent) 39% 57%, transparent 58%);
  box-shadow:
    inset 0 0 90px color-mix(in srgb, var(--site-primary) 10%, transparent),
    0 36px 110px rgba(16, 24, 40, .08);
  opacity: .78;
  transform: rotate(-12deg);
  animation: dcn-v223-hero-aura 16s ease-in-out infinite;
  pointer-events: none;
}
.site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::after {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  top: clamp(94px, 8vw, 148px) !important;
  right: clamp(-82px, -3vw, -34px) !important;
  bottom: auto !important;
  left: auto !important;
  width: clamp(160px, 16vw, 286px) !important;
  height: auto !important;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--site-secondary) 30%, transparent) !important;
  border-radius: 44% 56% 61% 39% / 45% 38% 62% 55% !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.58), transparent 44%),
    color-mix(in srgb, var(--site-secondary) 8%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 32px 88px color-mix(in srgb, var(--site-secondary) 14%, transparent) !important;
  filter: none !important;
  opacity: .82 !important;
  transform: rotate(18deg) !important;
  animation: dcn-v223-hero-orbit 18s ease-in-out infinite reverse !important;
  pointer-events: none;
}

@keyframes dcn-v223-hero-aura {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-12deg); }
  50% { transform: translate3d(18px, -12px, 0) rotate(-8deg); }
}
@keyframes dcn-v223-hero-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg); }
  50% { transform: translate3d(-14px, 10px, 0) rotate(13deg); }
}

@media (max-width: 760px) {
  .site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media) {
    background-image:
      radial-gradient(circle at 0% 30%, color-mix(in srgb, var(--site-primary) 20%, transparent), transparent 38%),
      radial-gradient(circle at 100% 5%, color-mix(in srgb, var(--site-secondary) 20%, transparent), transparent 36%),
      linear-gradient(145deg, color-mix(in srgb, var(--site-hero-bg) 88%, #fff), var(--site-hero-bg)) !important;
  }
  .site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::before {
    left: -190px;
    bottom: -250px;
    width: 390px;
    opacity: .54;
  }
  .site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::after {
    top: 86px !important;
    right: -72px !important;
    width: 172px !important;
    opacity: .56 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::before,
  .site-control-media-tuned:not(.site-control-media-active):not(.site-control-cta-media)::after {
    animation: none !important;
  }
}

/* v2.2.8 — Current CTA contrast and owner-controlled overlay.
   Hero restoration must never replace the CTA's approved dark brand surface.
   In "use current media" mode this dedicated layer consumes the CTA overlay
   controls and stays below copy, artwork, and actions. */
.site-control-cta-media[data-site-media-current="1"]:not(.site-control-media-active)::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  z-index: 1;
  background: var(--sc-overlay) !important;
  opacity: var(--sc-overlay-opacity) !important;
  pointer-events: none;
}


/* v2.0.2 visual-QA lock: route-specific grid centering and reveal transforms
   must never move the breadcrumb away from the shared public hero start. */
html body:not(.home-page):not(#dichana-public-copy-v202) :is(
  .batch2-hero-copy,
  .batch3-hero-copy,
  .batch4-hero-copy,
  .standard-v8562-hero-copy,
  .product-library-hero-copy
) {
  align-self: start !important;
  transform: none !important;
}