a.card:hover{border-color:var(--line2); transform: translateY(-1px)}
a.card:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
@media (prefers-reduced-motion: reduce){a.card:hover{transform:none}}
:root{
 color-scheme: light dark;--max:1200px;
 /* motion */
 --ease: cubic-bezier(.2,.9,.2,1);
 --dur: 180ms;
 /* tokens (default dark) */
 --bg:#070b18;
 --bg2:#0b1020;
 --panel:#0f1730;
 --panel2:#101a36;
 --text:#eef1ff;
 --muted:#b8c0da;
 --muted2:#8c96b8;
 --line:rgba(255,255,255,.10);
 --line2:rgba(255,255,255,.16);
 --accent:#7aa2ff;
 --accent2:#61ffd6;
 --shadow: 0 28px 90px rgba(0,0,0,.55);
 --shadow2: 0 10px 30px rgba(0,0,0,.28);
 --radius:22px;
 --radius2:16px;
 /* semantic surfaces (theme-aware) */
 --header-bg: rgba(7,11,24,.68);
 --menu-bg: rgba(7,11,24,.88);
 /* Slightly more opaque dropdown so it visually separates from the page */
 --dropdown-bg: rgba(7,11,24,.96);
 --control-bg: rgba(255,255,255,.06);
 --control-bg-hover: rgba(255,255,255,.10);
 --chip-bg: rgba(255,255,255,.05);
 --chip-bg-hover: rgba(255,255,255,.08);
 --input-bg: rgba(255,255,255,.03);
 --input-border: rgba(255,255,255,.14);
 --focus: rgba(97,255,214,.55);
 --danger: #ff6b6b;
}
/* Light theme (keeps brand) */
:root[data-theme="light"]{
 color-scheme: light;--bg:#fbfcff;
 --bg2:#f3f7ff;
 --panel:#ffffff;
 --panel2:#ffffff;
 --text:#0b1020;
 --muted:#2a3560;
 --muted2:#47527a;
 --line:rgba(11,16,32,.14);
 --line2:rgba(11,16,32,.22);
 --shadow: 0 18px 60px rgba(11,16,32,.12);
 --shadow2: 0 8px 24px rgba(11,16,32,.10);
 /* improve contrast + readability in light mode */
 --accent: #1e4bd6;
 --accent2: #0a8a73;
 --header-bg: rgba(255,255,255,.86);
 --menu-bg: rgba(255,255,255,.92);
 --dropdown-bg: rgba(255,255,255,.98);
 --control-bg: rgba(11,16,32,.03);
 --control-bg-hover: rgba(11,16,32,.06);
 --chip-bg: rgba(11,16,32,.03);
 --chip-bg-hover: rgba(11,16,32,.06);
 --input-bg: rgba(255,255,255,.95);
 --input-border: rgba(11,16,32,.18);
 --focus: rgba(30,75,214,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg);}
