/* ZY Cleanroom 2026 design system.
   Loaded after the legacy stylesheets: the shell (header, products menu,
   footer, floats) is new markup; the "skin" section restyles legacy page
   content so inner pages match the new homepage. */

:root {
  --zy-navy: #0a1a5c;
  --zy-navy-deep: #06103d;
  --zy-ink: #111827;
  --zy-steel: #556070;
  --zy-line: #e2e6ec;
  --zy-paper: #f5f6f8;
  --zy-white: #ffffff;
  --zy-amber: #f2a900;
  --zy-radius: 4px;
  --zy-wrap: 1240px;
  --zy-display: "Archivo", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --zy-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}
html[lang="ar"] { --zy-display: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --zy-body: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
html[lang="ru"] { --zy-display: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; }

/* ---------- shell ---------- */
body.zy { font-family: var(--zy-body) !important; color: var(--zy-ink); background: var(--zy-white); -webkit-font-smoothing: antialiased; }
.zy-wrap { width: min(var(--zy-wrap), 100% - 40px); margin-inline: auto; }
.zy-kicker { font-family: var(--zy-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--zy-amber); }
html[lang="ar"] .zy-kicker { letter-spacing: 0; }
.zy-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--zy-display); font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: var(--zy-radius); text-decoration: none !important; transition: transform .15s, background .15s; line-height: 1.2; }
.zy-btn:hover { transform: translateY(-1px); }
.zy-btn-amber { background: var(--zy-amber); color: var(--zy-navy-deep) !important; }
.zy-btn-amber:hover { background: #ffbb1f; }
.zy-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: var(--zy-white) !important; }
.zy-btn-ghost:hover { background: rgba(255,255,255,.1); }
.zy-btn-navy { background: var(--zy-navy); color: var(--zy-white) !important; }

.zy-top { background: var(--zy-navy-deep); color: #c9d0e6; font-size: 13.5px; font-family: var(--zy-body); }
.zy-top .zy-wrap { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
body.zy .zy-top a, .zy-top a { color: inherit; text-decoration: none; }
body.zy .zy-langs a { margin-inline-start: 14px; opacity: .8; color: #c9d0e6; } body.zy .zy-langs a:hover, body.zy .zy-langs a.on { opacity: 1; color: var(--zy-white); }

.zy-header { position: sticky; top: 0; z-index: 900; background: var(--zy-white); border-bottom: 1px solid var(--zy-line); font-family: var(--zy-body); }
.zy-header > .zy-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.zy-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.zy-brand img { width: 44px; height: auto; }
.zy-brand b { white-space: nowrap; font-family: "Archivo", "Segoe UI", Arial, sans-serif; font-size: 21px; letter-spacing: .08em; color: var(--zy-navy); line-height: 1.1; }
.zy-brand small { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--zy-steel); text-transform: uppercase; }
.zy-menu { display: flex; align-items: center; gap: 30px; font-family: var(--zy-display); font-weight: 600; font-size: 15.5px; }
body.zy .zy-menu > a, body.zy .zy-menu .zy-has-mega > a { text-decoration: none; color: var(--zy-ink); padding: 26px 0; border-bottom: 2px solid transparent; }
.zy-menu > a:hover, .zy-menu .zy-has-mega > a:hover, .zy-menu a.on { border-color: var(--zy-amber); }
.zy-has-mega > a::after { content: " ▾"; font-size: 11px; color: var(--zy-steel); }
.zy-burger { display: none; background: none; border: 1.5px solid var(--zy-line); border-radius: var(--zy-radius); padding: 9px 12px; font-family: var(--zy-display); font-weight: 700; color: var(--zy-navy); cursor: pointer; }

.zy-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--zy-white); border-top: 1px solid var(--zy-line); box-shadow: 0 30px 60px -30px rgba(6,16,61,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.zy-has-mega:hover .zy-mega, .zy-has-mega:focus-within .zy-mega, .zy-has-mega.open .zy-mega { opacity: 1; visibility: visible; transform: none; }
.zy-mega > .zy-wrap { display: grid; grid-template-columns: 290px 1fr 300px; gap: 34px; padding: 30px 0 26px; align-items: start; }
.zy-cats { display: flex; flex-direction: column; border-inline-end: 1px solid var(--zy-line); padding-inline-end: 18px; }
.zy-cats button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: var(--zy-radius); font-family: var(--zy-display); font-weight: 600; font-size: 15px; color: var(--zy-ink); }
.zy-cats button::after { content: "›"; color: var(--zy-steel); font-size: 18px; }
html[dir="rtl"] .zy-cats button::after { content: "‹"; }
.zy-cats button.on { background: var(--zy-paper); color: var(--zy-navy); box-shadow: inset 3px 0 0 var(--zy-amber); }
html[dir="rtl"] .zy-cats button.on { box-shadow: inset -3px 0 0 var(--zy-amber); }
.zy-panel { display: none; } .zy-panel.on { display: block; }
.zy-panel h4 { font-family: var(--zy-display); font-size: 20px; color: var(--zy-navy); margin: 0 0 6px; }
.zy-panel > p { color: var(--zy-steel); font-size: 14.5px; margin: 0 0 16px; max-width: 520px; }
.zy-panel ul { list-style: none; columns: 2; column-gap: 28px; margin: 0; padding: 0; }
.zy-panel li { break-inside: avoid; margin-bottom: 9px; }
body.zy .zy-panel li a { font-weight: 500; font-size: 15px; color: var(--zy-ink); text-decoration: none; }
body.zy .zy-panel li a:hover { color: var(--zy-navy); text-decoration: underline; text-decoration-color: var(--zy-amber); text-underline-offset: 4px; }
.zy-feature { background: var(--zy-paper); border-radius: var(--zy-radius); overflow: hidden; }
.zy-feature img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.zy-feature div { padding: 14px 16px 16px; font-size: 14px; color: var(--zy-steel); }
.zy-feature b { display: block; font-family: var(--zy-display); color: var(--zy-navy); font-size: 15.5px; margin-bottom: 4px; }
.zy-mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: var(--zy-paper); border-radius: var(--zy-radius); padding: 12px 18px; font-size: 14.5px; color: var(--zy-steel); }
body.zy .zy-mega-foot a { font-family: var(--zy-display); font-weight: 700; color: var(--zy-navy); text-decoration: none; }

