[hidden] { display: none !important; }

.brand-wordmark { display: block; width: 190px; height: 48px; object-fit: cover; object-position: center; filter: invert(1); mix-blend-mode: screen; }
.privacy-notice { grid-column: 2; margin: -6px 0 0; color: var(--steel); font-size: .84rem; line-height: 1.55; }
@media (max-width: 900px) { .privacy-notice { grid-column: 1; } }

:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }
.company-disclosure { max-width: 34rem; font-size: .78rem !important; line-height: 1.55; color: var(--steel) !important; }

.card-note { margin: 1.25rem 0 0; color: var(--teal-light); font-size: .78rem; letter-spacing: .04em; }

.advisory-viewport { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.advisory-track { display: flex; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.advisory-slide { flex: 0 0 100%; min-height: 320px; padding: 34px 42px 32px; background: var(--slate); }
.advisory-slide-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 38px; }
.advisory-number { color: var(--teal-light); font-family: Georgia, serif; font-size: 1.35rem; }
.advisory-slide h3 { max-width: 700px; margin-bottom: 12px; }
.advisory-slide>p { max-width: 720px; }
.advisory-slide .list { max-width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.advisory-slide .list li { padding: 12px 0; }
.advisory-controls { display: flex; align-items: center; justify-content: center; padding-top: 20px; }
.advisory-progress { display: flex; gap: 8px; }
.advisory-progress button { border: 1px solid var(--line); background: transparent; color: var(--steel); padding: 8px 12px; cursor: pointer; }
.advisory-progress button[aria-selected="true"] { border-color: var(--teal-light); color: var(--offwhite); background: #304a4e; }
@media (max-width: 700px) { .advisory-slide { min-height: 390px; padding: 26px 22px; } .advisory-slide .list { grid-template-columns: 1fr; } .advisory-progress { width: 100%; justify-content: center; } }

.engagement-diagram { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 34px 0 0; list-style: none; border-top: 1px solid var(--line); }
.engagement-diagram li { position: relative; min-width: 0; padding: 0 28px 0 0; }
.engagement-diagram li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 58px; right: 28px; height: 1px; background: var(--teal-light); transform-origin: left center; animation: engagement-line 4s ease-in-out infinite; }
.engagement-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 22px; border: 1px solid var(--teal-light); border-radius: 50%; color: var(--offwhite); background: var(--slate); font-family: Georgia, serif; animation: engagement-node 4s ease-in-out infinite; }
.engagement-diagram li:nth-child(2) .engagement-node, .engagement-diagram li:nth-child(2)::after { animation-delay: 1s; }
.engagement-diagram li:nth-child(3) .engagement-node, .engagement-diagram li:nth-child(3)::after { animation-delay: 2s; }
.engagement-diagram li:nth-child(4) .engagement-node { animation-delay: 3s; }
.engagement-diagram h3 { margin-bottom: 8px; }
.engagement-diagram p { max-width: 250px; margin: 0; }
@keyframes engagement-node { 0%, 18%, 100% { color: var(--offwhite); background: var(--slate); box-shadow: 0 0 0 0 rgba(110,175,179,0); } 8% { color: #102124; background: var(--teal-light); box-shadow: 0 0 0 7px rgba(110,175,179,.12); } }
@keyframes engagement-line { 0%, 18%, 100% { opacity: .35; } 8% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .advisory-track, .engagement-node, .engagement-diagram li:not(:last-child)::after { animation: none; transition: none; } }
@media (max-width: 700px) { .engagement-diagram { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; } .engagement-diagram li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 0; } .engagement-diagram li:not(:last-child)::after { top: 48px; left: 19px; right: auto; width: 1px; height: 28px; } .engagement-node { margin: 0; } }

.social-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; margin-left: 18px; color: var(--teal-light); font-weight: 700; }
.social-link:hover { color: var(--offwhite); }
.social-icon { width: 19px; height: 19px; flex: 0 0 auto; }
@media (max-width: 700px) { .social-link { margin-left: 0; } }

.language-selector { display: inline-flex; align-items: center; margin-left: 4px; }
.language-selector select { width: auto; min-width: 138px; padding: 8px 28px 8px 10px; border-color: var(--line); background: var(--charcoal); color: var(--steel); font-size: .78rem; cursor: pointer; }
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .section-head, html[dir="rtl"] .product-band, html[dir="rtl"] .footer-bottom { direction: rtl; }
html[dir="rtl"] .list li:before { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .quote { border-left: 0; border-right: 3px solid var(--teal); padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .social-link { margin-left: 0; margin-right: 18px; }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; }
html[lang="ar"] body { font-family: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif; }
html[lang="hi"] body { font-family: "Noto Sans Devanagari", "Segoe UI", Arial, sans-serif; }
html[lang="ar"] .brand, html[lang="hi"] .brand { direction: ltr; }
@media (max-width: 700px) { .language-selector { display: flex; margin: 8px 0 0; } .language-selector select { width: 100%; } html[dir="rtl"] .social-link { margin-right: 0; } }

/* Use the same connected process language across the product workflow pages. */
.section.mist .grid-4 { gap: 0; padding-top: 34px; border-top: 1px solid var(--line); }
.section.mist .grid-4 > .card { position: relative; min-height: 0; padding: 0 28px 0 0; border: 0; background: transparent; }
.section.mist .grid-4 > .card:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 58px; right: 28px; height: 1px; background: var(--teal-light); opacity: .65; }
.section.mist .grid-4 > .card .tag { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 22px; padding: 0; border: 1px solid var(--teal-light); border-radius: 50%; background: var(--slate); font-family: Georgia, serif; font-size: .95rem; letter-spacing: 0; }
.section.mist .grid-4 > .card h3 { margin-bottom: 8px; }
.section.mist .grid-4 > .card:hover { box-shadow: none; border-color: transparent; }
@media (max-width: 900px) { .section.mist .grid-4 { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } .section.mist .grid-4 > .card:nth-child(2)::after { display: none; } }
@media (max-width: 700px) { .section.mist .grid-4 { grid-template-columns: 1fr; row-gap: 28px; } .section.mist .grid-4 > .card { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 0; } .section.mist .grid-4 > .card .tag { margin: 0; } .section.mist .grid-4 > .card:not(:last-child)::after { top: 48px; left: 19px; right: auto; width: 1px; height: 28px; } }

/* Keep page headings readable within the first viewport across screen sizes. */
h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
.hero { padding: 104px 0 82px; }
.page-hero { padding: 78px 0 64px; }
.page-hero p { font-size: 1.08rem; }
@media (max-width: 700px) {
  .hero { padding: 62px 0 50px; }
  .page-hero { padding: 54px 0 46px; }
  .page-hero h1 { font-size: 2.6rem; }
}