/* Anchor offset for sticky header (in-page navigation / skip links) */
html{ scroll-padding-top: 92px; }
:target{ scroll-margin-top: 92px; }
body{
 margin:0;
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
 background: transparent;
 color:var(--text);
 line-height:1.55;
 /* keep background visually uniform while scrolling (prevents viewport-tiling artifacts on some mobile browsers) */
 position:relative;
 min-height:100%;
 isolation:isolate;
}
body::before{
 content:"";
 position:fixed;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background:
 radial-gradient(1100px 540px at 15% -20%, rgba(122,162,255,.35), transparent 60%),
 radial-gradient(900px 500px at 120% 0%, rgba(97,255,214,.15), transparent 60%),
 radial-gradient(760px 420px at 40% 115%, rgba(122,162,255,.12), transparent 62%),
 linear-gradient(180deg, var(--bg), var(--bg2));
 background-repeat:no-repeat;
}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--accent)}
.wrap{max-width:var(--max); margin:0 auto; padding:24px}
.skip{
 position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
 left:16px; top:16px; width:auto; height:auto;
 padding:10px 12px; border-radius:14px;
 background: rgba(255,255,255,.10); border:1px solid var(--line);
 z-index:999;
}
.siteHeader{
 position:sticky; top:0; z-index:30;
 backdrop-filter: blur(12px);
 background: var(--header-bg);
 border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   Menu scrim (desktop dropdown + mobile nav)
   Goal: when a menu layer is open, the page behind becomes a *different layer*.
   --------------------------------------------------------------------- */
.navScrim{
 position:fixed;
 inset:0;
 z-index:25; /* below header (30), above page content */
 background: rgba(7,11,24,.35);
 opacity:0;
 pointer-events:none;
 backdrop-filter: blur(10px) saturate(1.08);
 -webkit-backdrop-filter: blur(10px) saturate(1.08);
 transition: opacity 140ms var(--ease);
}
:root[data-theme="light"] .navScrim{ background: rgba(11,16,32,.18); }
html.navScrimOn .navScrim{ opacity:1; pointer-events:auto; }
html.navScrimOn .siteHeader{ border-bottom-color: var(--line2); box-shadow: var(--shadow2); }
@media (prefers-reduced-transparency: reduce){
 .navScrim{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media print{ .navScrim{ display:none !important; } }
.headerInner{
 display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap;
 /* Slightly tighter padding buys space for longer translated labels (e.g., DE/FR) */
 padding:14px 18px;
 max-width:1320px;
 margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; min-width: 200px}

/* Brand mark next to site name */
.brandMark{
  /* Make the brand mark visually competitive vs. common app/brand icons (desktop first) */
  width:clamp(44px, 6vw, 76px);
  height:auto;
  aspect-ratio:1/1;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(11,18,32,.10));
}
@media (max-width: 560px){
  .brand{min-width:0; gap:8px;}
  /* Mobile: make the mark visibly larger; safe because brandTag is hidden under 1120px */
  .brandMark{width:clamp(56px, 15vw, 86px); height:auto;}
}

.brandText{font-weight:980; letter-spacing:.25px; font-size:clamp(19px, 1.7vw, 24px); line-height:1; }
.brandTag{
 color: var(--muted);
 font-size: 12px;
 font-weight: 850;
 letter-spacing: .2px;
 padding-left: 10px;
 margin-left: 2px;
 border-left: 1px solid var(--line);
 white-space: nowrap;
}
.nav{
 display:flex;
 align-items:center;
 gap:10px;
 flex: 1 1 auto;
 min-width: 0;
 /* Keep header on one line across long-label locales (DE/FR) */
 flex-wrap: nowrap;
 white-space: nowrap;
 /* Keep header one line; allow horizontal scroll if labels get long (DE/FR/IT). */
 overflow-x: auto;
 overflow-y: visible;
 -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a, .nav summary{
 white-space: nowrap;
}
.nav a{color:var(--muted); font-weight:750}
.nav a:hover{color:var(--text)}
.pill{
 display:inline-flex; align-items:center; gap:6px;
 padding:9px 12px; border-radius:999px;
 border:1px solid var(--line);
 background: var(--chip-bg);
 text-decoration:none; color:inherit;
 cursor:pointer; user-select:none;
}
.pill:hover{border-color:var(--line2); background:var(--chip-bg-hover, var(--chip-bg));}
.pill:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.navToggle{
 display:none;
 width:44px; height:44px; border-radius:14px;
 border:1px solid var(--line);
 background: var(--control-bg);
 box-shadow: var(--shadow2);
 color: var(--text);
 transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.navToggle:hover{
 transform: translateY(-1px);
 background: var(--control-bg-hover);
 border-color: var(--line2);
}
.navToggleBar{
 display:block; width:18px; height:2px; background: currentColor;
 opacity:.85;
 margin:4px auto; border-radius:999px;
}
main{padding-top: 18px}
.hero{
 display:grid; grid-template-columns: 1.35fr .9fr; gap:18px;
 padding: 34px 0 10px;
}

/* Content-page hero (single-column)
   Some pages use .hero for a simple stacked header. Without this, the grid
   auto-places children into 2 columns (e.g., crumbs in col1, title in col2),
   which breaks layout and causes pill overlap.

   Robust fix: force 1-column AND force every direct child to span full width.
*/
.hero.stack{ grid-template-columns: 1fr !important; }
.hero.stack > *{ grid-column: 1 / -1; }

/* Local navigation pills (wrap-safe) */
.pillRow{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-top: 10px;
}
.pillRow .pill{
 line-height:1;
 padding:8px 10px;
 font-size:13px;
 white-space: nowrap;
}
.kicker{
 display:inline-flex; align-items:center; gap:8px;
 font-size:12px; letter-spacing:.5px; text-transform:uppercase;
 color: var(--muted);
 border:1px solid var(--line);
 background: var(--chip-bg);
 padding:6px 10px; border-radius:999px;
 width: fit-content;
}
h1{
 font-size: clamp(38px, 4.6vw, 66px);
 line-height:1.02;
 margin: 14px 0 12px;
 letter-spacing:-0.9px;
}
.lead{
 color: var(--muted);
 font-size: 17px;
 margin: 0 0 18px;
 max-width: 64ch;
}
.micro{color: var(--muted); font-size: 12.5px; margin-top:14px; max-width: 78ch}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap}
.btn{
 display:inline-flex; align-items:center; justify-content:center;
 padding:12px 14px; border-radius:18px;
 border:1px solid var(--line);
 background: var(--control-bg);
 box-shadow: var(--shadow2);
 font-weight: 900;
 transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: var(--control-bg-hover); border-color: var(--line2)}
.btn.primary{background: linear-gradient(135deg, rgba(122,162,255,.62), rgba(97,255,214,.22))}
.btn.ghost{background: rgba(255,255,255,.03)}
.btn.small{padding:10px 12px; border-radius:16px; font-size:12.5px; font-weight:900}
.card{
 display:block;
 border:1px solid var(--line);
 background: var(--panel);
 border-radius: var(--radius);
 padding: 18px;
 box-shadow: var(--shadow);
}
.card.subtle{background: var(--panel2)}
.cardTitle{font-weight: 950; margin-bottom: 12px}
.metricGrid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.metric{
 border:1px solid var(--line);
 background: var(--chip-bg);
 border-radius: var(--radius2);
 padding: 12px;
}
.mNum{font-weight: 950}
.mLabel{color: var(--muted2); font-size: 12.5px; margin-top: 4px}
.divider{height:1px; background: var(--line); margin:14px 0}
.tagRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.tag{
 font-size:12px; color: var(--text);
 border:1px solid var(--line);
 background: var(--chip-bg);
 padding:6px 10px; border-radius:999px;
}
.section{padding: 38px 0; border-top: 1px solid var(--line)}
.section h2{margin:0 0 10px; font-size: 28px; letter-spacing:-0.2px}
.sectionLead{margin:0 0 18px; color: var(--muted); max-width: 85ch}
.grid2{display:grid; grid-template-columns: 1fr; gap:14px}
@media (min-width: 768px){
  .grid2{ grid-template-columns: 1fr 1fr; }
}

/* Contact layout polish (home) */
@media (min-width: 920px){
  #contact .grid2{ grid-template-columns: 0.95fr 1.05fr; align-items:start; }
}
#contact .panel{ padding: 20px; }
#contact .bullets{ list-style:none; padding-left:0; margin-top:12px; }
#contact .bullets li{ margin:0; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.10); display:flex; gap:10px; flex-wrap:wrap; }
#contact .bullets li:last-child{ border-bottom:none; }
#contact .bullets strong{ color: var(--muted); font-weight:900; min-width:64px; }
#contact .btnRow{ align-items:center; }
#contact .turnstileRow{ flex: 1 1 290px; }
#contact .turnstileRow .cf-turnstile{ min-height: 65px; }
.cards2{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch}
.cards2 > .card{height:100%}
.cards2 > .panel{height:100%}
@media (max-width: 860px){.cards2{grid-template-columns:1fr}}
.cards3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.cards3 > *{min-width:0}
@media (max-width: 980px){.cards3{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.cards3{grid-template-columns: 1fr}}
.cards4{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
@media (max-width: 980px){.cards4{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 560px){.cards4{grid-template-columns: 1fr}}
.panel{
 border:1px solid var(--line);
 background: var(--panel2);
 border-radius: var(--radius);
 padding: 18px;
 box-shadow: var(--shadow2);

 min-width:0;
}
.panelTop{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.icon{
 width:32px; height:32px; border-radius:12px;
 display:grid; place-items:center;
 background: var(--control-bg);
 border:1px solid rgba(255,255,255,.10);
 font-weight: 900;
}
.bullets{margin:12px 0 0; padding-left:18px; color: var(--text)}
.bullets li{margin:7px 0}
.muted{color: var(--muted)}
.small{font-size: 12.5px}
.topGap{margin-top: 16px}
.callout{
 margin-top:16px;
 border: 1px solid rgba(122,162,255,.48);
 background: rgba(122,162,255,.09);
 border-radius: var(--radius);
 padding: 16px;
}
.calloutTitle{font-weight: 950; margin-bottom: 6px}
.artifact{
 margin-top:16px;
 border:1px solid var(--line);
 background: var(--panel2);
 border-radius: var(--radius);
 padding: 16px;
}
.artifactHead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pillSmall{padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: var(--chip-bg); font-size:12px; color:var(--muted)}
.artifactGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:12px}
.artifactItem{border:1px solid var(--line); background: var(--chip-bg); border-radius: var(--radius2); padding:12px}
.aTop{font-weight: 950}
.aSub{color: var(--muted); font-size:12.5px; margin-top:4px}
.form{margin-top:12px}
.field{display:block}
.label{display:block; color: var(--muted); font-size:12.5px; margin-bottom:6px}
input, textarea{
 width:100%;
 padding: 12px 12px;
 border-radius: 14px;
 border: 1px solid var(--input-border);
 background: var(--input-bg);
 color: var(--text);
 outline: none;
}
input:focus, textarea:focus{
 border-color: rgba(122,162,255,.58);
 box-shadow: 0 0 0 4px rgba(122,162,255,.12);
}
/* Form validation feedback (only after submit attempt) */
.form.isTried input[aria-invalid="true"],
.form.isTried textarea[aria-invalid="true"],
.form.isTried select[aria-invalid="true"]{
 border-color: rgba(255,107,107,.55);
 box-shadow: 0 0 0 4px rgba(255,107,107,.12);
}
.form.isTried .checkRow input[aria-invalid="true"]{
 outline: 2px solid rgba(255,107,107,.55);
 outline-offset: 3px;
 box-shadow: none;
}
[data-fwl-status].isError{
 color: var(--danger);
}
.formGrid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.calGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.span2{grid-column: 1 / -1}
.checkRow{
 display:flex;
 align-items:flex-start;
 gap:10px;
 margin-top:12px;
 padding:10px 12px;
 border-radius:16px;
 border:1px solid var(--line);
 background: var(--chip-bg);
 cursor:pointer;
}
.checkRow:hover{ background: var(--control-bg); border-color: var(--line2); }
.checkRow input{ width:18px; height:18px; margin-top:3px; flex:0 0 auto; }
.btnRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.hidden{display:none}
.siteFooter{
 border-top: 1px solid var(--line);
 background: rgba(7,11,24,.45);
}
.footerInner{
 display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;
 padding: 22px 24px;
 max-width:var(--max);
 margin:0 auto;
}
.footerBrand{display:flex; align-items:center; gap:12px}
.footerName{font-weight: 950}
.footerTag{color: var(--muted); font-size:12px; font-weight: 850}
.footerMeta{color: var(--muted2); font-size: 12.5px; margin-top:10px}
.footerLinks{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.footerLinks a{color: var(--muted); font-weight:750}
.footerLinks a:hover{color: var(--text)}
.footerContact{color: var(--muted); font-size: 12.5px; text-align:right; margin-top:10px}
pre.codeBlock{
 margin:10px 0 0;
 padding: 12px;
 border-radius: 14px;
 border: 1px solid rgba(255,255,255,.10);
 background: rgba(0,0,0,.22);
 overflow-x:auto;
 color: rgba(238,241,255,.92);
 font-size: 12.5px;
 line-height: 1.45;
}
/* Mobile nav */
@media (max-width: 1120px){
 html{ scroll-padding-top: 84px; }
 :target{ scroll-margin-top: 84px; }
 .brandTag{display:none;}
 .navToggle{display:block;}
 .nav{
 position: fixed;
 left: 12px; right: 12px; top: 72px;
 z-index: 60;
 background: var(--menu-bg);
 backdrop-filter: blur(14px);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 14px;
 padding-bottom: 14px ;
 display: none;
 box-shadow: var(--shadow);
 max-height: calc(100vh - 84px);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 }
 .nav a{display:block; padding:12px 10px; border-radius: 14px;}
 .nav a:hover{background: var(--control-bg-hover)}
 .pill{display:inline-flex}
 .navOpen .nav{display:block;}
 /* Mobile: avoid header action crowding (login/contact are available in menu) */
 .headerRight a.headerLogin,
 .headerRight a.headerContact{ display:none; }
 @media (prefers-reduced-motion: no-preference){
 .navOpen .nav{ animation: fwlMenuIn 160ms var(--ease) both; }
 }
 @keyframes fwlMenuIn{
 from{ opacity:0; transform: translateY(-6px); }
 to{ opacity:1; transform: translateY(0); }
 }
 .hero{grid-template-columns: 1fr}
 .cards3{grid-template-columns: 1fr}
 .artifactGrid{grid-template-columns: 1fr 1fr}
 .grid2{grid-template-columns: 1fr}
 .formGrid{grid-template-columns: 1fr}
 .calGrid{grid-template-columns: 1fr}
 .footerContact{text-align:left}
 .footerLinks{justify-content:flex-start}
.ddMenu{background:var(--dropdown-bg); border:1px solid var(--line); box-shadow:var(--shadow2); border-radius:18px; padding:10px; margin-left:10px; margin-top:10px;}

}
/* Wordmark polish (no-logo) */
.brandText{
 font-weight: 980;
 letter-spacing: .3px;
 font-size:clamp(19px, 1.7vw, 24px);
 line-height: 1;
}
.brandText::after{content:none !important; display:none !important;}
.brandTag{
 font-weight: 800;
}
/* Signal row */
.signalRow{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap:10px;
 margin-top: 18px;
}
.signal{
 border:1px solid var(--line);
 background: var(--chip-bg);
 border-radius: 18px;
 padding: 12px;
}
.sigTop{font-weight: 950;}
.sigSub{color: var(--muted2); font-size:12.5px; margin-top:4px}
/* Evidence snapshot */
.snapshotGrid{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap:10px;
 margin-top: 12px;
}
.snapItem{
 border:1px solid rgba(255,255,255,.08);
 background: var(--chip-bg);
 border-radius: 16px;
 padding: 12px;
}
/* Sticky CTA (mobile only) */
.stickyCta{
 display:none;
}
.stickyBtn{
 flex:1;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:12px 10px;
 border-radius:16px;
 border:1px solid var(--line);
 background: var(--control-bg);
 color: rgba(238,241,255,.92);
 font-weight: 900;
}
.stickyBtn.primary{
 background: linear-gradient(135deg, rgba(122,162,255,.62), rgba(97,255,214,.22));
}
@media (max-width: 1120px){
 .signalRow{grid-template-columns: 1fr 1fr; }
 .snapshotGrid{grid-template-columns: 1fr 1fr;}
 .stickyCta{
 display:flex;
 position: fixed;
 left: 12px; right: 12px; bottom: 12px;
 gap:10px;
 padding: 10px;
 background: rgba(7,11,24,.72);
 border:1px solid var(--line);
 border-radius: 20px;
 backdrop-filter: blur(10px);
 box-shadow: var(--shadow);
 z-index: 50;
 }
 body.hasStickyCta{padding-bottom: 92px ;}

/* UX360 v11 — When mobile nav is open, hide sticky CTA to prevent overlap with long dropdowns */
@media (max-width: 1120px){
  .navOpen .stickyCta{ display:none !important; }
  .navOpen body.hasStickyCta{ padding-bottom: 0 !important; }
}

}
::selection{ background: rgba(122,162,255,.35); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
 outline: 3px solid var(--focus);
 outline-offset: 3px;
 border-radius: 12px;
}
.themeToggle{
 width:44px; height:44px; border-radius:14px;
 border:1px solid var(--line);
 background: var(--chip-bg);
 box-shadow: var(--shadow2);
 color: rgba(238,241,255,.88);
 display:grid; place-items:center;
 transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:root[data-theme="light"] .themeToggle{ color: rgba(11,16,32,.86); background: rgba(11,16,32,.04); }
.themeToggle:hover{ transform: translateY(-1px); background: var(--control-bg); border-color: var(--line2); }
.themeIcon{ font-size: 14px; font-weight: 900; }
.nav a.active{
 color: var(--text);
 position: relative;
}
.nav a.active::after{
 content:"";
 position:absolute;
 left:10px; right:10px; bottom:-8px;
 height:2px;
 border-radius:999px;
 background: linear-gradient(90deg, rgba(122,162,255,.9), rgba(97,255,214,.7));
 opacity:.85;
}
.card, .panel, .artifact{
 transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover, .panel:hover, .artifact:hover{
 transform: translateY(-2px);
 border-color: var(--line2);
}
@media (prefers-reduced-motion: reduce){
 *{ scroll-behavior:auto !important; }
 .card, .panel, .artifact, .btn, .themeToggle{ transition:none !important; }
 .card:hover, .panel:hover, .artifact:hover{ transform:none !important; }
}
:root[data-theme="light"] body{
 background:
 radial-gradient(1100px 540px at 15% -20%, rgba(122,162,255,.22), transparent 62%),
 radial-gradient(900px 500px at 120% 0%, rgba(97,255,214,.14), transparent 62%),
 radial-gradient(760px 420px at 40% 115%, rgba(122,162,255,.10), transparent 62%),
 linear-gradient(180deg, var(--bg), var(--bg2));
}
/* Dropdown nav (details/summary) — accessible + reliable */
.navDD{ position: relative; }
.navDD > summary{
 list-style:none;
 cursor:pointer;
 color: var(--muted);
 font-weight: 850;
 padding: 8px 10px;
 border-radius: 14px;
 transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.navDD > summary::-webkit-details-marker{ display:none; }
.navDD > summary:hover{
 color: var(--text);
 background: var(--control-bg);
}
.navDD[open] > summary{
 color: var(--text);
 background: var(--control-bg-hover);
}
/* Dropdown panel (desktop) */
.ddMenu{
 position:absolute;
 top: calc(100% + 10px);
 left: 0;
 min-width: 260px;
 max-width: min(360px, calc(100vw - 32px));
 padding: 10px;
 border-radius: 18px;
 border: 1px solid var(--line2);
 background: var(--dropdown-bg);
 box-shadow: var(--shadow);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 display:none;
 z-index: 9999; /* ensure links are clickable above other header UI */
}
:root[data-theme="light"] .ddMenu{ background: var(--dropdown-bg); }
.navDD[open] .ddMenu{ display:block; animation: fwlDDIn 140ms var(--ease) both; }

@keyframes fwlDDIn{
 from{ opacity:0; transform: translateY(6px) scale(.98); }
 to{ opacity:1; transform: translateY(0) scale(1); }
}
/* Right-align last dropdown so it doesn't overflow the viewport */
#siteNav details.navDD:last-of-type > .ddMenu,
.nav details.navDD:last-of-type > .ddMenu{
 left: auto;
 right: 0;
}
.ddList{
 list-style:none;
 margin:0;
 padding:0;
}
.ddLi{ display:block; margin:0; padding:0; }
.ddLi + .ddLi{ margin-top: 6px; }
.ddMenu a{
 display:block;
 width: 100%;
 padding: 10px 12px;
 border-radius: 14px;
 color: rgba(238,241,255,.88);
 font-weight: 850;
 line-height: 1.2;
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: normal;
 -webkit-hyphens: auto;
 hyphens: auto;
 text-wrap: pretty;
}
:root[data-theme="light"] .ddMenu a{ color: rgba(11,16,32,.88); }
.ddMenu a:hover{
 background: var(--control-bg);
 color: var(--text);
}
/* Mobile: dropdown becomes inline accordion inside the mobile nav */
@media (max-width: 1120px){
 .navDD{ width:100%; }
 .navDD > summary{ width:100%; padding: 12px 10px; }
 .ddMenu a{ padding: 12px 12px; }
 .ddMenu{
 position: static;
 margin-top: 8px;
 max-width: none;
 background: var(--chip-bg);
 border: 1px solid var(--line);
 box-shadow: none;
 }
}

/* v54 FIX: Mobile dropdown panels should not have their own scroll container.
   Let the main mobile nav scroll, otherwise long menus (Company/Legal) get clipped. */
@media (max-width: 1120px){
  .ddMenu{
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y;
  }
  /* Make sure the fixed mobile nav can always scroll to the last item */
  .nav{
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    touch-action: pan-y;
  }
}

/* Mobile: ensure dropdown panels never force overflow */
@media (max-width: 1120px){
 .ddMenu{ min-width: 0; width: 100%; }
}
/* UX360 PATCH */
.nav a.active, .nav summary.active {
 background: var(--control-bg);
 border-color: var(--line2);
}
.ddMenu a.active {
 background: var(--control-bg);
 border-color: var(--line2);
}
/* make status more noticeable without changing brand copy */
[data-fwl-status]{ margin-top:10px; white-space: pre-line; }
/* Make form status messages clearly visible (success/error/hint) */
[data-fwl-status="ok"]{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(97,255,214,.35);
  background: rgba(97,255,214,.10);
  font-weight: 750;
  font-size: 14px;
  line-height: 1.35;
}
[data-fwl-status="err"]{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,107,107,.35);
  background: rgba(255,107,107,.08);
  color: var(--danger);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
}
[data-fwl-status="hint"], [data-fwl-status="busy"]{
  font-size: 13px;
}
/* smoother focus on dark */
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible {
 outline-color: rgba(97,255,214,.55);
}
/* UX360_AUDIT_PATCH v2 (IA + Forms + Mobile + A11y) */
/* Skip link: keyboard users jump to main */
.skipLink{
 position:absolute;
 left:-9999px;
 top: 10px;
 padding: 10px 12px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: var(--dropdown-bg);
 color: var(--text);
 z-index: 99999;
}
:root[data-theme="light"] .skipLink{ background: rgba(255,255,255,.94); }
.skipLink:focus{ left: 14px; }
/* Lock background scroll when mobile nav is open */
html.navOpen body{ overflow:hidden; }
/* Current page indicator (separate from scrollspy .active) */
.nav a.current{
 color: var(--text);
 position: relative;
}
.nav a.current::after{
 content:"";
 position:absolute;
 left:10px; right:10px; bottom:-8px;
 height:2px;
 border-radius:999px;
 background: linear-gradient(90deg, rgba(122,162,255,.9), rgba(97,255,214,.7));
 opacity:.85;
}
.nav summary.current{
 background: var(--control-bg);
 border-color: var(--line2);
}
/* Better dropdown affordance */
.navDD > summary{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 10px;
}
.navDD > summary::after{
 content:"▾";
 opacity:.65;
 transform: translateY(-1px);
}
.navDD[open] > summary::after{ transform: rotate(180deg); opacity:.85; }
/* Dropdown spacing: list items should not glue together */
.ddMenu .ddLi + .ddLi{ margin-top: 6px; }
/* Prevent dropdown panel overflow on narrow screens */
.ddMenu{ max-width: min(360px, calc(100vw - 32px)); }
/* Turnstile should not collide with CTAs */
.turnstileRow{
 width:100%;
 display:flex;
 justify-content:flex-start;
 margin: 2px 0 6px 0;
}
.turnstileRow .cf-turnstile{ max-width:100%; }
/* CTA hinting without “dead” button */
.btn.isDisabled, .btn[aria-disabled="true"]{
 opacity: .62;
 filter: saturate(.85);
}
@media (max-width: 640px){
 .btnRow{ flex-direction:column; align-items:stretch; }
 .btnRow .btn, .btnRow a.btn{ width:100%; justify-content:center; }
}
/* UX360 ADVANCED — Search / Sitemap / Status (no third-party) */
.searchBar{display:flex; gap:12px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;}
.searchInput{min-width: min(520px, 100%);}
.searchResults{display:grid; grid-template-columns: 1fr; gap:12px;}
.searchHit{display:block; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--chip-bg); box-shadow: var(--shadow2); text-decoration:none;}
:root[data-theme="light"] .searchHit{background: rgba(255,255,255,.92);}
.searchHit:hover{border-color: var(--line2); transform: translateY(-1px);}
.searchHitTop{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap;}
.searchHitTitle{font-weight: 950; letter-spacing: -0.01em;}
.searchHitUrl{margin-top:8px; font-size: 12px; color: var(--muted);}
.searchBadge{font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.22); color: rgba(238,241,255,.88);}
:root[data-theme="light"] .searchBadge{background: rgba(255,255,255,.80); color: rgba(11,16,32,.88);}
.sitemapGrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;}
.sitemapSection h2{margin-bottom:10px;}
.sitemapList{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.sitemapList li{padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--chip-bg);}
:root[data-theme="light"] .sitemapList li{background: rgba(255,255,255,.92);}
.statusGrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;}
.statusCard.statusOk{border-color: rgba(97,255,214,.40);}
.statusCard.statusBad{border-color: rgba(255,107,107,.40);}
@media (max-width: 1120px){
 .sitemapGrid{grid-template-columns: 1fr;}
 .statusGrid{grid-template-columns: 1fr;}
}
/* ------------------------------------------------------------------------- */
/* Header quick search + language toggle (no third-party) */
/* ------------------------------------------------------------------------- */
.headerSearch{
 padding: 10px 12px;
 border-radius: 16px;
 border: 1px solid var(--line);
 background: var(--control-bg);
 font-weight: 900;
}
.headerSearch:hover{ background: var(--control-bg-hover); border-color: var(--line2); }
.langToggle{
 width: 44px;
 height: 44px;
 border-radius: 16px;
 border: 1px solid var(--line);
 background: var(--control-bg);
 color: var(--text);
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight: 950;
}
.langToggle:hover{ background: var(--control-bg-hover); border-color: var(--line2); }
.langCode{ font-size: 12px; letter-spacing: .08em; }
/* ------------------------------------------------------------
 LANG DROPDOWN (EN/DE/FR/ES) — header picker (no wrap)
------------------------------------------------------------ */
.langWrap{ position: relative; display:inline-flex; align-items:center; }
.langMenu{
 position: absolute;
 top: calc(100% + 10px);
 right: 0;
 /* Compact + consistent across pages & resolutions (avoid "one page narrow, one page wide") */
 width: clamp(120px, 36vw, 160px);
 max-width: calc(100vw - 24px);
 padding: 6px;
 border-radius: 18px;
 border: 1px solid var(--line);
 background: var(--panel);
 box-shadow: var(--shadow);
 display: block;
 z-index: 10000;
}

.langMenu[hidden]{ display:none !important; }
.langWrap.open .langMenu{ display:block; }
.langItem{
 width:100%;
 display:flex;
 align-items:center;
 justify-content: flex-start;
 gap:12px;
 padding: 12px 12px;
 border-radius: 14px;
 border: 1px solid transparent;
 background: transparent;
 color: var(--text);
 font-weight: 900;
 cursor:pointer;
}
.langItem:hover{
 background: var(--control-bg-hover);
 border-color: var(--line);
}
.langItem.isActive{
 background: rgba(30,75,214,.10);
 border-color: rgba(30,75,214,.20);
}
.langItemCode{ font-size:12px; letter-spacing:.08em; opacity:.7; }
.langItemLabel{ font-size:14px; }
/* prevent header actions from wrapping (long labels) */
/* Medium desktops: tighten header spacing to avoid nav wrapping */
@media (max-width: 1320px){
 .brandTag{ display:none; }
 .brand{ min-width: 160px; }
 .nav{ gap: 6px; }
 .navDD > summary{ padding: 8px 6px; }
 .headerRight{
 display:flex;
 align-items:center;
 gap: 8px;
 flex: 0 0 auto;
 white-space: nowrap;
}
 .siteHeader .pill{ padding: 8px 9px; }
}
/* mobile: keep header actions compact */
@media (max-width: 1120px){
 .headerSearch{
 padding: 9px 10px;
 font-size: 13px;
 }
 .langToggle{
 width: 40px;
 height: 40px;
 border-radius: 14px;
 }
}
/* RTL support (UI only) */
:root.rtl body{
 direction: rtl;
}
:root.rtl .headerInner{
 direction: rtl;
}
:root.rtl .navDD > summary{
 text-align:right;
}
:root.rtl .ddMenu a{
 text-align:right;
}
:root.rtl .skipLink:focus{
 left:auto;
 right: 14px;
}
/* ============================================================
 DESIGN v6 — Contrast + polish (no heavy assets, no JS deps)
 Goal: fix light-mode readability + refine dark-mode depth.
============================================================ */
:root{
 --text-strong: #f6f7ff;
 --text-soft: var(--muted);
}
/* Links: keep inherit by default, but allow explicit .link when needed */
a.link{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a.link:hover{ text-decoration-thickness: 2px; }
/* Header + nav: ensure readable in both themes */
.siteHeader{
 background: var(--header-bg);
}
.brandTag{
 border-left-color: var(--line);
}
/* Dropdown menu card background per theme */
.ddMenu{
 background: var(--dropdown-bg);
}
:root[data-theme="light"] .ddMenu{
 background: rgba(255,255,255,.96);
}
/* Light theme: fix any leftover "dark-first" rgba whites */
:root[data-theme="light"] .brandTag,
:root[data-theme="light"] .footerTag,
:root[data-theme="light"] .footerMeta,
:root[data-theme="light"] .micro,
:root[data-theme="light"] .mLabel,
:root[data-theme="light"] .label{
 color: var(--muted);
}
:root[data-theme="light"] .nav a,
:root[data-theme="light"] .navDD > summary{
 color: rgba(11,16,32,.78);
}
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .navDD > summary:hover{
 color: rgba(11,16,32,.92);
}
:root[data-theme="light"] .nav a.current,
:root[data-theme="light"] .nav a[aria-current="page"]{
 background: rgba(11,16,32,.06);
}
:root[data-theme="light"] .themeToggle,
:root[data-theme="light"] .navToggle,
:root[data-theme="light"] .langToggle,
:root[data-theme="light"] .headerSearch,
:root[data-theme="light"] .btn{
 color: rgba(11,16,32,.90);
 border-color: var(--line);
}
/* Light inputs: clearer borders + readable placeholders */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea{
 color: rgba(11,16,32,.92);
 background: var(--input-bg);
 border-color: var(--input-border);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
 color: rgba(11,16,32,.50);
}
/* Dark mode: slightly crisper text and surfaces */
:root[data-theme="dark"] .brandTag,
:root[data-theme="dark"] .footerTag,
:root[data-theme="dark"] .footerMeta{
 color: var(--muted);
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card{
 background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
 border-color: rgba(255,255,255,.10);
}
:root[data-theme="dark"] .panel:hover,
:root[data-theme="dark"] .card:hover{
 border-color: rgba(122,162,255,.28);
}
/* Improve readability of small text blocks */
.small, .micro, .muted.small{
 line-height: 1.6;
}
/* Buttons: clearer primary */
.btn.primary{
 border-color: rgba(122,162,255,.55);
}
:root[data-theme="light"] .btn.primary{
 background: linear-gradient(135deg, rgba(30,75,214,.12), rgba(10,138,115,.10));
 border-color: rgba(30,75,214,.38);
}
/* Header action pills alignment */
.headerInner{
 gap: 10px;
}
@media (max-width: 1120px){
 .headerInner{ gap: 8px; }
}
/* ============================================================
 NEWS components (cards + list) — purely local data
============================================================ */
.newsGrid{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
.newsItem{
 display:block;
 padding: 16px;
 border-radius: var(--radius);
 border: 1px solid var(--line);
 background: var(--control-bg);
 box-shadow: var(--shadow2);
}
.newsItem:hover{
 background: var(--control-bg-hover);
 border-color: var(--line2);
}
.newsMeta{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 margin-bottom: 8px;
 color: var(--muted);
 font-size: 12.5px;
 font-weight: 850;
}
.newsTitle{
 margin: 0 0 8px 0;
 font-size: 16px;
 font-weight: 950;
 letter-spacing: -0.01em;
}
.newsSummary{
 margin:0;
 color: var(--muted);
}
@media (max-width: 1120px){
 .newsGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 1120px){ .headerNews{ display:none; } }
/* ------------------------------------------------------------
 FAQ — accessible accordion
------------------------------------------------------------ */
.faqGrid{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap:14px;
}
.faqCol{ display:flex; flex-direction:column; gap:12px; }
.faqItem{
 border: 1px solid var(--line);
 border-radius: 18px;
 background: var(--panel);
 box-shadow: var(--shadow2);
 overflow:hidden;
}
:root[data-theme="light"] .faqItem{ background: var(--panel); }
.faqItem > summary{
 list-style:none;
 cursor:pointer;
 padding: 14px 16px;
 font-weight: 900;
 letter-spacing: -0.01em;
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:12px;
 color: var(--text);
}
.faqItem > summary::-webkit-details-marker{ display:none; }
.faqItem > summary::after{
 content:"+";
 flex: 0 0 auto;
 width: 28px;
 height: 28px;
 border-radius: 12px;
 border: 1px solid var(--line);
 display:flex;
 align-items:center;
 justify-content:center;
 background: var(--control-bg);
 color: var(--text);
 opacity: .9;
 transform: translateY(1px);
}
.faqItem[open] > summary{
 background: var(--chip-bg);
}
:root[data-theme="light"] .faqItem[open] > summary{
 background: rgba(11,16,32,.04);
}
.faqItem[open] > summary::after{ content:"–"; }
.faqBody{
 padding: 0 16px 16px 16px;
 border-top: 1px solid var(--line);
}
.faqBody p{ margin: 10px 0; }
.faqBody ul{ margin: 10px 0 0 18px; }
.faqBody li{ margin: 6px 0; color: var(--muted); }
.faqBody strong{ color: var(--text); }
@media (max-width: 1120px){
 .faqGrid{ grid-template-columns: 1fr; }
}
/* ============================================================
 UX360 v8 mobile header fixes + premium readability tweaks
 - prevents horizontal scroll in header
 - keeps menu button visible (swap with search)
 ============================================================ */
body{ overflow-x:hidden; }
.headerInner{ justify-content:space-between; }
.headerRight{
 display:flex;
 align-items:center;
 gap:10px;
 flex: 0 0 auto;
 white-space: nowrap;
}
/* icon pills (Search/News) */
.srOnly{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border:0;
}
.iconPill{
 width:44px;
 height:44px;
 padding:0;
 display:inline-flex;
 align-items:center;
 justify-content:center;
}
.headerIcon{
 font-size:18px;
 line-height:1;
 transform: translateY(-.5px);
}
/* tighten header on small screens */
@media (max-width: 560px){
 .headerInner{ padding: 10px 12px; gap:8px; }
 .brand{ min-width: 0; }
 .brandText{ font-size: clamp(18px, 4.8vw, 22px); }
 .langToggle{ width:44px; height:44px; border-radius:14px; }
}
/* keep only the essentials visible on very small widths */
@media (max-width: 420px){
 .headerNews{ display:none !important; }
}
/* light mode readability: ensure action pills and nav labels are readable */
:root[data-theme="light"] .iconPill,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .langToggle{
 background: rgba(11,16,32,.05);
 border-color: rgba(11,16,32,.18);
 color: rgba(11,16,32,.90);
}
:root[data-theme="light"] .iconPill:hover,
:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .langToggle:hover{
 background: rgba(11,16,32,.08);
 border-color: rgba(11,16,32,.24);
}
/* dark mode: crisper controls without neon */
:root[data-theme="dark"] .iconPill,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .langToggle{
 background: var(--chip-bg);
 border-color: rgba(255,255,255,.14);
}
:root[data-theme="dark"] .iconPill:hover,
:root[data-theme="dark"] .pill:hover,
:root[data-theme="dark"] .langToggle:hover{
 background: rgba(255,255,255,.09);
 border-color: rgba(255,255,255,.18);
}
/* ============================================================
 UX360 v9.1 — consistency + contrast fixes
 - unify skip link class (.skip + injected .skipLink)
 - fix light-mode low-contrast leftovers (kicker, footer, sticky CTA)
 - iOS inset-area padding for sticky CTA
============================================================ */
/* Skip link: support both markup variants */
.skip, .skipLink{
 position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus, .skipLink:focus{
 left:16px; top:16px; width:auto; height:auto;
 padding:10px 12px; border-radius:14px;
 background: var(--control-bg); border:1px solid var(--line);
 z-index:999;
}
:root.rtl .skip:focus,
:root.rtl .skipLink:focus{
 left:auto;
 right:16px;
}
/* Light-mode readability: remove dark-first RGBA whites in key UI text */
.kicker{ color: var(--muted); background: var(--chip-bg); }
:root[data-theme="dark"] .kicker{ color: var(--muted); }
.sigSub{ color: var(--muted2); }
.footerLinks a{ color: var(--muted); }
.footerLinks a:hover{ color: var(--text); }
.footerContact{ color: var(--muted2); }
:root[data-theme="light"] .navToggleBar{ background: rgba(11,16,32,.82); }
/* Sticky CTA: theme-aware colors + iOS inset-area */
.stickyBtn{ color: var(--text); background: var(--control-bg); }
:root[data-theme="light"] .stickyCta{ background: rgba(255,255,255,.86); }
:root[data-theme="light"] .stickyBtn{ border-color: rgba(11,16,32,.18); }
@media (max-width: 1120px){
 .stickyCta{ bottom: 12px ; }
 body{ padding-bottom: 92px ; }
}
/* ------------------------------------------------------------
 LIGHT MODE — brighter panels/cards (readability)
------------------------------------------------------------ */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .artifact{
 background: #ffffff;
}
:root[data-theme="light"] .card.subtle{
 background: #f6f8ff;
}
:root[data-theme="light"] .siteFooter{
 background: rgba(255,255,255,.70);
}
/* ============================================================
 UX360 v10 — Mobile fit (global)
 - Prevent horizontal overflow on small screens
 - Avoid "narrow cards" by stacking dense grids earlier
 - Ensure long words/URLs in DE/FR/ES never spill out
============================================================ */
/* Safer container padding: scales with viewport */
.wrap{max-width:var(--max); margin:0 auto; width:100%; padding: clamp(16px, 4vw, 24px); }
/* Media should never force horizontal scroll */
img, svg, video, canvas{ max-width:100%; height:auto; }
/* Grid/Flex children: allow shrinking inside layout (fixes overflow) */
.card,
.panel,
.artifact,
.metric,
.artifactItem,
.snapItem,
.signal,
.newsItem,
.faqItem,
.searchHit,
.sitemapList li,
.statusCard{
 min-width: 0;
}
/* Long strings (German compounds, URLs, IDs): wrap safely instead of spilling */
.card,
.panel,
.artifact,
.metric,
.artifactItem,
.snapItem,
.signal,
.newsItem,
.faqBody,
.searchHit,
.sitemapList li,
.statusCard,
p,
li{
 overflow-wrap: anywhere;
 word-break: break-word;
 hyphens: auto;
}
/* Prevent awkward auto-hyphenation in headings/titles (e.g., Bud-get). */
h1,h2,h3,.calloutTitle,.panelTop h2,.panelTop h2 a{hyphens:none}

/*
  Heading wrap safety (v122.1)
  - Always allow safe wrapping instead of spilling.
  - Re-enable proper hyphenation specifically for German, where compounds are common.
*/
h1,h2,h3,.calloutTitle,.panelTop h2,.panelTop h2 a{
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] .calloutTitle,
html[lang="de"] .panelTop h2,
html[lang="de"] .panelTop h2 a{
  hyphens: auto;
}
/* Slightly smaller min size for DE headings on very small screens */
@media (max-width: 430px){
  html[lang="de"] h1{ font-size: clamp(34px, 7vw, 66px); }
}
/* Mobile nav labels: allow wrapping (desktop can stay nowrap) */
@media (max-width: 1120px){
 .nav a,
 .nav summary,
 .navDD > summary{
 white-space: normal;
 }
}
/* Small phones: stack dense grids to avoid skinny cards */
@media (max-width: 560px){
 .metricGrid,
 .artifactGrid,
 .signalRow,
 .snapshotGrid{
 grid-template-columns: 1fr;
 }
 /* Hero CTAs: full-width feels more premium and prevents truncation */
 .ctaRow{ flex-direction: column; align-items: stretch; }
 .ctaRow .btn{ width:100%; justify-content:center; }
 /* Search card header: allow wrapping of title + badge */
 .searchHitTop{ flex-wrap: wrap; }
 /* Slightly tighter vertical rhythm on tiny screens */
 .section{ padding: 34px 0; }
 .hero{ padding: 26px 0 8px; }
}
/* Header Contact (desktop): keep header single-line in long-label locales.
 - We render a dedicated Contact pill in headerRight.
 - We keep the nav Contact link for the mobile overlay menu. */
:root.hasHeaderContact #siteNav .navContact{ display:none; }
:root.hasHeaderContact
@media (max-width: 1120px){
 :root.hasHeaderContact #siteNav .navContact{ display:block; }
 :root.hasHeaderContact
}
html[lang="de"] .nav{ gap: 6px; }
html[lang="fr"] .nav{ gap: 8px; }
html[lang="de"] .nav summary, html[lang="fr"] .nav summary,
html[lang="de"] .nav a, html[lang="fr"] .nav a{ letter-spacing: 0; }
/* Header CTAs: keep key actions visible in the header on desktop, without breaking responsive layout */
.pill.primary{
 background: linear-gradient(135deg, rgba(122,162,255,.62), rgba(97,255,214,.22));
 border-color: rgba(122,162,255,.30);
 color: var(--text);
}
.pill.primary:hover{
 background: linear-gradient(135deg, rgba(122,162,255,.72), rgba(97,255,214,.26));
 border-color: rgba(122,162,255,.38);
}
/* Injected via main.js (kept hidden on mobile by CSS) */
.headerLogin,
.headerContact,
.headerSchedule,
.headerAccess{
 display:none;
 height:44px;
 align-items:center;
 white-space: nowrap;
}
/* Header action ordering (desktop + mobile):
 Right side priority (from right): Login, Contact, Language, Menu, Theme. */
.headerRight .headerSchedule{ order: 75; }
.headerRight .headerAccess{ order: 76; }
.headerRight .headerNews{ order: 70; }
 /* hamburger: before language on mobile */
 /* day/night: just left of hamburger */
/* Login button styling (pill) */
.headerLogin{
 font-weight: 800;
 text-decoration:none;
}
.headerLogin:hover{
 background: var(--control-bg-hover);
}
/* Desktop: show header actions in all locales (labels are handled via i18n) */
@media (min-width: 1121px){
 .headerLogin,
 .headerContact,
 .headerSchedule,
 .headerAccess{ display:inline-flex; }
}
/* Long-label safety: reduce overflow risk inside the 1320px header container */
@media (min-width: 1121px) and (max-width: 1600px){
 html[lang^="de"] .brandTag{ display:none; }
 html[lang^="de"] .brand{ min-width: 160px; }
 html[lang^="de"] .navDD > summary{ padding: 8px 6px; }
}
/* Mobile header stays compact; login/schedule/access remain reachable via menu */
@media (max-width: 1120px){
 .headerLogin,
 .headerContact,
 .headerSchedule,
 .headerAccess{ display:none; }
}
/* CSP-inset inline-style replacements (utility helpers) */
.u-mt6{ margin-top:6px !important; }
.u-mt10{ margin-top:10px !important; }
.u-mt12{ margin-top:12px !important; }
.u-mt14{ margin-top:14px !important; }
.u-m0{ margin:0 !important; }
.u-m6_0_10{ margin:6px 0 10px !important; }
.u-as-center{ align-self:center !important; }
/* ------------------------------------------------------------
 Updates / Articles (local, no external dependencies)
------------------------------------------------------------ */
.post{ display:block; }
.postTop{ }
.postKicker{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.postMetaLeft{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.postMetaRight{ display:flex; gap:10px; flex-wrap:wrap; }
.lede{ font-size: 1.05rem; line-height: 1.55; }
.tagRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tagPill{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line2); font-size: 0.85rem; }
.refBox{ }
.refList{ padding-left: 18px; margin: 10px 0 0; }
.refList li{ margin: 6px 0; }
.prevNext{ display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.prevNext a{ flex:1; min-width: 240px; text-decoration:none; border:1px solid var(--line2); border-radius:16px; padding:12px; }
.prevNext .pnK{ display:block; font-size:0.85rem; color: var(--muted); margin-bottom:4px; }
.prevNext .pnT{ display:block; font-weight: 600; }
.newsFilters{ margin: 14px 0; }
.tagFilters{ display:flex; flex-wrap:wrap; gap:8px; }
.tagChip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line2); border-radius:999px; padding:6px 10px; font-size:0.9rem; cursor:pointer; user-select:none; }
.tagChip[aria-pressed="true"]{ border-color: var(--line); }
.tagChip:focus{ outline: 2px solid var(--focus); outline-offset: 2px; }
/* Update filters */
.catFilters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.postCta{ }
/* ------------------------------------------------------------------ */
/* Article breadcrumbs + trust strip (local-only, no external deps) */
/* ------------------------------------------------------------------ */
.crumbs{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:6px;
 margin:0 0 10px 0;
}
.crumb{ text-decoration:none; }
.crumbSep{ opacity:.55; }
.crumbCurrent{ font-weight:600; }
.trustStrip{
 margin-top:12px;
 padding-top:10px;
 border-top:1px solid rgba(0,0,0,.12);
}
html[data-theme="dark"] .trustStrip{
 border-top:1px solid rgba(255,255,255,.18);
}
/* Header action ordering (best-practice across mobile/tablet/desktop)
 LTR: higher order appears further right.
 Desktop/Tablet (navToggle hidden): Login (rightmost) > Contact > Theme > Language
 Mobile (Login/Contact hidden): Menu (rightmost) > Theme > Language
*/
.headerRight .langToggle{ order:60; }
.headerRight .themeToggle{ order:70; }
.headerRight .navToggle{ order:80; }
.headerRight .headerContact{ order:90; }
.headerRight .headerLogin{ order:100; }
/* Global hamburger navigation (desktop + tablet + mobile)
 Intent: keep the same menu interaction everywhere.
 - Menu button always visible.
 - Nav drawer opens when html.navOpen is set by main.js.
*/
.navToggle{ display:block; }
.siteHeader .nav{
 position: fixed;
 flex: 0 0 auto;
 top: 72px;
 z-index: 60;
 background: var(--menu-bg);
 backdrop-filter: blur(14px);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 14px;
 padding-bottom: 14px;
 display: none;
 box-shadow: var(--shadow);
 max-height: calc(100vh - 84px);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 /* Desktop: keep the drawer comfortably narrow + centered */
 width: min(980px, calc(100vw - 24px));
 left: 50%;
 transform: translateX(-50%);
}
@media (max-width: 1120px){
 .siteHeader .nav{
 left: 12px;
 right: 12px;
 width: auto;
 transform: none;
 }
}
.navOpen .siteHeader .nav{ display:block; }
/* Global dropdown-as-accordion for drawer nav (matches mobile behavior) */
.navDD{ width:100%; }
.navDD > summary{ width:100%; padding: 12px 10px; }
.ddMenu a{ padding: 12px 12px; }
.ddMenu{
 position: static;
 margin-top: 8px;
 max-width: none;
 background: var(--chip-bg);
 border: 1px solid var(--line);
 box-shadow: none;
}
/* --- Action Guide blocks (TL;DR, Timeline cards, Segmentation) --- */
.tldrBox{
 border-left: 4px solid var(--accent);
}
.tldrBox .h3{ margin:0; }
.tldrBox .bullets{ margin-top:10px; }
.timelineGrid{
 display:grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
 margin-top: 12px;
}
.timelineCard{
 border:1px solid var(--line);
 background: var(--panel2);
 border-radius: calc(var(--radius) - 2px);
 padding: 12px;
}
.timelineCard .tDate{
 font-weight: 700;
 letter-spacing: .2px;
}
.timelineCard .tLabel{
 margin-top: 6px;
 line-height: 1.35;
}
.choiceGrid{
 display:grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 margin-top: 12px;
}
.choiceCard{
 display:block;
 border:1px solid var(--line);
 background: var(--panel2);
 border-radius: calc(var(--radius) - 2px);
 padding: 14px;
 text-decoration:none;
}
.choiceCard:hover{ transform: translateY(-1px); }
.choiceCard .cTitle{ font-weight: 800; }
.choiceCard .cBody{ margin-top: 6px; line-height: 1.35; }
.choiceCard .cHint{ margin-top: 10px; font-size: 12px; opacity: .75; }
.miniCtaRow{
 display:flex;
 flex-wrap:wrap;
 gap: 10px;
 margin-top: 12px;
}
@media (max-width: 860px){
 .timelineGrid{ grid-template-columns: 1fr; }
 .choiceGrid{ grid-template-columns: 1fr; }
}
/* --- end action guide blocks --- */
/* -------------------------------------------------------------------------
 Utility bar + floating CTA (conversion & trust; lightweight)
 ------------------------------------------------------------------------- */
.utilityBar{
 border-bottom: 1px solid var(--line);
 background: var(--header-bg);
}
.utilityInner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 14px;
 padding: 8px 18px;
 max-width: 1320px;
 margin: 0 auto;
}
.utilLeft{
 display:flex;
 align-items:center;
 gap: 10px;
 min-width: 0;
}
.utilRight{ display:flex; align-items:center; gap: 10px; }
.utilLink{
 display:inline-flex;
 align-items:center;
 gap: 8px;
 color: var(--muted);
 font-weight: 750;
 font-size: 13px;
 text-decoration: none;
 white-space: nowrap;
}
.utilLink:hover{ color: var(--text); }
.utilIcon{ opacity: .85; }
.utilMono{
 font-variant-numeric: tabular-nums;
 font-feature-settings: "tnum" 1;
 opacity: .95;
}
.utilSep{ opacity: .5; }
.utilCta{
 display:inline-flex;
 align-items:center;
 gap: 8px;
 font-weight: 850;
 color: var(--text);
 box-shadow: var(--shadow2);
}
.floatingCTA{
 position: fixed;
 right: 16px;
 bottom: 16px;
 z-index: 40;
 display: flex;
 align-items: center;
 gap: 10px;
}
.floatingCTA.isHidden{ opacity: 0; pointer-events: none; transform: translateY(6px); }
.floatingCtaBtn{
 display:inline-flex;
 align-items:center;
 gap: 10px;
 padding: 11px 14px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--btn-primary-bg, var(--accent));
 color: var(--btn-primary-text, #0b0c10);
 font-weight: 900;
 text-decoration:none;
 box-shadow: var(--shadow2);
}
.floatingCtaBtn:hover{ transform: translateY(-1px); }
.floatingCtaIcon{ opacity: .95; }
.floatingCtaClose{
 width: 34px;
 height: 34px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--control-bg);
 color: var(--text);
 font-weight: 900;
 box-shadow: var(--shadow2);
 cursor: pointer;
}
.floatingCtaClose:hover{ transform: translateY(-1px); }
@media (max-width: 780px){
 .utilityInner{ padding: 8px 14px; }
 .utilLabel, .utilSep{ display:none; }
 .utilMono{ opacity: .9; }
}
@media (max-width: 520px){
 .utilMono{ display:none; }
 .utilCtaText{ display:none; }
 .floatingCtaText{ display:none; }
}
@media (prefers-reduced-motion: reduce){
 .floatingCTA, .floatingCTA *{ transition: none !important; }
 .floatingCtaBtn:hover, .floatingCtaClose:hover{ transform: none; }
}
/* -------------------------------------------------------------------------
 Stepper + subscribe mini form (Swissdamed action pages)
 ------------------------------------------------------------------------- */
.stepper{
 list-style: none;
 padding: 0;
 margin: 12px 0 0;
 display: grid;
 gap: 10px;
}
.stepper .step{
 display: grid;
 grid-template-columns: 34px 1fr;
 gap: 12px;
 border: 1px solid var(--line);
 background: var(--panel2);
 border-radius: calc(var(--radius) - 2px);
 padding: 12px;
}
.stepper .stepNum{
 width: 34px;
 height: 34px;
 border-radius: 999px;
 display: grid;
 place-items: center;
 font-weight: 900;
 background: var(--chip-bg);
 border: 1px solid var(--line);
}
.stepper .stepTitle{ font-weight: 850; line-height: 1.2; }
.stepper .stepText{ margin-top: 6px; line-height: 1.35; opacity: .92; }
.stepperCompact .step{ padding: 10px; }
.subscribePanel .subRow{
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 10px;
}
.subscribePanel input[type="email"]{
 flex: 1 1 220px;
 min-width: 180px;
 padding: 10px 12px;
 border-radius: calc(var(--radius) - 4px);
 border: 1px solid var(--line);
 background: var(--panel2);
 color: var(--text);
}
.subscribePanel input[type="email"]:focus{
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
.subscribePanel .subNote{ margin-top: 8px; }
.subscribePanel .subStatus{ margin-top: 8px; }
/* -----------------------------------------------------------------------
 v34: Hide duplicate "Book a call" in the SECOND header row (.headerRight).
 The primary CTA lives in the top utility bar.
 ----------------------------------------------------------------------- */
.siteHeader .headerRight .headerSchedule,
.siteHeader .headerRight a[href="/schedule.html"],
.siteHeader .headerRight a[href="/schedule"],
.siteHeader .headerRight a[href^="/schedule"],
.siteHeader .headerRight a[data-i18n="nav.book_call"],
.siteHeader .headerRight a[data-i18n="ui.cta_book_call"],
.siteHeader .headerRight button[data-i18n="nav.book_call"],
.siteHeader .headerRight button[data-i18n="ui.cta_book_call"]{
 display:none !important;
}
/* === Operating Layer blocks (High-level, High-level) === */
.fwl-ol{border:1px solid var(--line2);border-radius:14px;padding:18px;margin:18px 0;background:var(--panel)}
.fwl-ol h3{margin:0 0 8px 0}
.fwl-ol p{margin:8px 0}
.fwl-ol-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
@media (max-width:900px){.fwl-ol-grid{grid-template-columns:1fr}}
.fwl-ol-step{border:1px dashed var(--line);border-radius:12px;padding:12px;min-height:72px;background:transparent}
.fwl-ol-step small{opacity:.85;display:block;margin-top:6px}
.fwl-ol-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
@media (max-width:900px){.fwl-ol-kpis{grid-template-columns:1fr}}
.fwl-ol-kpi{border:1px solid var(--line2);border-radius:12px;padding:12px;background:transparent}
.fwl-ol-kpi strong{display:block;margin-bottom:4px}

/* IA/Nav: keep top-level menu labels on one line where possible */
.navDD summary span{white-space:nowrap;}

/* IA/Nav v2: modern spacing + prevent awkward wraps */
.navDD summary span{white-space:nowrap;}
.ddMenu{min-width:260px;}
.ddList{padding:8px;}
.ddLi{margin:2px 0;}

.headerLeftControls{display:flex; align-items:center; gap:8px; white-space:nowrap;}
/* On small screens, keep left controls visible */
@media (max-width: 900px){
  .headerLeft{gap:10px;}
}

/* Header v5: place theme + menu after Search */
.headerRight .themeToggle,
.headerRight .navToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-width:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.65);
}

/* Fix: hamburger icon broke when navToggle became flex (bars went side-by-side).
   Keep bars stacked + centered, consistently across pages. */
/* Upgrade: bigger, clearer hamburger icon (touch-friendly + visible) */
:root{
  --navToggleSize: 46px;
  --navBarW: 26px;
  --navBarH: 3px;
  --navBarGap: 6px;
}
@media (max-width: 420px){
  :root{
    --navToggleSize: 50px;
    --navBarW: 28px;
    --navBarH: 3px;
    --navBarGap: 7px;
  }
}
.headerRight .navToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--navToggleSize);
  height: var(--navToggleSize);
  flex-direction: column;
  gap: var(--navBarGap);
}
.headerRight .navToggle .navToggleBar{
  margin:0;
  width: var(--navBarW);
  height: var(--navBarH);
  opacity:.92;
}

html[data-theme="dark"] .headerRight .themeToggle,
html[data-theme="dark"] .headerRight .navToggle{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,22,28,.55);
}

/* Header v6: pro ordering + consistent control sizing */
.headerRight{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
.headerRight .langToggle{height:44px; min-width:54px; border-radius:999px;}

/* Header v7: enforce professional order via flex 'order' (resists JS/DOM reshuffles) */
.headerRight{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
/* Desired visual order:
   1 Search  2 News  3 Theme  4 Menu  5 Language  6 Sign in  7 Contact options
*/
.headerRight a.headerSearch[href="/search.html"]{order:1;}
.headerRight a.headerNews{order:2;}
.headerRight .themeToggle{order:3;}
.headerRight .navToggle{order:4;}
.headerRight .langToggle{order:5;}
.headerRight a.headerLogin{order:6;}
.headerRight a.headerContact{order:7;}

/* Header v8: icon-only Search/News pills */
.headerRight a.headerSearch{padding-left:14px; padding-right:14px;}
.headerRight a.headerSearch span[aria-hidden="true"]{margin:0;}

/* Header v9: nav taxonomy cleanup (Publications moved out of Proof) */

/* Menu separation v10: clearer parent vs submenu surfaces */
.navDD[open] > summary{
 box-shadow: 0 0 0 1px var(--line) inset;
}
@media (max-width: 1120px){
 .navDD[open] > summary{
  background: var(--control-bg-hover);
 }
 .ddMenu a{ background: transparent; }
}


/* Menu separation v12: strong, unmistakable parent vs submenu separation (mobile nav) */
@media (max-width: 1120px){
  /* Give the whole mobile menu its own surface */
  nav#siteNav.nav{
    background: var(--menu-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 10px;
  }

  /* Each top-level group looks like a distinct row/card */
  .navDD{ margin: 6px 0; }
  .navDD > summary{
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .navDD[open] > summary{
    background: var(--control-bg-hover);
    border-color: var(--line2);
  }

  /* Submenu becomes a clearly nested card with accent rail */
  .ddMenu{
    background: var(--dropdown-bg) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow2) !important;
    border-radius: 16px !important;

    margin-top: 10px !important;
    margin-bottom: 12px !important;
    margin-left: 16px !important;
    margin-right: 6px !important;

    padding: 10px !important;

    border-left: 4px solid var(--accent) !important;
  }

  /* Add a subtle divider after submenu so the next top-level item never looks like continuation */
  .navDD[open] .ddMenu::after{
    content: "";
    display: block;
    height: 10px;
  }

  /* Make submenu items slightly smaller to signal hierarchy */
  .ddMenu a{
    font-weight: 750;
  }
}


/* =========================================================
   Menu separation v13 (expert):
   Goal: make hierarchy unmistakable even when surfaces are similar.
   Technique: nested "card-in-card" + connector + separators + theme-aware submenu background.
   ========================================================= */
@media (max-width: 1120px){
  /* Theme-aware submenu background token */
  :root{ --submenu-bg: var(--input-bg); }
  html[data-theme="dark"]{ --submenu-bg: var(--panel2); }

  /* Mobile nav becomes a stack of cards */
  nav#siteNav.nav{
    background: var(--menu-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 10px;
    overflow: hidden; /* prevents ddMenu shadows from blending with next items */
  }

  /* Top-level items: card rows with clear separators */
  nav#siteNav .navDD{
    margin: 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  nav#siteNav .navDD:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }

  nav#siteNav .navDD > summary{
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  nav#siteNav .navDD[open] > summary{
    background: var(--control-bg-hover);
    border-color: var(--line2);
  }

  /* Submenu: nested card-in-card */
  nav#siteNav .navDD[open] .ddMenu{
    position: static !important;
    display:block !important;

    background: var(--submenu-bg) !important;
    border: 1px solid var(--line2) !important;
    border-radius: 16px !important;

    margin-top: 10px !important;
    margin-left: 18px !important;
    margin-right: 2px !important;
    padding: 10px !important;

    box-shadow: var(--shadow2) !important;

    /* Visual hierarchy cues */
    border-left: 4px solid var(--accent) !important;
  }

  /* Connector "stem" from parent to child (prevents eye from thinking it's a continuation) */
  nav#siteNav .navDD[open] .ddMenu::before{
    content:"";
    display:block;
    width: 18px;
    height: 10px;
    margin-left: -18px; /* align with indent */
    margin-top: -6px;
    border-left: 4px solid var(--accent);
    border-bottom: 1px solid var(--line2);
    border-bottom-left-radius: 10px;
    opacity: .85;
  }

  /* Submenu items: slightly smaller + clearer hover */
  nav#siteNav .ddMenu a{
    padding: 12px 12px;
    border-radius: 12px;
    font-weight: 780;

    /* Mobile wrap fix (Publications titles can be long):
       - prevent horizontal overflow
       - allow clean line breaks
       - hyphenate where supported */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
  }
  nav#siteNav .ddMenu a:hover{
    background: var(--chip-bg-hover);
  }

  /* Explicit spacing after submenu so next top-level never reads as "more items" */
  nav#siteNav .navDD[open] .ddMenu::after{
    content:"";
    display:block;
    height: 10px;
  }
}


