/* =======================================================================
   ENTERPRISE NAV + BRAND LAYOUT (v2)
   - Two centered nav rows (Kontakt MUST remain inside row 2, never a 3rd line)
   - Bigger nav buttons
   - Brand block: Desktop-KI line, then Projekte & Dokumente link, then Analytics
   - Enterprise "secure blue" accent palette
   ======================================================================= */

:root{
  /* Enterprise secure blue */
  --accent: #1e40af;
  --accent-soft: #0ea5e9;
}

/* Make sure header layout can breathe */
.site-header .nav-inner{
  gap: 18px;
}

/* Nav layout: link rows centered, actions remain right */
.nav-links{
  align-items: flex-start;
}

/* We rebuild the nav-items DOM into rows via enterprise-layout-v2.js */
.nav-links .nav-items{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.site-header .nav-rows{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Each row is ALWAYS centered */
.site-header .nav-row{
  display: flex;
  /* Never allow a 3rd visual row due to wrapping (Kontakt must stay in row 2). */
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  /* Give the center menu more room so row 2 can fit (enterprise header widths). */
  max-width: min(1550px, 100%);
  overflow-x: auto !important;
  overflow-y: visible;
  /* Reserve room for the small rainbow indicator below active items. */
  padding: 0 6px 18px;
  scrollbar-width: none;
}
.site-header .nav-row::-webkit-scrollbar{ display:none; }

/* Second row should sit a touch lower (visual separation) */
.site-header .nav-row-2{
  margin-top: 10px;
}

/* Bigger "button-like" links */
.site-header .nav-row a[data-page-link],
.site-header nav.nav.enterprise-nav-two-rows .nav-row a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bigger vertically, not overly wide (keeps 2 rows). */
  padding: 12px 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  white-space: nowrap;

  font-size: clamp(0.90rem, 0.86vw, 1.08rem);
  letter-spacing: clamp(0.10em, 0.12vw, 0.16em);
  text-transform: uppercase;
  line-height: 1;
}

/* Enterprise rainbow indicator for selected nav items on subpages
   (index.html already has its own animated indicator in the inline CSS). */
.site-header nav.nav.enterprise-nav-two-rows .nav-row a::after{
  content: "";
}
.site-header nav.nav.enterprise-nav-two-rows .nav-row a.is-active::after{
  content: "🌈";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  opacity: 0.95;
  pointer-events: none;
}

/* Active indicator (small rainbow) — homepage after the JS rebuild needs its own rule */
.site-header .nav-row a[data-page-link]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%) scale(0.92);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.site-header .nav-row a[data-page-link].is-active::after{
  content: "🌈";
  opacity: 0.95;
  transform: translateX(-50%) scale(1);
}

.site-header .nav-row a[data-page-link]:hover,
.site-header nav.nav.enterprise-nav-two-rows .nav-row a:hover{
  border-color: rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.28);
}

/* Keep active state crisp */
.site-header .nav-row a[data-page-link].is-active,
.site-header nav.nav.enterprise-nav-two-rows .nav-row a.is-active{
  border-color: rgba(14,165,233,0.65);
  box-shadow: 0 0 0 1px rgba(30,64,175,0.35) inset;
  background: rgba(30,64,175,0.18);
}

/* Kontakt uses the same pill styling as all other nav items */

/* Brand block link for projects & documents */
.logo-wrap > div,
.logo-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.logo-text-sub,
.logo-sub{
  /* Same enterprise accent + weight as the projects link */
  color: var(--accent-soft) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em !important;
  display: block;
}

.logo-project-link,
.logo-project-text{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  color: var(--accent-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.logo-project-link:hover{
  text-decoration: underline;
}

.logo-project-text{
  cursor: default;
}

/* Keep analytics pill spacing consistent when we move it */
#analytics-pill{
  margin-top: 0 !important;
  width: fit-content;
}

/* Analytics pill styling for subpages (created by enterprise-layout-v2.js) */
#analytics-pill.enterprise-analytics-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.18);
  color: rgba(226,232,240,0.95);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.enterprise-analytics-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(14,165,233,0.9);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.18);
}

