/* Language navigation and script-aware layout. All fonts stay local or system supplied. */
.site-signature { text-transform: none; overflow-wrap: anywhere; }
html[lang] .location-bar {
  height: auto;
  min-height: 32px;
  padding-block: 6px;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.7;
}
.location-signature { min-width: 0; max-width: 740px; }
.location-bar .tiny-cross { flex: none; }
@media (max-width: 900px) {
  html[lang] .location-bar {
    display: grid;
    grid-template-columns: 12px minmax(0, auto);
    gap: 8px;
    padding: 7px 16px;
    font-size: 9px;
  }
  .location-bar .location-tag { display: none; }
}
.language-suggestion {
  position: fixed;
  z-index: 40;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(540px, calc(100vw - 44px));
  padding: 14px 12px 14px 16px;
  border: 1px solid #51433b;
  border-radius: 18px;
  background: linear-gradient(130deg, #2a2521, #191715);
  color: #f5f0eb;
  box-shadow: 0 12px 48px #0006, inset 0 1px 0 #ffffff08;
  font: 12px/1.5 Inter, "Segoe UI", sans-serif;
}
.language-suggestion-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ffffff12;
  border-radius: 11px;
  color: #ffb59e;
  background: #ffffff06;
  font: 20px/1 "Segoe UI", sans-serif;
}
.language-suggestion-copy { min-width: 0; overflow-wrap: anywhere; }
.language-suggestion-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #915845;
  border-radius: 10px;
  color: #ffd4c5;
  background: #513126;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.language-suggestion-link:hover { background: #694032; border-color: #c87c60; color: #fff; }