/* =========================================================
   Menu separation v14 (neutral surfaces, NO page tinting):
   - Do NOT touch page background
   - Submenu uses neutral (non-blue) surfaces in both themes
   - Separation via border + shadow + backdrop blur + spacing (not color wash)
   ========================================================= */
@media (max-width: 1120px){
  /* Neutral submenu surface tokens (override prior v10–v13) */
  :root{ --submenu-surface: rgba(255,255,255,.98); --submenu-border: rgba(11,16,32,.18); }
  html[data-theme="dark"]{ --submenu-surface: rgba(18,20,26,.96); --submenu-border: rgba(255,255,255,.16); }

  /* Keep nav container as-is (no extra tint). Only subtle outline for structure. */
  nav#siteNav.nav{
    background: var(--menu-bg) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
  }

  /* Parent rows: structure via border, not color flooding */
  nav#siteNav .navDD > summary{
    background: transparent !important;
    border: 1px solid var(--line) !important;
  }
  nav#siteNav .navDD[open] > summary{
    background: transparent !important;
    border-color: var(--line2) !important;
  }

  /* Submenu: neutral surface card-in-card (no blue wash) */
  nav#siteNav .navDD[open] .ddMenu{
    background: var(--submenu-surface) !important;
    border: 1px solid var(--submenu-border) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Hierarchy: indent + rail + spacing */
    margin-left: 18px !important;
    margin-right: 2px !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;

    border-left: 4px solid var(--accent) !important;
  }

  /* Connector: keep it, but make it subtle and neutral */
  nav#siteNav .navDD[open] .ddMenu::before{
    opacity: .55 !important;
    border-bottom-color: var(--submenu-border) !important;
  }

  /* Ensure next top-level never reads as continuation */
  nav#siteNav .navDD{ border-bottom-color: var(--line) !important; }
}