/* Enterprise blue gradient bar (subtle, secure) */
.bg-gradient-bar{
  background: linear-gradient(90deg,
    rgba(14,165,233,0.0) 0%,
    rgba(14,165,233,0.75) 25%,
    rgba(30,64,175,0.75) 75%,
    rgba(30,64,175,0.0) 100%
  ) !important;
}

/* Small screens: slightly smaller pills, still centered */
@media (max-width: 720px){
  .site-header .nav-row a[data-page-link],
.site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    padding: 10px 14px;
    gap: 10px;
  }

  .site-header .nav-row-2{ margin-top: 8px; }
}

/* Light mode: increase button text contrast and keep the enterprise look */
body.light-mode .site-header .nav-row a[data-page-link],
body.light-mode .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
  color: rgba(15,23,42,0.95) !important;
  border-color: rgba(15,23,42,0.20);
  background: rgba(255,255,255,0.55);
}
body.light-mode .site-header .nav-row a[data-page-link]:hover,
body.light-mode .site-header nav.nav.enterprise-nav-two-rows .nav-row a:hover{
  border-color: rgba(15,23,42,0.32);
  background: rgba(255,255,255,0.72);
}
body.light-mode .site-header .nav-row a[data-page-link].is-active,
body.light-mode .site-header nav.nav.enterprise-nav-two-rows .nav-row a.is-active{
  border-color: rgba(30,64,175,0.55);
  background: rgba(30,64,175,0.10);
  box-shadow: 0 0 0 1px rgba(30,64,175,0.18) inset;
}
body.light-mode #analytics-pill.enterprise-analytics-pill{
  color: rgba(15,23,42,0.86);
  border-color: rgba(15,23,42,0.22);
  background: rgba(255,255,255,0.55);
}


/* ===== v5 FIXES: keep nav ALWAYS foreground + prevent clipping ===== */
.site-header{
  z-index: 9999 !important; /* always above content */
  position: sticky; /* preserve original behavior */
}
.site-header,
.site-header .nav-inner,
.site-header .nav-links,
.site-header .nav-items,
.site-header .nav-rows,
.site-header .nav-row{
  overflow: visible !important;
}
.site-header .nav-links{
  position: relative;
  z-index: 10000;
}
.site-header .nav-items{
  padding-bottom: 22px !important; /* room for 🌈 indicator */
}
.site-header .nav-row{
  padding-bottom: 22px !important; /* room for 🌈 indicator */
}
.site-header .nav-row a,
.nav-links a[data-page-link]{
  overflow: visible !important;
}


/* ===== v6 FIX: Downloads modal must be above EVERYTHING (all languages) ===== */
#dlOv{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99998 !important;
}
#dlModal{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  z-index: 99999 !important;
  /* IMPORTANT: do NOT override transform here.
     The modal uses .cart{transform:translateX(100%)} and .cart.open{transform:translateX(0)}.
     Overriding transform would force the modal visible and break the close button. */
  will-change: transform;
  backface-visibility: hidden;
}
/* Ensure overlay/modal are not clipped by any stacking contexts */

/* ===== v7 FINAL: lock icon for non-implemented languages (menu stays visible) ===== */
.nav-language-option[data-implemented="0"]::after{
  content: " \1F512"; /* 🔒 */
  margin-left: 8px;
  opacity: 0.85;
}
.nav-language-option[data-implemented="0"][disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}

/* =======================================================================
   v8 MOBILE NAV FIX
   Ziel: Auf Mobile sollen die umrandeten Nav-Pills NICHT als vertikale
   Spalte rechts kleben. Stattdessen:
   - Header darf umbrechen
   - Navigation bekommt volle Breite unter Logo/Controls
   - Pro Zeile bleibt es EINREIHIG (horizontal scroll), kein Wrapping
   Desktop bleibt unverändert.
   ======================================================================= */

