/* Shared language controls and typography; loaded after each page's own styles. */
.site-language { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.4; }
.site-language label { display: inline-flex; align-items: center; gap: 8px; }
.site-language select { display: block; max-width: 148px; min-height: 40px; padding: 7px 11px; border: 1px solid var(--line, #bdc8b0); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.site-language select:focus-visible { outline: 3px solid var(--forest, #167a58); outline-offset: 4px; }
.header .site-language { flex-shrink: 0; }
.footer .site-language { margin-inline-start: auto; }
.footer-top { flex-wrap: wrap; }
.topbar .site-language { flex-shrink: 0; }

/* The bundled editorial serif is Latin-only; system faces cover these scripts. */
html:lang(ru), html:lang(ar) { --serif: Georgia, 'Times New Roman', serif; }
html:not(:lang(en)) .hero h1 em { white-space: normal; }
html:not(:lang(en)) :is(.feature-card, .premium-card, .plan-card, .screen-caption, .image-viewer-header) { overflow-wrap: anywhere; }
html:not(:lang(en)) .screen-caption h3 { text-wrap: balance; }
html:not(:lang(en)) .shell :is(h1, h2) { overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
html:not(:lang(en)) .premium-index a { gap: 12px; }
.image-viewer-stage, .image-viewer-canvas { direction: ltr; }
#screen-counter, .image-viewer-zoom span { direction: ltr; unicode-bidi: isolate; }

/* Arabic uses its native reading direction without flipping the captured images. */
html:lang(ar) { --sans: 'Geeza Pro', 'Noto Sans Arabic', Tahoma, Arial, system-ui, sans-serif; }
html:lang(ar) body { line-height: 1.8; }
html:lang(ar) :is(h1, h2, h3, p, em, span, a, button, summary, li, label, select) { letter-spacing: normal !important; }
html:lang(ar) :is(h1, h2, h3) { line-height: 1.3; font-weight: 600; }
html:lang(ar) :is(.serif, h1 em) { font-style: normal; line-height: 1.3; }
html:lang(ar) .hero :is(h1, h1 em) { line-height: 1.3; }
html:lang(ar) :is(.eyebrow, .card-kicker, .feature-label) { text-transform: none; }
html[dir="rtl"] .wordmark { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .brand-icon { margin-right: 0; margin-inline-end: 11px; }
html[dir="rtl"] .header nav a::after { transform-origin: right; }
html[dir="rtl"] .menu-toggle { margin-left: 0; margin-inline-start: auto; }
html[dir="rtl"] .hero-food { left: auto; right: 0; }
html[dir="rtl"] .hero-screen { right: auto; left: 0; }
html[dir="rtl"] .capture-visual .story-screen { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .back-screen { right: auto; left: 6px; }
html[dir="rtl"] .front-screen { left: auto; right: 0; }
html[dir="rtl"] .screen-selector button { text-align: start; }
html[dir="rtl"] :is(#gallery-prev, #gallery-next) > [aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .screen-selector button[aria-pressed="true"] { padding-left: 0; padding-right: 16px; box-shadow: inset -3px 0 #536d3d; }
html[dir="rtl"] .screen-selector button[aria-pressed="true"]::after { margin-left: 0; margin-right: auto; padding-right: 0; padding-left: 5px; transform: scaleX(-1); }
html[dir="rtl"] .premium-card li { padding-left: 0; padding-right: 19px; }
html[dir="rtl"] .premium-card li::before { left: auto; right: 0; transform: scaleX(-1); }
html[dir="rtl"] .plan-card li { padding-left: 0; padding-inline-start: 21px; }
html[dir="rtl"] .plan-card li::before { left: auto; right: 0; }
html[dir="rtl"] .benefit-list li::before { transform: scaleX(-1); }
html[dir="rtl"] .premium-card .eyebrow span { margin-right: 0; margin-inline-end: 9px; }
html[dir="rtl"] .feature-card.has-meal-photo .feature-meal-trigger { right: auto; left: -25px; }
html[dir="rtl"] .image-viewer-header h2 { text-align: right; }
html[dir="rtl"] .faqs details p { padding-right: 0; padding-inline-end: 15px; }
html[dir="rtl"] .habit-card { padding-right: 0; padding-inline-end: 22px; }
html[dir="rtl"] .habit-card + .habit-card { border-left: 0; border-inline-start: 1px solid #c5d0bb; padding-left: 0; padding-inline-start: 30px; }
html[dir="rtl"] .plan-card + .plan-card { border-left: 0; border-inline-start: 1px solid #c3cfb5; }
html[dir="rtl"] .footer-bottom > a { margin-left: 0; margin-inline-start: auto; }

/* Allow translated navigation and a language control to share the masthead. */
@media (min-width: 801px) and (max-width: 1199px) {
  .header { gap: 12px; }
  .header nav { gap: 0; }
  .header nav a { padding-inline: 6px; font-size: 11px; }
  .header-cta { padding-inline: 12px; font-size: 11px; max-width: 160px; text-align: center; }
  .header .site-language select { max-width: 118px; }
  .header .site-language > span, .header .site-language label > span { display: none; }
}
@media (max-width: 800px) {
  .header { gap: 10px; }
  .header .site-language > span, .header .site-language label > span { display: none; }
  .header .site-language select { max-width: 118px; min-height: 44px; padding-inline: 8px; }
  .topbar .site-language { align-self: flex-start; }
  html[dir="rtl"] .hero, html[dir="rtl"] .promise-bar .wrap > span { text-align: start; }
  .footer .site-language { margin-inline-start: 0; }
  html[dir="rtl"] .habit-card, html[dir="rtl"] .habit-card + .habit-card { padding-inline: 0; border-inline-start: 0; }
  html[dir="rtl"] .plan-card + .plan-card { border: 1px solid #c3cfb5; border-top: 0; }
}
@media (max-width: 600px) {
  .header .site-language select { max-width: 108px; }
  .footer-top nav { flex-wrap: wrap; }
  .footer-bottom { gap: 16px; }
  .site-language select { min-height: 44px; }
  html:lang(ar) .hero :is(h1, h1 em) { font-size: clamp(38px, 10vw, 58px); }
  html:lang(ar) .hero-description { font-size: 16px; line-height: 1.9; }
  html:lang(ar) .feature-label { font-size: 13px; }
  html:lang(ar) .premium-card .eyebrow { font-size: 12px; }
  html[dir="rtl"] .premium-card { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .header { gap: 8px; }
  .header .wordmark { font-size: 20px; }
  .header .brand-icon { width: 26px; height: 26px; margin-inline-end: 8px; }
  .header .site-language select { max-width: 88px; font-size: 11px; padding-inline: 5px; }
  .header .menu-toggle { min-width: 44px; min-height: 44px; padding: 6px 10px; gap: 0; font-size: 0; }
  .header .menu-toggle > span { font-size: 20px; }
}