select{
 width:100%;
 max-width:100%;
 padding: 12px 12px;
 border-radius: 14px;
 border: 1px solid rgba(255,255,255,.12);
 background: var(--chip-bg);
 color: var(--text);
 outline: none;
 box-sizing: border-box;
}
select[multiple]{
 height:auto;
 min-height: 124px;
}


/* --- UDI path finder: mobile + overflow hardening (v25) --- */
@media (max-width: 820px){
  .formGrid{ grid-template-columns: 1fr !important; }
  .span2{ grid-column: 1 / -1; }
  .btnRow{ flex-direction: column; align-items: stretch; }
  .btnRow .btn, .btnRow a.btn{ width: 100%; justify-content: center; }
  select, input, textarea{ max-width: 100%; }
  select[multiple]{ width: 100%; min-height: 140px; }
  .card{ overflow: hidden; }
}

/* --- UDI path finder: multi-target chips (scoped, safe) (v42) --- */
#udi-path-finder .pfTargets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background: var(--chip-bg);
  max-width: 100%;
}
#udi-path-finder .pfChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: var(--control-bg);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  font-weight: 750;
  max-width: 100%;
}
#udi-path-finder .pfChip:hover{ background: var(--control-bg-hover); }
#udi-path-finder .pfChip input{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
}
#udi-path-finder .pfChip.isOn{
  border-color: rgba(122,162,255,.55);
  box-shadow: 0 0 0 4px rgba(122,162,255,.12);
}
@media (max-width: 820px){
  #udi-path-finder .pfChip{ width:100%; justify-content:flex-start; }
}