@media (max-width: 820px){
  /* Homepage-Header (index.html): .nav-inner / .nav-links / .nav-items */
  .site-header .nav-inner{
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-header .nav-links{
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Actions (Theme/Language) oben rechts innerhalb der Nav-Zeile */
  .site-header .nav-actions{
    order: 1;
    margin-left: auto;
  }

  /* Nav-Items unter die Actions, volle Breite */
  .site-header .nav-items{
    order: 2;
    flex: 1 1 100%;
    justify-content: center !important;
    min-width: 0;
  }

  /* Subpages: .header-inner Struktur (Theme/Language links, Logo, Nav) */
  .site-header .header-inner{
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .site-header .logo-block{ order: 1; }
  .site-header .header-controls{
    order: 2;
    margin-left: auto;
  }
  .site-header nav.nav{
    order: 3;
    width: 100%;
    justify-content: center;
  }

  /* Zwei Nav-Reihen: mehrzeilig (Wrap) + zentriert (Mobile) */
  .site-header .nav-row{
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow-x: visible !important;
    overflow-y: visible;
    padding: 0 6px 22px; /* room for 🌈 indicator */
  }
/* Mobile: Pills kompakter (nur Mobile) */
  .site-header .nav-row a[data-page-link],
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    padding: 10px 12px 16px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .site-header nav.nav.enterprise-nav-two-rows .nav-row a.is-active::after{
    bottom: 3px;
    font-size: 11px;
  }
}

@media (max-width: 420px){
  .site-header .nav-row{
    gap: 8px;
    padding: 0 2px 16px;
  }
  .site-header .nav-row a[data-page-link],
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    padding: 9px 10px 15px;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
  }
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a.is-active::after{
    font-size: 10px;
  }
}

/* =======================================================================
   v9 MOBILE POLISH
   - FanShop/Subpage header controls stack vertically on small screens
   - Anchor navigation (Downloads/Screenshots etc.) must not be hidden under sticky header
   - Tap/press highlight must follow pill shape (no rectangular blue flash)
   Desktop remains unchanged.
   ======================================================================= */

@media (max-width: 820px){
  /* ---- 1) FanShop header: stack controls so nothing is clipped ---- */
  .page-header{
    flex-direction: column;
    align-items: stretch;
  }
  .page-header .controls{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-header .controls-left{
    flex-wrap: wrap;
    overflow: visible;
    justify-content: flex-start;
  }
  .page-header .controls-right{
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* ---- 2) In-page anchors: keep content below sticky header ---- */
  html{ scroll-padding-top: 240px; }
  .page-section{ scroll-margin-top: 240px; }

  /* ---- 3) Press highlight must be pill-shaped (no square tap flash) ---- */
  .site-header .nav-row a[data-page-link],
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a,
  .btn-primary,
  .btn-ghost,
  .btn-secondary,
  .back-btn,
  .nav-language-globe,
  .theme-toggle{
    -webkit-tap-highlight-color: transparent;
  }

  .site-header .nav-row a[data-page-link],
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    overflow: hidden !important; /* ensures any pressed background stays rounded */
  }

  .site-header .nav-row a[data-page-link]:active,
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a:active{
    background: rgba(30,64,175,0.22) !important;
    border-color: rgba(14,165,233,0.75) !important;
  }
}

@media (max-width: 420px){
  html{ scroll-padding-top: 260px; }
  .page-section{ scroll-margin-top: 260px; }
}


/* =======================================================================
   v10 MOBILE: Downloads & Screenshots pages like "Technik" (compact header)
   - Mobile only: reduce header height so nav + page content fits without covering.
   - Desktop remains unchanged.
   ======================================================================= */
@media (max-width: 820px){
  body.page-downloads .site-header .logo-block,
  body.page-screenshots .site-header .logo-block{
    width: 100%;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Keep only the main brand line on these pages (saves a lot of vertical space) */
  body.page-downloads .site-header .logo-block .logo-sub,
  body.page-screenshots .site-header .logo-block .logo-sub,
  body.page-downloads .site-header .logo-project-link,
  body.page-screenshots .site-header .logo-project-link,
  body.page-downloads .site-header .logo-project-text,
  body.page-screenshots .site-header .logo-project-text,
  body.page-downloads .site-header #analytics-pill,
  body.page-screenshots .site-header #analytics-pill{
    display: none !important;
  }

  body.page-downloads .site-header .logo-block .logo-main,
  body.page-screenshots .site-header .logo-block .logo-main{
    font-size: 1.55rem;
    line-height: 1.05;
  }

  /* Slightly tighter header spacing on these two pages only */
  body.page-downloads .site-header .header-inner,
  body.page-screenshots .site-header .header-inner{
    gap: 10px;
  }

  body.page-downloads .site-header .nav-row,
  body.page-screenshots .site-header .nav-row{
    padding-bottom: 18px !important; /* still keeps 🌈 inside */
  }

  /* Anchor targets must not tuck under the sticky header */
  body.page-downloads #downloads{ scroll-margin-top: 200px; }
  body.page-screenshots #screenshots{ scroll-margin-top: 200px; }
}

@media (max-width: 420px){
  body.page-downloads #downloads{ scroll-margin-top: 220px; }
  body.page-screenshots #screenshots{ scroll-margin-top: 220px; }
}



/* =======================================================================
   v11 MOBILE: Downloads & Screenshots ultra-compact (more content space)
   - Mobile only: header is not sticky on these two pages (frees viewport while reading)
   - Reduce nav + section spacing; make downloads actions more compact
   - Hide the Windows-only "program" download button on mobile
   Desktop remains unchanged.
   ======================================================================= */
@media (max-width: 820px){
  /* Let header scroll away on these pages (like Technik) */
  body.page-downloads .site-header,
  body.page-screenshots .site-header{
    position: relative !important;
  }

  /* Tighten overall vertical rhythm */
  body.page-downloads main.page,
  body.page-screenshots main.page{
    padding-top: 22px !important;
  }
  body.page-downloads .section-header,
  body.page-screenshots .section-header{
    margin-bottom: 12px !important;
  }
  body.page-downloads .section-kicker,
  body.page-screenshots .section-kicker{
    margin-bottom: 6px !important;
  }
  body.page-downloads .section-title,
  body.page-screenshots .section-title{
    margin: 0 0 8px 0 !important;
    line-height: 1.06;
  }

  /* Nav pills slightly smaller on these pages only */
  body.page-downloads .site-header nav.nav.enterprise-nav-two-rows .nav-row a,
  body.page-screenshots .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    padding: 8px 11px 14px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.11em !important;
  }
  body.page-downloads .site-header .nav-row,
  body.page-screenshots .site-header .nav-row{
    gap: 8px !important;
    padding-bottom: 14px !important;
  }

  /* Downloads: tighter buttons + remove Windows-only main download on mobile */
  body.page-downloads .downloads-buttons{
    margin-top: 14px !important;
    gap: 10px !important;
  }
  body.page-downloads .downloads-buttons .btn{
    padding: 12px 14px !important;
    min-height: 44px;
    font-size: 0.92rem;
    overflow: hidden; /* keep press background rounded */
  }
  /* Screenshots: placeholder/panel tighter so more content is visible */
  body.page-screenshots .placeholder-panel{
    padding: 16px 14px !important;
    margin-top: 12px !important;
  }
  body.page-screenshots .placeholder-title{
    margin-bottom: 6px !important;
  }
}

@media (max-width: 420px){
  body.page-downloads main.page,
  body.page-screenshots main.page{
    padding-top: 18px !important;
  }

  body.page-downloads .site-header nav.nav.enterprise-nav-two-rows .nav-row a,
  body.page-screenshots .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    padding: 8px 10px 14px !important;
    font-size: 0.70rem !important;
  }

  body.page-downloads .downloads-buttons .btn{
    font-size: 0.88rem;
  }
}


