/* Language controls and layout adjustments for the four local catalogues. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.brand {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.nav-wrap { gap: 24px; }
.nav-actions { gap: 20px; }
.header nav { gap: 23px; }
.header nav a, .panel-link, .nav-cta { white-space: nowrap; }
.language-picker { display: inline-flex; flex: 0 0 auto; }
.language-picker select {
  display: block;
  width: 112px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid #ffffff30;
  border-radius: 4px;
  background: #10151b;
  color: #d5d8df;
  font-size: 11px;
  cursor: pointer;
}
.language-picker select:hover { border-color: var(--gold); }
.language-picker select:disabled { opacity: .65; cursor: progress; }
.language-picker option { background: #10151b; color: #f5f4f0; }
.modal-actions { display: flex; align-items: center; gap: 16px; }
.modal .language-picker select { background: #f6f7fc; color: #333b51; border-color: #dfe1eb; }
.modal .language-picker option { background: white; color: #333b51; }
.language-status {
  padding: 11px 24px;
  background: #272218;
  border-bottom: 1px solid #d8bd873b;
  color: #e7d0a6;
  text-align: center;
  font-size: 13px;
}
.language-status:empty { display: none; }

/* Translated sentences may need more room than their Dutch source. */
.hero-line { white-space: normal; }
.hero-actions { flex-wrap: wrap; }
.button { white-space: normal; text-align: center; }
.hero-copy, .section-heading > *, .possibilities-heading > *,
.why-layout > *, .faq-layout > *, .footer-top > *,
.feature-grid > *, .checkout-main, .order-sidebar { min-width: 0; }
.plan-price { flex-wrap: wrap; row-gap: 6px; }
.plan-description { min-height: 3.6em; }
.plan-ribbon { padding-inline: 5px; text-align: center; }
.pricing-foot .text-button { white-space: normal; text-align: start; }
.mail-address { max-width: 100%; padding-inline: 14px; }
.mail-address > strong { overflow-wrap: anywhere; }
.checkout-steps > span { min-width: 0; }
.step-buttons { flex-wrap: wrap; }
.step-buttons > .button { flex: 1 1 120px; }
.choice-row label > span { height: 100%; }
.order-review > div { align-items: baseline; }

/* Keep controls available before translated navigation becomes crowded. */
@media (max-width: 1200px) {
  .nav-wrap { gap: 20px; }
  .header nav { gap: 17px; }
  .nav-actions { gap: 14px; }
  .nav-cta { gap: 12px; padding-inline: 12px; }
  .language-picker select { width: 105px; }
}

@media (max-width: 1050px) {
  .header nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: 100%;
    padding: 18px 28px 24px;
    background: #0c1119fa;
    border-bottom: 1px solid #ffffff22;
    font-size: 14px;
  }
  .header nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header nav > a { padding-block: 14px; white-space: normal; }
  .nav-actions { margin-left: 0; margin-inline-start: auto; }
  .panel-link { display: inline-flex; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0 10px 10px;
    order: 4;
    flex-shrink: 0;
  }
  .menu-toggle > span {
    display: block;
    width: 20px;
    height: 1px;
    background: #b0b6c1;
    transition: transform .3s;
  }
  .menu-toggle[aria-expanded=true] > span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .nav-cta { display: none; }
  .nav-actions { gap: 17px; }
  .panel-link { font-size: 11px; gap: 8px; }
}