/* Emoji flags: prefer color-emoji fonts when available (safe, tiny) */
.icon{
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* --- Pathfinder: modern high-class polish (scoped) (v43) --- */
#udi-path-finder{
  position: relative;
  overflow: hidden;
}
#udi-path-finder::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.65;
  background:
    radial-gradient(700px circle at 18% -10%, rgba(122,162,255,.22), transparent 55%),
    radial-gradient(650px circle at 92% 8%, rgba(97,255,214,.14), transparent 60%),
    radial-gradient(540px circle at 40% 110%, rgba(122,162,255,.10), transparent 55%);
}
#udi-path-finder > *{ position: relative; }

#udi-path-finder .h3{
  letter-spacing: -0.35px;
}
#udi-path-finder .label{
  letter-spacing: .2px;
}
#udi-path-finder select,
#udi-path-finder input[type="text"],
#udi-path-finder textarea{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}
#udi-path-finder select:focus,
#udi-path-finder input:focus,
#udi-path-finder textarea:focus{
  box-shadow: 0 0 0 4px rgba(122,162,255,.14);
  border-color: rgba(122,162,255,.55);
}

/* Pathfinder: make form controls visibly framed in LIGHT theme too
   (v43 polish was dark-first and looked borderless on desktop light mode). */
:root[data-theme="light"] #udi-path-finder select,
:root[data-theme="light"] #udi-path-finder input[type="text"],
:root[data-theme="light"] #udi-path-finder textarea{
  border-color: rgba(11,16,32,.30);
  background: rgba(255,255,255,.96);
  box-shadow: inset 0 0 0 1px rgba(11,16,32,.08);
}
:root[data-theme="light"] #udi-path-finder select:focus,
:root[data-theme="light"] #udi-path-finder input:focus,
:root[data-theme="light"] #udi-path-finder textarea:focus{
  box-shadow: 0 0 0 4px rgba(30,75,214,.12);
  border-color: rgba(30,75,214,.42);
}