/* =======================================================================
   REGIONAL AVAILABILITY – MICROSOFT STORE CHECKBOX GATE (HOME / PRICING)
   - Checkbox block left of the Microsoft Store button.
   - Blocks all purchase actions until confirmed.
   ======================================================================= */
.msstore-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  align-self:stretch !important;
}

.price-actions > .msstore-row,
.price-actions .msstore-row{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  align-self:stretch !important;
}

.msstore-row > .btn-buy{
  flex: 1 1 100%;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  align-self: stretch !important;
}

.regional-availability-consent{
  flex: 1 1 auto;
  max-width: 100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.28);
  background: rgba(2,6,23,0.32);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

.regional-availability-consent.is-attention{
  border-color: rgba(99,102,241,0.65);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.25), 0 18px 44px rgba(0,0,0,0.40);
  transform: translateY(-1px);
}

.msstore-consent-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.msstore-consent-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,0.55);
  background: rgba(2,6,23,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  flex:0 0 auto;
  margin-top:2px;
  position:relative;
}

.msstore-consent-input:focus-visible + .msstore-consent-box{
  outline: 3px solid rgba(99,102,241,0.55);
  outline-offset: 4px;
}

.msstore-consent-input:checked + .msstore-consent-box{
  border-color: rgba(255,255,255,0.55);
  background: linear-gradient(90deg, rgba(34,211,238,0.95), rgba(99,102,241,0.95), rgba(168,85,247,0.95), rgba(236,72,153,0.95), rgba(245,158,11,0.95));
}