.language-suggestion-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #bbada4;
  font: 22px/1 Arial, sans-serif;
  cursor: pointer;
}
.language-suggestion-close:hover { color: #fff; background: #ffffff0a; }
.language-suggestion :is(a,button):focus-visible { outline: 2px solid #ffb59e; outline-offset: 3px; }
@media (max-width: 600px) {
  .language-suggestion {
    inset-inline: 12px;
    inset-block-end: 12px;
    width: auto;
    max-width: none;
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    gap: 8px 10px;
    padding: 12px;
    border-radius: 15px;
  }
  .language-suggestion-symbol { grid-row: 1 / span 2; width: 30px; height: 34px; }
  .language-suggestion-copy { grid-column: 2; font-size: 11px; }
  .language-suggestion-link { grid-column: 2; justify-self: start; min-width: 105px; max-width: 100%; min-height: 36px; padding-block: 7px; }
  .language-suggestion-close { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
}
/* Long option titles and translated choice counts need separate rows on narrow cards. */
@media (max-width: 480px) {
  html[lang]:not(:lang(en)) .option-disclosure summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 6px 12px;
  }
  html[lang]:not(:lang(en)) .option-disclosure summary > span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html[lang]:not(:lang(en)) .option-disclosure summary > small {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html[lang]:not(:lang(en)) .option-disclosure summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}
:root {
  --i18n-font: Inter, "Segoe UI", Arial, sans-serif;
}
/* Translated lens labels share three narrow tabs, including long single words. */
html[lang]:not(:lang(en)) .about-lenses button {
  overflow-wrap: anywhere;
}
html:lang(ar), html:lang(fa), html:lang(ur) {
  --i18n-font: "Segoe UI", Tahoma, Arial, sans-serif;
}
html:lang(he) {
  --i18n-font: "Segoe UI", Arial, sans-serif;
}
html:lang(zh) {
  --i18n-font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}
html:lang(zh-TW), html:lang(zh-Hant) {
  --i18n-font: "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", "Segoe UI", sans-serif;
}
html:lang(ja) {
  --i18n-font: "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
html:lang(ko) {
  --i18n-font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
}
html:lang(hi) {
  --i18n-font: "Nirmala UI", "Mangal", "Kohinoor Devanagari", "Segoe UI", sans-serif;
}
html:lang(bn) {
  --i18n-font: "Nirmala UI", "Vrinda", "Kohinoor Bangla", "Segoe UI", sans-serif;
}
html:lang(th) {
  --i18n-font: "Leelawadee UI", "Thonburi", "Tahoma", sans-serif;
}
html:is(:lang(ar), :lang(fa), :lang(he), :lang(ur), :lang(zh), :lang(ja), :lang(ko), :lang(hi), :lang(bn), :lang(th))
  :is(body, h1, h2, h3, h4, button, input, select, textarea, .mono, .eyebrow, .label, .pill, .hero-kicker, .location-bar, .hero-meta, .footer h4, .footer-bottom, .footer-manifesto-meta, .footer-manifesto-rule, .visual-label, .insight-signal span, .scene-caption, .scene-label, .guide-category, .about-chapter, .reference-status > span, .affiliate-banner-preview strong) {
  font-family: var(--i18n-font);
  letter-spacing: normal;
}
html:is(:lang(ar), :lang(fa), :lang(he), :lang(ur), :lang(hi), :lang(bn), :lang(th)) :is(h1, h2, h3, h4) {
  line-height: 1.35;
}
html:is(:lang(ar), :lang(fa), :lang(ur), :lang(hi), :lang(bn), :lang(th)) :is(p, li, .fine-print, label) {
  line-height: 1.9;
}

.nav, .nav-tools, .nav-links {
  min-width: 0;
}
.nav-tools {
  flex-shrink: 0;
}
/* Open navigation must remain above the configurator's fixed order total. */
.header:has(.nav-links.open, .language-selector[open]) {
  z-index: 45;
}
.language-selector {
  position: relative;
  flex: none;
  border: 0;
}
.language-selector > .language-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 84px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #393532;
  border-radius: 12px;
  color: #e9e4de;
  background: linear-gradient(160deg, #292724, #1c1b19);
  box-shadow: inset 0 1px 0 #ffffff09, 0 2px 5px #00000014;
  font: 600 11px/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: .03em;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.language-selector > .language-trigger::-webkit-details-marker {
  display: none;
}
.language-selector > .language-trigger::after {
  content: none;
  display: none;
}
.language-trigger svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.language-trigger-code {
  direction: ltr;
  unicode-bidi: isolate;
}
.language-trigger .language-chevron {
  width: 11px;
  height: 11px;
  color: #bcb2a8;
  transition: transform .18s;
}
.language-selector[open] .language-chevron {
  transform: rotate(180deg);
}
.language-selector[open] > .language-trigger,
.language-trigger:hover {
  color: #fff;
  border-color: #776052;
  background: linear-gradient(160deg, #35302b, #26221f);
}
.language-trigger:focus-visible {
  outline: 2px solid #ffac96;
  outline-offset: 4px;
}
.language-panel {
  position: absolute;
  z-index: 45;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  width: min(432px, calc(100vw - 32px));
  max-height: min(610px, calc(100dvh - 145px));
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid #4a4038;
  border-radius: 18px;
  background: linear-gradient(155deg, #26221e, #191715 60%);
  box-shadow: inset 0 1px 0 #ffffff09, 0 22px 64px #0009, 0 6px 18px #0004;
}
.language-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #ffffff0d;
}
.language-panel-header > div {
  min-width: 0;
}
.language-panel-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid #554237;
  border-radius: 12px;
  background: #3d2b223d;
  color: #f7a28b;
}
.language-panel-current {
  display: block;
  margin-top: 3px;
  color: #a99d92;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.language-panel-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #f2ece5;
}
.language-panel-header .language-panel-title {
  margin: 0;
}
.language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: min(484px, calc(100dvh - 260px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 5px 3px 2px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #68574a transparent;
}
.language-options::-webkit-scrollbar { width: 5px; }
.language-options::-webkit-scrollbar-thumb { border-radius: 6px; background: #68574a; }
.language-options::-webkit-scrollbar-track { background: transparent; }
.language-options:dir(rtl) {
  padding-inline: 2px 5px;
}
.language-options a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 15px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff02;
  font: 12px/1.45 "Segoe UI", Arial, sans-serif;
  color: #d8cec4;
  overflow-wrap: anywhere;
  text-align: start;
  transition: background .16s, border-color .16s, color .16s;
}
.language-options a > span {
  min-width: 0;
}
.language-options a:hover,
.language-options a:focus-visible {
  border-color: #574638;
  background: #332b24;
  color: #fff;
}
.language-options a:focus-visible {
  outline: 2px solid #f6a28a;
  outline-offset: -2px;
}
.language-options a[aria-current="page"] {
  border-color: #805a44;
  background: linear-gradient(145deg, #493024, #35251d);
  color: #ffc3ad;
}
.language-option-check {
  color: #ffb198;
  visibility: hidden;
}
.language-options a[aria-current="page"] .language-option-check {
  visibility: visible;
}
.language-options small {
  direction: ltr;
  unicode-bidi: isolate;
  flex: none;
  color: #918275;
  font: 9px/1.5 Inter, Arial, sans-serif;
}

/* Translations can grow without pushing a card or a control beyond its column. */
html[lang]:not(:lang(en)) :is(h1, h2, h3, h4, p, li, dt, dd, .btn, .tab, .text-link, .stack-info, .mega-group, .card-specs, .fine-print, .notice, .field, .footer-grid > div, .support-box) {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[lang]:not(:lang(en)) :is(.btn, .text-link, .cta-section .btn, .section-head .text-link, .showcase-tabs .tab, .workload-chooser > summary small, .option-disclosure summary small) {
  white-space: normal;
}
html[lang]:not(:lang(en)) :is(.btn, .tab, .text-link) {
  max-width: 100%;
}
html[lang]:not(:lang(en)) :is(.hero-stage) {
  height: auto;
  min-height: min(860px, max(640px, calc(100svh - 118px)));
  max-height: none;
}
html[lang]:not(:lang(en)) .hero-content {
  min-width: 0;
  max-width: 100%;
}
html[lang]:not(:lang(en)) :is(.hero-entry, .hero-meta) {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
html[lang]:not(:lang(en)) :is(.hero-entry > span, .hero-meta > span) {
  min-width: 0;
  max-width: 100%;
}
html[lang]:not(:lang(en)) .hero-title {
  padding-inline: 5px;
}
html[lang]:not(:lang(en)) :is(.between, .hero-meta, .card-actions, .section-foot, .plan-toolbar, .footer-manifesto-meta, .footer-manifesto-rule) {
  flex-wrap: wrap;
}
html[lang]:not(:lang(en)) .location-bar {
  height: auto;
  min-height: 32px;
  padding-block: 6px;
  text-align: center;
  flex-wrap: wrap;
  line-height: 1.7;
}
html[lang]:not(:lang(en)) .footer-manifesto-meta > span:last-child {
  white-space: normal;
}
html[lang]:not(:lang(en)) :is(.affiliate-calculator > *, .affiliate-estimate-secondary > *, .affiliate-banner-grid > *, .affiliate-join > *) {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[lang]:not(:lang(en)) .affiliate-banner-action {
  flex-wrap: wrap;
}
html[lang]:not(:lang(en)) .affiliate-banner-action .btn {
  white-space: normal;
}
.affiliate-count-input input {
  min-width: 0;
}
.money-amount, bdi[dir="ltr"], [data-currency="USD"], .crypto-address-value,
.payment-address, .wallet-address, .terminal-visual code, .about-pillar-control code,
input[type="email"], input[autocomplete="username"], input[autocomplete="current-password"], input[autocomplete="new-password"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Components follow reading direction; technical identifiers retain their order. */
html[dir="rtl"] :is(.brand, .payment-wordmarks, .crypto-logos, .ecosystem-track, .about-marquee-track) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] :is(.stack-card, .nav-products > button, th, td, .about-closing, .client-logout) {
  text-align: start;
}
html[dir="rtl"] :is(.offer-specs dd, .offer-specs strong, .offer-specs span:last-child, .card-specs strong, .selected-options dd, .client-order-options dd, .stack-price small, .reference-family-grid strong) {
  text-align: end;
}
html[dir="rtl"] :is(.price, .offer-price, .spotlight-price, .stack-price, .service-entry-price strong, .hero-entry strong, .workload-primary strong, .client-order-total, .client-order-payment h3, .mobile-order-total strong) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] :is(.price, .offer-price, .spotlight-price, .stack-price, .service-entry-price strong, .hero-entry strong, .workload-primary strong) small {
  display: inline-block;
  direction: rtl;
  unicode-bidi: isolate;
}
html[dir="rtl"] :is(.article ul, .editorial-section ul, .about-operating-copy ul, .reader-body ul, .reader-body ol) {
  padding-left: 0;
  padding-inline-start: 22px;
}
html[dir="rtl"] .article-toc {
  border-left: 0;
  border-inline-start: 1px solid var(--line);
  padding-left: 0;
  padding-inline-start: 20px;
}
html[dir="rtl"] .location-tag {
  border-left: 0;
  border-inline-start: 1px solid var(--line);
  padding-left: 0;
  padding-inline-start: 20px;
}
html[dir="rtl"] .order-review-note {
  border-left-width: 1px;
  border-inline-start: 2px solid var(--accent);
}
html[dir="rtl"] .client-password-field input {
  /* Credentials stay LTR; reserve the physical left edge for the RTL control. */
  padding-left: 65px;
  padding-right: 14px;
}
html[dir="rtl"] :is(.client-password-field button, .client-password-field > svg) {
  right: auto;
  inset-inline-end: 13px;
}
html[dir="rtl"] .client-auth-cart strong {
  margin-left: 0;
  margin-inline-start: auto;
}
html[dir="rtl"] .client-auth-cart p {
  margin-left: 0;
  margin-inline-start: 27px;
}
html[dir="rtl"] .client-space-footer > span {
  margin-right: 0;
  margin-inline-end: auto;
}
html[dir="rtl"] .client-profile {
  margin-left: 0;
  margin-inline-start: auto;
}
html[dir="rtl"] .about-stat {
  border-left: 0;
  border-inline-start: 1px solid var(--about-line);
}
html[dir="rtl"] .about-stat:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
  padding-inline-end: 27px;
}
html[dir="rtl"] .about-stat:last-child {
  padding-inline-start: 27px;
  padding-inline-end: 0;
}
html[dir="rtl"] .insights-index > div {
  border-right: 0;
  border-inline-end: 1px solid var(--insight-line);
}
html[dir="rtl"] .insights-index > div:last-child { border-inline-end: 0; }
html[dir="rtl"] .workflow article:first-child { border-radius: 0 9px 9px 0; }
html[dir="rtl"] .workflow article:last-child { border-radius: 9px 0 0 9px; }

/* The selector and longer navigation labels need the menu at tablet widths. */
@media (max-width: 1100px) {
  .nav {
    height: 76px;
    gap: 16px;
  }
  .nav-links {
    display: none;
    position: absolute;
    inset: 76px 0 auto;
    max-height: var(--mobile-nav-max-height, calc(100dvh - 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 30px;
    background: #16120f;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-products > button {
    padding-block: 10px;
    font-size: 13px;
  }
  .nav-products { display: block; align-self: auto; }
  .nav-products > button { width: 100%; text-align: start; }
  .menu-toggle { display: inline-grid; }
  .mega-menu {
    position: static;
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    max-height: none;
    overflow: visible;
    transform: none;
    border-radius: 12px;
    box-shadow: none;
    background: #1c1510;
  }
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .language-panel { max-height: min(580px, calc(100dvh - 180px)); }
}
@media (max-width: 900px) {
  html[dir="rtl"] .article-toc { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 680px) {
  .nav { height: 70px; gap: 10px; }
  .nav-links { top: 70px; padding: 18px 20px; max-height: var(--mobile-nav-max-height, calc(100dvh - 160px)); }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header .nav-tools > .icon-btn,
  .header .nav-tools > .client-nav { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 11px; }
  .header .nav-tools > .client-nav > span { display: none; }
  .language-selector { position: static; }
  .language-selector > .language-trigger { min-width: 70px; height: 38px; padding: 0 9px; gap: 6px; font-size: 10px; border-radius: 11px; }
  .language-trigger svg { width: 14px; height: 14px; }
  .language-panel {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline: 12px;
    width: auto;
    max-height: min(580px, calc(100dvh - 160px));
    padding: 14px;
  }
  .language-options { max-height: min(454px, calc(100dvh - 260px)); }
  html[lang]:not(:lang(en)) .hero-stage { min-height: 610px; }
  html[lang]:not(:lang(en)) .hero-entry > span:last-child { flex-basis: 100%; }
  html[lang]:not(:lang(en)) .spotlight-bottom { flex-wrap: wrap; }
  html[lang]:not(:lang(en)) .showcase-tabs .tab { min-width: min(100%, 120px); }
  html[lang]:not(:lang(en)) .order-journey li > :is(span, a) { white-space: normal; }
  html[lang]:not(:lang(en)) .order-journey li { min-width: 0; flex: 1; }
  html[lang]:not(:lang(en)) .mobile-order-total { flex-wrap: wrap; }
  html[dir="rtl"] .location-tag { padding-inline-start: 10px; }
  html[dir="rtl"] .client-profile { margin-inline-start: 0; }
  html[dir="rtl"] .about-stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  html[dir="rtl"] .about-stat:nth-child(2) { padding-inline-end: 0; }
  html[dir="rtl"] :is(.workflow article:first-child, .workflow article:last-child) { border-radius: 14px; }
}
@media (max-width: 440px) {
  .nav { padding-inline: 16px; gap: 8px; }
  .nav .brand { font-size: 20px; gap: 6px; }
  .nav .brand .brand-mark { width: 27px; height: 27px; }
  .header .nav-tools { gap: 5px; }
  .header .nav-tools > .icon-btn, .header .nav-tools > .client-nav { width: 36px; height: 36px; min-height: 36px; padding: 0; }
  .language-selector > .language-trigger { min-width: 48px; height: 36px; gap: 5px; padding-inline: 8px; }
  .language-trigger > svg:not(.language-chevron) { display: none; }
  .language-options a { gap: 6px; padding: 9px 8px; font-size: 11px; grid-template-columns: minmax(0, 1fr) auto 13px; }
  .language-option-check { width: 13px; height: 13px; }
  .language-options small { font-size: 8px; }
  html[lang]:not(:lang(en)) .workload-grid { grid-template-columns: 1fr; }
  html[lang]:not(:lang(en)) :is(.hero-title, .reader-hero h1, .about-hero-copy h1, .client-auth-story h1) { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .nav { padding-inline: 14px; gap: 6px; }
  .nav .brand { font-size: 18px; letter-spacing: -.9px; }
  .nav .brand .brand-mark { width: 25px; height: 25px; }
  .header .nav-tools { gap: 4px; }
  .header .nav-tools > .icon-btn, .header .nav-tools > .client-nav { width: 34px; height: 36px; }
  .language-selector > .language-trigger { min-width: 44px; padding-inline: 6px; gap: 4px; }
}