#udi-path-finder .formGrid{ gap:16px; }

#udi-path-finder .pfTargets{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.12);
}
#udi-path-finder .pfChip{
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
#udi-path-finder .pfChip:hover{ transform: translateY(-1px); }
#udi-path-finder .pfChip:focus-within{
  box-shadow: 0 0 0 4px rgba(122,162,255,.12);
  border-color: rgba(122,162,255,.55);
}
#udi-path-finder .pfChip input{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.08);
  display: grid;
  place-items: center;
}
#udi-path-finder .pfChip input:checked{
  border-color: rgba(122,162,255,.65);
  background: linear-gradient(135deg, rgba(122,162,255,.75), rgba(97,255,214,.22));
}
#udi-path-finder .pfChip input:checked::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: rgba(11,18,32,.85);
}

/* Optional chip icons (flags) */
#udi-path-finder .pfIcon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
#udi-path-finder .pfFlag{
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  display:block;
}
html[data-theme="dark"] #udi-path-finder .pfFlag{ box-shadow: 0 0 0 1px rgba(255,255,255,.16); }

/* Pathfinder flags: bigger + always visible (desktop & mobile) */
#udi-path-finder .pfIcon{
  width: 30px;
  height: 22px;
  border-radius: 8px;
  padding: 2px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.16);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