.msstore-consent-input:checked + .msstore-consent-box::after{
  content:"";
  position:absolute;
  left:4px;
  top:2px;
  width:7px;
  height:11px;
  border-right:2px solid rgba(255,255,255,0.95);
  border-bottom:2px solid rgba(255,255,255,0.95);
  transform: rotate(38deg);
}

.msstore-consent-text{
  display:block;
  font-size:0.80rem;
  line-height:1.55;
  color: rgba(226,232,240,0.92);
  white-space: pre-line; /* keeps \n from JSON readable */
}

.msstore-consent-title{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  color: rgba(255,255,255,0.96);
}

.msstore-consent-body{
  display:block;
  color: rgba(226,232,240,0.90);
}


/* Collapsible regional notice (cleaner on Desktop & Mobile) */
.msstore-consent-details{
  display:block;
  width:100%;
}
.msstore-consent-details > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.msstore-consent-details > summary::-webkit-details-marker{ display:none; }
.msstore-consent-details > summary{
  display:flex;
  align-items:center;
  gap:10px;
}
.msstore-consent-details > summary::after{
  content:"▾";
  margin-left:auto;
  opacity:0.75;
  font-size:0.95em;
  transform: translateY(-1px);
}
.msstore-consent-details[open] > summary::after{ content:"▴"; }
.msstore-consent-details .msstore-consent-body{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,0.20);
  max-height: 220px;
  overflow:auto;
}
.btn-buy--region-blocked{
  opacity:0.45;
  filter: saturate(0.65);
}

/* Mobile: keep it stacked and readable */
@media (max-width: 820px){
  .msstore-row{ flex-direction: column; align-items: stretch; }
  .msstore-row > .btn-buy{ width: 100%; min-width: 0; max-width: none; }
  .regional-availability-consent{ max-width: 100%; flex: 1 1 auto; }
}

/* =======================================================================
   MOBILE SUBPAGES – PREVENT STICKY HEADER OVERLAP + LONG-WORD OVERFLOW
   ======================================================================= */