@media (max-width: 600px) {
  .modal-top { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .modal-actions { flex: 1 0 auto; justify-content: flex-end; gap: 10px; }
  .nav-wrap { gap: 10px; }
  .panel-link { display: none; }
  .language-picker select { width: 100px; min-height: 36px; font-size: 10px; }
  .header nav { top: 100%; padding-inline: 20px; }
  .nav-actions { gap: 0; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { max-width: 100%; }
  .hero-actions .ghost { padding-inline-start: 0; }
  .plan-description { min-height: 0; }
  .plan-extra { grid-template-columns: 1fr; }
  .checkout-steps { flex-wrap: wrap; row-gap: 12px; }
  .checkout-steps > i { min-width: 8px; }
  .order-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .summary-price strong { overflow-wrap: anywhere; }
  .summary-price > span { display: inline-block; }
  .small-modal .button { max-width: 100%; }
  .mail-address > strong { font-size: clamp(21px, 5.3vw, 27px); }
}

@media (max-width: 380px) {
  .nav-wrap { gap: 8px; }
  .header .brand { gap: 8px; }
  .header .brand > span { font-size: 20px; }
  .header .brand img { width: 28px; height: 28px; }
  .header .brand small { font-size: 5.8px; letter-spacing: 1.5px; }
  .language-picker select { width: 96px; }
  .menu-toggle { padding-inline-start: 8px; }
  .modal-top .brand > span { font-size: 21px; }
}

/* Arabic uses natural joining and spacing, with system fonts kept local. */
html[dir=rtl] {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  scroll-padding-top: 96px;
}
html[dir=rtl] :is(h1, h2, h3, h4, p, a, button, label, select, small, strong, span, dt, dd, th, td, legend, summary) {
  letter-spacing: normal;
}
html[dir=rtl] :is(h1, h2, h3, h4) { line-height: 1.4; }
html[dir=rtl] :is(.hero-line em, .closing h2 em, .studio-layout h4) {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-style: normal;
  letter-spacing: normal;
}
html[dir=rtl] :is(.chapter-label, .feature-kicker, .detail-tag, .closing-bottom, .number) {
  font-family: inherit;
  letter-spacing: normal;
}
html[dir=rtl] :is(.eyebrow, .feature-kicker, .chapter-label, .detail-tag, .sidebar-caption) {
  font-size: max(10px, .65rem);
  line-height: 1.9;
}
html[dir=rtl] .hero-description { line-height: 2; }
html[dir=rtl] .brand > span { letter-spacing: -1.4px; line-height: 1; }
html[dir=rtl] .brand-light { letter-spacing: inherit; }
html[dir=rtl] .brand small { letter-spacing: 2.2px; }
html[dir=rtl] .language-picker select { font-size: 12px; }
html[dir=rtl] #scroll-progress { transform-origin: right; }
html[dir=rtl] .skip-link { left: auto; right: 16px; }
html[dir=rtl] .hero-visual {
  right: auto;
  left: -6%;
  mask-image: linear-gradient(270deg, transparent, #000 14%);
}
html[dir=rtl] #cloud-canvas { transform: scaleX(-1); }
html[dir=rtl] .coordinate-top { right: auto; left: 23%; }
html[dir=rtl] .coordinate-bottom { right: auto; left: 19%; }
html[dir=rtl] .hero-index > span { margin-left: 0; margin-inline-start: 8px; }
html[dir=rtl] .story-caption { margin-left: 0; margin-right: auto; }
html[dir=rtl] .possibility-links > a:first-child { padding-left: 27px; padding-right: 0; }
html[dir=rtl] .possibility-links > a:not(:last-child) {
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}
html[dir=rtl] .possibility-links b { margin-left: 0; margin-inline-start: auto; }
html[dir=rtl] :is(.text-button > span, .footer-column a > span) {
  margin-left: 0;
  margin-inline-start: 12px;
}
html[dir=rtl] :is(table, caption) { text-align: start; }
html[dir=rtl] .pricing-assist > .button,
html[dir=rtl] .domain-band > .button { margin-left: 0; margin-inline-start: auto; }
html[dir=rtl] .why-intro > .button { padding-left: 21px; padding-right: 0; }
html[dir=rtl] .faq-list details p { margin-right: 0; margin-inline-end: 25px; }
html[dir=rtl] .closing-orbit { right: auto; left: -200px; }
html[dir=rtl] .footer-column { text-align: start; }
html[dir=rtl] .motion-toggle { right: auto; left: 22px; }
html[dir=rtl] .order-sidebar { border-left: 0; border-right: 1px solid #eceef6; }
html[dir=rtl] .order-sidebar li:before { margin-right: 0; margin-inline-end: 9px; }
html[dir=rtl] .optional { margin-left: 0; margin-inline-start: 5px; }
html[dir=rtl] .order-review dd { text-align: end; }
html[dir=rtl] .small-modal > .close-modal { right: auto; left: 20px; }
html[dir=rtl] .small-modal h2 { padding-right: 0; padding-left: 15px; }
html[dir=rtl] #info-content ul { padding-left: 0; padding-inline-start: 18px; }
html[dir=rtl] :is(.plan-price strong, .summary-price strong, #summary-total,
  .credential-box > strong, #status-content code, .mail-address > strong,
  input[type=email], input[name=domain]) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir=rtl] :is(input[type=email], input[name=domain], .credential-box > strong) { text-align: left; }
html[dir=rtl] :is(.button > span[aria-hidden=true], .inline-link > span[aria-hidden=true],
  .panel-link > span, .nav-cta > span, .possibility-links b,
  .next-step > span, #pay-button > span, #quiz-order > span) {
  display: inline-block;
  transform: scaleX(-1);
}

@media (min-width: 1650px) {
  html[dir=rtl] .hero-visual { left: 0; }
}

@media (max-width: 1150px) {
  html[dir=rtl] .hero-visual { left: -5%; }
  html[dir=rtl] .possibility-links > a:first-child { padding-left: 20px; }
}

@media (max-width: 1050px) {
  html[dir=rtl] .menu-toggle { padding-right: 10px; padding-left: 0; }
}

@media (max-width: 850px) {
  html[dir=rtl] .hero-visual { left: -16%; mask-image: linear-gradient(270deg, transparent, #000 25%); }
  html[dir=rtl] .possibility-links > a:first-child { padding-left: 14px; }
  html[dir=rtl] .closing-orbit { left: -300px; }
}

@media (max-width: 600px) {
  html[dir=rtl] { scroll-padding-top: 86px; }
  html[dir=rtl] h1 { font-size: clamp(39px, 11vw, 64px); line-height: 1.4; }
  html[dir=rtl] .hero-visual {
    left: -18%;
    mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 85%, transparent);
  }
  html[dir=rtl] .hero-index > span { margin-inline-start: 5px; }
  html[dir=rtl] .hero-actions .ghost { padding-right: 0; padding-left: 14px; }
  html[dir=rtl] .chapter-label > span:last-child,
  html[dir=rtl] .pricing-controls > span,
  html[dir=rtl] .closing-bottom > span:last-child,
  html[dir=rtl] .footer-top > div:first-child > p,
  html[dir=rtl] .footer-bottom > div > span,
  html[dir=rtl] .summary-price { text-align: end; }
  html[dir=rtl] .possibility-links > a:first-child { padding-inline: 0; }
  html[dir=rtl] .possibility-links > a:not(:last-child) { border-inline-end: 0; }
  html[dir=rtl] .pricing-assist > .button,
  html[dir=rtl] .domain-band > .button { margin-inline-start: 0; }
  html[dir=rtl] .domain-band > .button { padding-inline: 0; }
  html[dir=rtl] .closing-orbit { left: -280px; }
  html[dir=rtl] .motion-toggle { left: 15px; }
  html[dir=rtl] .order-sidebar { border-right: 0; }
  html[dir=rtl] .small-modal > .close-modal { left: 15px; }
  html[dir=rtl] .brand small { font-size: 6px; letter-spacing: 1.9px; }
}

@media (max-width: 380px) {
  html[dir=rtl] .header .brand small { font-size: 5.8px; letter-spacing: 1.5px; }
}

@media (max-width: 360px) {
  html[dir=rtl] .hero-index { margin-right: 0; margin-inline-end: 85px; }
}