html[data-theme="dark"] #udi-path-finder .pfIcon{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
#udi-path-finder .pfFlag{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Pathfinder chips: ensure borders/backgrounds stay visible in LIGHT theme */
:root[data-theme="light"] #udi-path-finder .pfTargets{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,16,32,.16);
}
:root[data-theme="light"] #udi-path-finder .pfChip{
  background: rgba(255,255,255,.86);
  border-color: rgba(11,16,32,.14);
}
:root[data-theme="light"] #udi-path-finder .pfChip input{
  border-color: rgba(11,16,32,.22);
  background: rgba(255,255,255,.95);
}
:root[data-theme="light"] #udi-path-finder .pfChip input:checked::after{
  background: rgba(11,16,32,.85);
}

/* Result panel: less "dashed callout", more premium card */
#udiPathResult{
  border-style: solid;
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
}
:root[data-theme="light"] #udiPathResult{
  border-color: rgba(11,16,32,.16);
  background: rgba(255,255,255,.92);
}
#udiPathResult .calloutTitle{
  font-size: 16px;
  letter-spacing: -0.25px;
}
#udiPathResult.pfPre{ opacity:0; transform: translateY(10px); }
#udiPathResult.pfShown{ opacity:1; transform: translateY(0); transition: opacity .22s ease, transform .22s ease; }

html.langOpen .langMenu{ display:block; }