@media (max-width: 820px){
  body.rainbow-subpage .site-header{
    position: relative !important;
    top: auto !important;
  }

  body.rainbow-subpage h1,
  body.rainbow-subpage h2,
  body.rainbow-subpage h3,
  body.rainbow-subpage p,
  body.rainbow-subpage li,
  body.rainbow-subpage th,
  body.rainbow-subpage td{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Inline code chips (e.g. media types like application/vnd.company.v1+json) */
  code.inline{
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Very long button labels (e.g. "Programmierparadigmen") should never spill */
  body.rainbow-subpage a[href*="programmierparadigmen"],
  body a[href*="programmierparadigmen"]{
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: 0.92em;
    line-height: 1.15;
  }
}

/* =======================================================================
   DOWNLOADS – WINDOWS DESKTOP ONLY (MOBILE: NOT CLICKABLE)
   ======================================================================= */
@media (max-width: 820px){
  .downloads-main[data-download="program"]{
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.70;
  }
}


/* =======================================================================
   Mobile content fixes (ONLY mobile)
   - Allow long media types / inline code to wrap inside containers
   - Ensure tap highlight stays rounded/clean on mobile
   ======================================================================= */
@media (max-width: 820px){
  code.inline,
  .inline{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep mobile tap feedback inside rounded pills */
  .site-header .nav-row a[data-page-link],
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
  }
  .site-header .nav-row a[data-page-link]:focus-visible,
  .site-header nav.nav.enterprise-nav-two-rows .nav-row a:focus-visible{
    box-shadow: 0 0 0 3px rgba(30,64,175,0.35);
  }
}


/* Purchase info only, cancellation and withdrawal emphasis */
.btn-buy--static,
.btn-buy--static[disabled]{
  cursor: default !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.btn-buy--static:hover,
.btn-buy--static:active{
  transform: none !important;
  box-shadow: none !important;
}
.btn-buy--cancel{
  background: rgba(30,41,59,0.92);
  color: rgba(248,250,252,0.98);
  border: 1px solid rgba(56,189,248,0.82);
  font-weight: 700;
}
.btn-buy--cancel:hover{
  background: rgba(15,23,42,0.98);
  border-color: rgba(125,211,252,0.98);
}
.btn-buy--withdrawal{
  background: rgba(15,23,42,0.9);
  color: rgba(248,250,252,0.98);
  border: 1px solid rgba(148,163,184,0.96);
  font-weight: 800;
}
.btn-buy--withdrawal:hover{
  background: rgba(2,6,23,0.98);
  border-color: rgba(226,232,240,0.98);
}
body.light-mode .regional-availability-consent{
  background: rgba(255,255,255,0.98);
  border-color: rgba(100,116,139,0.55);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}
body.light-mode .msstore-consent-box{
  border-color: rgba(71,85,105,0.82);
  background: rgba(255,255,255,0.98);
  box-shadow: none;
}
body.light-mode .msstore-consent-title{
  color: rgba(15,23,42,0.98);
  font-weight: 900;
}
body.light-mode .msstore-consent-details > summary::after{
  color: rgba(15,23,42,0.88);
  opacity: 1;
}
body.light-mode .msstore-consent-body{
  color: rgba(30,41,59,0.96);
  font-weight: 500;
}
body.light-mode .msstore-consent-details .msstore-consent-body{
  border-top-color: rgba(148,163,184,0.45);
}
body.light-mode .btn-buy--cancel{
  background: rgba(241,245,249,0.98);
  color: rgba(15,23,42,0.98);
  border-color: rgba(37,99,235,0.88);
}
body.light-mode .btn-buy--cancel:hover{
  background: #ffffff;
  border-color: rgba(30,64,175,0.98);
}
body.light-mode .btn-buy--withdrawal{
  background: rgba(226,232,240,0.98);
  color: rgba(15,23,42,0.98);
  border-color: rgba(71,85,105,0.92);
}
body.light-mode .btn-buy--withdrawal:hover{
  background: rgba(203,213,225,0.98);
  border-color: rgba(30,41,59,0.98);
}



/* === COUNTER CONSISTENCY OVERRIDE (size only) === */

body:not(.light-mode) .hero-counter-wrap {
  grid-auto-rows: 1fr !important;
}

body:not(.light-mode) .hero-counter {
  height: 400px !important;
  min-height: 400px !important;
}

body:not(.light-mode) .hero-counter-label {
  min-height: 2.55em !important;
  display: flex !important;
  align-items: flex-start !important;
}

body:not(.light-mode) .hero-counter-numbers {
  min-height: 173px !important;
  align-content: flex-start !important;
}

body:not(.light-mode) .hero-counter-sub {
  min-height: 2.8em !important;
}

body:not(.light-mode) .hero-counter-sub-quote {
  display: block !important;
  min-height: 2.5em !important;
}