.zy-footer { background: var(--zy-navy-deep); color: #aab3d0; font-size: 14.5px; padding: 60px 0 30px; font-family: var(--zy-body); }
.zy-footer .zy-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.zy-footer h4 { font-family: var(--zy-display); color: var(--zy-white); font-size: 15px; letter-spacing: .06em; margin: 0 0 14px; }
body.zy .zy-footer a, .zy-footer a { display: block; color: #aab3d0; text-decoration: none; margin-bottom: 8px; } body.zy .zy-footer a:hover { color: var(--zy-white); }
.zy-footer .zy-brand { margin-bottom: 16px; } .zy-footer .zy-brand b { color: var(--zy-white); } .zy-footer .zy-brand img { filter: brightness(0) invert(1); }
.zy-footer p { margin: 0; line-height: 1.6; }
.zy-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.zy-base a { display: inline; margin: 0; }

.zy-wa { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 950; display: flex; align-items: center; gap: 8px; background: #1fa855; color: #fff !important; font-family: var(--zy-display); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 999px; text-decoration: none !important; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
.zy-wa svg { width: 20px; height: 20px; }
/* legacy floating bar is replaced by the WhatsApp button */
body.zy .float-bar { display: none !important; }

@media (max-width: 1080px) {
  .zy-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--zy-white); border-top: 1px solid var(--zy-line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; max-height: calc(100vh - 80px); overflow: auto; box-shadow: 0 30px 60px -30px rgba(6,16,61,.35); }
  .zy-header.menu-open .zy-menu { display: flex; }
  body.zy .zy-menu > a, body.zy .zy-menu .zy-has-mega > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--zy-line); }
  .zy-burger { display: inline-block; }
  .zy-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; }
  .zy-has-mega.open .zy-mega { display: block; }
  .zy-mega > .zy-wrap { grid-template-columns: 1fr; width: 100%; padding: 6px 0 10px; gap: 6px; }
  .zy-cats, .zy-feature, .zy-mega-foot { display: none; }
  .zy-panel { display: block; padding: 10px 0 4px; border-bottom: 1px solid var(--zy-line); }
  body.zy .zy-panel li a { display: block; padding: 6px 0; }
  .zy-panel > p { display: none; }
  .zy-panel h4 { font-size: 16px; }
  .zy-panel ul { columns: 1; }
  .zy-header .zy-quote { display: none; }
  .zy-footer .zy-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .zy-top .zy-wrap { justify-content: center; } .zy-top .zy-mail { display: none; }
  .zy-brand small { display: none; } .zy-brand b { font-size: 17px; } .zy-brand img { width: 36px; }
  .zy-header > .zy-wrap { height: 64px; }
  .zy-footer .zy-cols { grid-template-columns: 1fr; }
  .zy-wa span { display: none; } .zy-wa { padding: 14px; }
}