/* UX FIX v51 — Mobile nav dropdown: ensure all items are reachable (scrollable panels + dynamic viewport) */
@media (max-width: 980px){
  /* Use dynamic viewport height when available to avoid address-bar clipping */
  .nav{ max-height: calc(100dvh - 84px); }
  /* Make each dropdown panel independently scrollable in case the outer nav scroll is awkward on touch */
  .navDD > .ddMenu{
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Provide a little breathing room so last items are not hidden under rounded corners */
  .nav{ padding-bottom: 18px; }
}


/* =========================================================
   UX FIX v56 — Mobile nav: eliminate nested scroll + prevent clipping
   Root causes fixed:
   - nav#siteNav had overflow:hidden later in file (clips long dropdowns)
   - ddMenu had its own max-height/overflow (nested scroll + hidden items)
   - stickyCta could overlap last items
   ========================================================= */
@media (max-width: 1120px){
  /* Outer nav must be the single scroll container */
  nav#siteNav.nav,
  .siteHeader nav#siteNav.nav,
  .nav{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100dvh - 84px) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* Dropdown panels must not create their own scroll area */
  nav#siteNav .navDD > .ddMenu,
  .navDD > .ddMenu{
    max-height: none !important;
    overflow: visible !important;
  }

  /* Prevent sticky CTA from covering menu content when nav is open */
  html.navOpen .stickyCta{ display:none !important; }
  html.navOpen body.hasStickyCta{ padding-bottom: 0 !important; }
}



/* ===== Update page UX tweaks (v62) ===== */
.postMeta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.postMetaRight{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap}
.shareDD{position:relative}
.shareDD > summary.btn{list-style:none; cursor:pointer}
.shareDD > summary::-webkit-details-marker{display:none}
.shareDD[open] > summary.btn{border-color:var(--line2)}
.shareDD .shareMenu{
  position:absolute; right:0; top:calc(100% + 10px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  min-width:180px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  z-index:80;
}
.shareDD .shareMenu .btn{width:100%; justify-content:flex-start}
@media (max-width:720px){
  .shareDD .shareMenu{right:auto; left:0; min-width: 160px}
}

/* TL;DR as collapsible */
.tldrDetails > summary{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tldrDetails > summary{cursor:pointer; user-select:none}
.tldrDetails > summary::-webkit-details-marker{display:none}
.tldrDetails > summary:after{content:"▾"; opacity:.75; transition:transform .15s ease}
.tldrDetails[open] > summary:after{transform:rotate(180deg)}



/* v65 UX tidy: demote tertiary links inside callouts */
.inlineLink.ddItem{
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  text-decoration: underline;
  font-weight: 650;
}
.inlineLink.ddItem:hover{
  text-decoration-thickness: 2px;
}


/* ===== UX Stability Patch v75 (grid min-content shrink + nested grids) ===== */
.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.grid2 > *{min-width:0;}
/* Avoid tiny vertical text when nested grids appear inside a constrained column */
.timelineGrid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.cards4{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.timelineCard, .cards4 > *, .timelineGrid > *{min-width:0;}
/* Make long tokens wrap nicely instead of forcing min-content overflow */
.timelineCard, .panel{overflow-wrap:anywhere; word-break:break-word;}
/* Responsive fallbacks */
@media (max-width: 980px){
  .timelineGrid{grid-template-columns:1fr;}
  .cards4{grid-template-columns:1fr;}
}

/* ===== UX Stability Patch v77 (responsive grids + no more squished cards) ===== */
/* 1) Three-column cards should never collapse into unreadable slivers */
.cards3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cards3 > *{ min-width:0; }

/* 2) Four-column utility grids: make them elastic + phone-friendly */
.artifactGrid,
.snapshotGrid,
.signalRow{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.artifactGrid > *,
.snapshotGrid > *,
.signalRow > *{ min-width:0; }

@media (max-width: 560px){
  .artifactGrid,
  .snapshotGrid,
  .signalRow{
    grid-template-columns: 1fr;
  }
}

/* 3) Cards4: raise the minimum so text doesn’t turn into micro-poetry */
.cards4{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* 4) Timeline: keep readable minimums; stack earlier on tighter tablets */
.timelineGrid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 1040px){
  .timelineGrid{ grid-template-columns: 1fr; }
}

/* 5) Ensure any grid item is allowed to shrink (prevents min-content overflow) */
.grid2 > *,
.cards4 > *,
.cards3 > *,
.timelineGrid > *{
  min-width: 0;
}

/* 6) Text wrapping: avoid layout breaking on long tokens/URLs */
.panel, .timelineCard, .artifactItem, .snapItem, .signal{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 7) Touch ergonomics: keep button rows wrapping cleanly */
.btnRow, .ctaRow{
  flex-wrap: wrap;
}



/* ===== Responsive hardening (v78) ===== */

/* Prevent two-column squeeze on small screens */
.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.grid2 > *{min-width:0;}
.cards3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.cards3 > *, .cards4 > *, .cards2 > *, .timelineGrid > *{min-width:0;}
/* Avoid nested-scroll traps inside dropdown/cards */
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr !important;}
}
/* Mobile: force single column for dense grids to stop vertical letter-wrapping */
@media (max-width: 720px){
  .cards3,.cards4,.cards2,.timelineGrid{grid-template-columns:1fr !important;}
  .panel,.card,.timelineCard{max-width:100%;}
}
/* Make long tokens/URLs never break layout */
.panel,.card,.timelineCard,.pill,.tag,.ddMenu,.tldrBox,.callout{overflow-wrap:anywhere; word-break:break-word;}


/* v37_4 — Header anti-overlap / i18n-safe (DE/FR labels) */
@media (max-width: 1180px){
  .siteHeader .nav{display:none;}
}
@media (max-width: 980px){
  .brandTag{display:none;}
}


/* --- Status page enhancements (v108) --- */
.statusControls{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.statusControls .btn{white-space:nowrap;}
.statusH2{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.statusPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.12);
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;
}
.statusCard.statusOk .statusPill{border-color: rgba(97,255,214,.55);}
.statusCard.statusBad .statusPill{border-color: rgba(255,107,107,.55);}
.statusDetailsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top: 10px;
}
@media (max-width: 1120px){
  .statusDetailsGrid{grid-template-columns: 1fr;}
}
.miniCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
}
.monoList{margin: 8px 0 0 0; padding-left: 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.monoList li{margin: 6px 0;}



/* --- v122 Home (DE) overflow + mobile fit hotfix --- */
/* Flex/grid children must be allowed to shrink */
.signal, .btnRow .btn, .ctaRow .btn, .tag, .jumpLink { min-width: 0; }
.btn, .tag, .jumpLink, .sigTop, .sigSub, .cardTitle { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.signal{ display:flex; gap:10px; align-items:flex-start; }
.sigIcon{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
}
.signal > div{ min-width:0; }

/* Stack button rows on small screens so long German labels never overflow */
@media (max-width: 820px){
  .btnRow{ flex-direction: column; align-items: stretch; }
  .btnRow .btn{ width:100%; white-space: normal; }
}

/* Extra-small phones: keep dense grids single-column */
@media (max-width: 560px){
  .metricGrid, .signalRow, .newsGrid{ grid-template-columns: 1fr !important; }
  .tagRow{ gap:6px; }
}


/* Credentials polish */
#credentials .credGrid{ align-items: stretch; }
#credentials .credPanel{ display:flex; flex-direction:column; }
#credentials .credPanel .btnRow{ margin-top:auto; }
#credentials .credMini{ padding:16px; }
#credentials .credMini .calloutTitle{ margin-bottom:8px; }
#credentials .credCards p{ line-height: 1.4; }
#credentials .bullets li{ line-height:1.35; }


/* Credentials: evidence anchors */
.evidenceLabel{margin:10px 0 6px}
.evidenceLinks{display:flex;flex-wrap:wrap;gap:10px}
.evidenceLinks .pill{white-space:nowrap}
@media (max-width:820px){.evidenceLinks{gap:8px}}

/* Credentials: visual polish (scan-ability + alignment) */
#credentials .credGrid{align-items:stretch}
#credentials .credPanel{display:flex;flex-direction:column}
#credentials .credPanel .btnRow{margin-top:auto}
#credentials .evidenceLabel{margin:12px 0 6px}
#credentials .evidenceLinks .pill{cursor:pointer;padding:8px 10px;font-size:13px;line-height:1}
#credentials .evidenceLinks .pill:focus-visible{outline:2px solid rgba(30,88,255,.35);outline-offset:2px}

#credentials .credCards{gap:18px}
#credentials .credMini{height:100%}
#credentials .credMini .calloutTitle{font-weight:700;letter-spacing:.01em;margin-bottom:10px}
#credentials .credMini .bullets{margin:0;padding-left:18px}
#credentials .credMini .bullets li{margin:6px 0}

/* Keep the two top panels visually balanced */
@media (min-width:980px){
  #credentials .credPanel{min-height:340px}
}

/* v37_14 patch: avoid double-padding/narrow panels when a section contains an extra .wrap (e.g., home UDI timelines). */
#main.wrap .section > .wrap{ max-width:100%; width:100%; padding:0 !important; }
#main.wrap .section > .wrap > .panel{ width:100%; }

/* =========================================================
   CTA SHAPE VARIETY (home): reduce "all-rectangles" feel
   - Keep forms/buttons stable; only style CTA rows.
   - Hero CTAs get pill + subtle "orb" accent for visual variety.
   ========================================================= */

/* Pill-style CTAs across the site (only CTA rows) */
.ctaRow .btn, .ctaRow a.btn{
  border-radius: 999px;
  padding: 12px 18px;
}

/* Hero: add a small decorative orb to the first two CTAs */
.heroHome .ctaRow{ gap: 12px; }
.heroHome .ctaRow .btn{ position: relative; }

.heroHome .ctaRow .btn.primary,
.heroHome .ctaRow .btn:not(.primary):not(.ghost){
  padding-left: 46px;
}

.heroHome .ctaRow .btn.primary::before,
.heroHome .ctaRow .btn:not(.primary):not(.ghost)::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(122,162,255,.55), rgba(97,255,214,.25));
}

/* Make the secondary CTA a little more "glass" */
.heroHome .ctaRow .btn:not(.primary):not(.ghost){
  background: rgba(255,255,255,.06);
}

/* Keep the ghost CTA cleaner (no orb), but still pill */
.heroHome .ctaRow .btn.ghost{ padding-left: 18px; }

/* Mobile: full-width CTAs stay centered and readable */
@media (max-width: 560px){
  .ctaRow .btn, .ctaRow a.btn{ width:100%; justify-content:center; }
  .heroHome .ctaRow .btn.primary,
  .heroHome .ctaRow .btn:not(.primary):not(.ghost){
    padding-left: 18px;
  }
  .heroHome .ctaRow .btn.primary::before,
  .heroHome .ctaRow .btn:not(.primary):not(.ghost)::before{
    display:none;
  }
}