/* ---------- skin for legacy page content ---------- */
body.zy main, body.zy .section, body.zy .page-hero { font-family: var(--zy-body); }
body.zy main .container, body.zy > .section .container, body.zy > .page-hero .container { max-width: var(--zy-wrap) !important; }
body.zy h1, body.zy h2, body.zy h3, body.zy h4 { font-family: var(--zy-display) !important; letter-spacing: -0.01em; -webkit-text-fill-color: currentColor !important; background: none !important; }
body.zy main h2, body.zy .section h2 { color: var(--zy-navy) !important; }
body.zy main h3, body.zy .section h3 { color: var(--zy-navy); }
body.zy a { color: var(--zy-navy); }
body.zy p, body.zy li { line-height: 1.65; }

body.zy .page-hero, body.zy .catalog-detail-hero { background: linear-gradient(120deg, var(--zy-navy-deep), var(--zy-navy)) !important; color: #dfe4f3 !important; padding-top: 64px !important; padding-bottom: 64px !important; border: 0 !important; }
body.zy .page-hero h1, body.zy .catalog-detail-hero h1 { color: var(--zy-white) !important; font-weight: 800 !important; font-size: clamp(34px, 4.2vw, 54px) !important; line-height: 1.08 !important; }
body.zy .page-hero p, body.zy .page-hero li, body.zy .page-hero dt, body.zy .page-hero span, body.zy .catalog-detail-hero p, body.zy .catalog-detail-hero dt { color: #d3d9ec !important; -webkit-text-fill-color: currentColor !important; }
body.zy .page-hero dd, body.zy .page-hero strong, body.zy .catalog-detail-hero dd, body.zy .catalog-detail-hero strong { color: var(--zy-white) !important; -webkit-text-fill-color: currentColor !important; }
body.zy .page-hero a:not(.btn):not(.zy-btn), body.zy .catalog-detail-hero a:not(.btn) { color: #ffd36b !important; }
body.zy .page-hero .breadcrumb, body.zy .page-hero .breadcrumb a, body.zy .catalog-detail-hero .breadcrumb a { color: #b9c1dc !important; }
body.zy .eyebrow { font-family: var(--zy-display) !important; color: var(--zy-amber) !important; letter-spacing: .14em; font-weight: 700 !important; }
html[lang="ar"] body.zy .eyebrow { letter-spacing: 0; }
body.zy .breadcrumb { font-size: 14px; color: var(--zy-steel); }

body.zy .section { padding-top: 72px; padding-bottom: 72px; }
body.zy .section.tint, body.zy .tint { background: var(--zy-paper) !important; }

body.zy .btn, body.zy .btn-pill { font-family: var(--zy-display) !important; font-weight: 700 !important; border-radius: var(--zy-radius) !important; letter-spacing: 0 !important; }
body.zy .btn-primary { background: var(--zy-amber) !important; color: var(--zy-navy-deep) !important; border-color: var(--zy-amber) !important; }
body.zy .btn-primary:hover { background: #ffbb1f !important; }
body.zy .btn-outline { background: transparent !important; color: var(--zy-navy) !important; border: 1.5px solid var(--zy-navy) !important; }
body.zy .page-hero .btn-outline, body.zy .catalog-detail-hero .btn-outline { color: var(--zy-white) !important; border-color: rgba(255,255,255,.6) !important; }

body.zy .card, body.zy .document-guide-card, body.zy .requirement-grid > *, body.zy .variant-grid > * { border-radius: var(--zy-radius) !important; border: 1px solid var(--zy-line) !important; box-shadow: none !important; background: var(--zy-white); }
body.zy .card:hover { box-shadow: 0 18px 40px -18px rgba(10,26,92,.3) !important; }

body.zy table { border-collapse: collapse; }
body.zy .spec-table th, body.zy .guide-table th, body.zy main table th { background: var(--zy-navy) !important; color: var(--zy-white) !important; font-family: var(--zy-display); font-weight: 600; }
body.zy main table td { border-color: var(--zy-line) !important; }

body.zy .material-faq details, body.zy .faq-item { border-bottom: 1px solid var(--zy-line); }
body.zy .material-faq summary, body.zy .faq-item summary, body.zy .faq-item h3 { font-family: var(--zy-display); color: var(--zy-navy); font-weight: 700; }

body.zy .catalog-cta, body.zy .application-note { border-radius: var(--zy-radius) !important; }
body.zy .catalog-cta { background: var(--zy-navy) !important; color: #dfe4f3 !important; }
body.zy .catalog-cta h2, body.zy .catalog-cta h3 { color: var(--zy-white) !important; }
body.zy .catalog-cta p { color: #c9d0e6 !important; }

/* ---------- 2026-10-20 colour consistency fixes ---------- */
/* one navy hero everywhere */
body.zy .catalog-hero, body.zy .steel-hero { background: linear-gradient(120deg, var(--zy-navy-deep), var(--zy-navy)) !important; color: #dfe4f3 !important; }
body.zy .catalog-hero h1, body.zy .steel-hero h1 { color: #fff !important; -webkit-text-fill-color: currentColor !important; font-weight: 800 !important; }
body.zy .catalog-hero p, body.zy .steel-hero p, body.zy .catalog-hero span, body.zy .steel-hero span { color: #d3d9ec !important; -webkit-text-fill-color: currentColor !important; }
/* steel page: replace its old blue/teal tokens */
body.zy .steel-hub { --ink: var(--zy-navy); --accent: var(--zy-navy); }
/* outline buttons and pill links on dark heroes: white text, light border */
body.zy :is(.page-hero, .catalog-hero, .steel-hero, .catalog-detail-hero) :is(.btn-outline, nav a, .language-links a, [class*="language"] a, [class*="jump"] a, [class*="links"] a):not(.btn-primary) {
  background: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.45) !important; text-decoration: none !important; }
body.zy :is(.page-hero, .catalog-hero, .steel-hero, .catalog-detail-hero) :is(.btn-outline, nav a, [class*="language"] a, [class*="links"] a):hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }
body.zy :is(.page-hero, .catalog-hero, .steel-hero, .catalog-detail-hero) :is(a[aria-current], a.active, a.is-active) {
  background: var(--zy-amber) !important; color: var(--zy-navy-deep) !important; -webkit-text-fill-color: var(--zy-navy-deep) !important; border-color: var(--zy-amber) !important; }
/* the hero's main button stays amber */
body.zy :is(.catalog-hero, .steel-hero) a:first-of-type:not([class*="lang"]):is(.btn, [class*="button"], [class*="cta"]) { background: var(--zy-amber) !important; color: var(--zy-navy-deep) !important; border-color: var(--zy-amber) !important; }
/* any leftover old bright blue buttons in content -> navy */
body.zy main :is(a, button)[class*="btn"]:not(.btn-primary):not(.btn-outline):not(.zy-btn) { background: var(--zy-navy) !important; border-color: var(--zy-navy) !important; color: #fff !important; }
/* mobile: nothing wider than the screen */
@media (max-width: 760px) {
  body.zy main, body.zy main * { max-width: 100%; }
  body.zy main { overflow-x: hidden; }
  body.zy main :is(table, pre) { display: block; overflow-x: auto; }
  body.zy main img, body.zy main video { height: auto; }
  body.zy main :is(.container, [class*="wrap"]) { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}