.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-selector {
  position: relative;
  flex: 0 0 auto;
  z-index: 121;
}

.language-selector__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #f3f0eb;
  background: rgba(6, 6, 6, 0.72);
  font: 600 11px/1 Inter, sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.language-selector__trigger::-webkit-details-marker {
  display: none;
}

.language-selector__flag {
  font-size: 16px;
  line-height: 1;
}

.language-selector__chevron {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.language-selector[open] .language-selector__chevron {
  transform: translateY(2px) rotate(225deg);
}

.language-selector__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: 184px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(12, 12, 12, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.language-selector__option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 9px;
  color: rgba(245, 240, 235, 0.82);
  font: 500 12px/1.2 Inter, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.language-selector__option:hover,
.language-selector__option:focus-visible,
.language-selector__option.is-current {
  color: #f5f0eb;
  background: rgba(255, 255, 255, 0.09);
}

.language-selector__option-code {
  color: rgba(245, 240, 235, 0.48);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.language-selector--mobile {
  margin: 8px 0 20px;
}

.desktop-actions .language-selector {
  order: 3;
}

.language-selector--desktop .language-selector__trigger {
  min-width: 42px;
  min-height: 42px;
  padding: 0 9px;
  border-color: rgba(255, 255, 255, 0.14);
}

.language-selector--desktop .language-selector__code {
  display: none;
}

.language-selector--mobile,
.language-selector--mobile .language-selector__trigger {
  width: 100%;
}

/* WebKit can partially clip a sticky header when an ancestor uses overflow-x: clip.
   On non-mobile Safari, keep the header in the viewport and preserve its flow space. */
@media (min-width: 768px) {
  html.is-safari .site-header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  html.is-safari .page {
    padding-top: 75px;
  }
}

@media (min-width: 1240px) {
  html.is-safari .page {
    padding-top: 79px;
  }
}

.language-selector--mobile .language-selector__trigger {
  justify-content: flex-start;
  min-height: 46px;
  padding-inline: 16px;
}

.language-selector--mobile .language-selector__chevron {
  margin-left: auto;
}

.language-selector--mobile .language-selector__menu {
  position: static;
  width: 100%;
  margin-top: 8px;
}

.site-notice {
  position: fixed;
  z-index: 100;
  top: 90px;
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #f7f4ef;
  background: rgba(18, 18, 18, 0.96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  font: 500 14px/1.45 Inter, sans-serif;
  transition: opacity .2s ease, transform .2s ease;
}

.site-notice.is-dismissing {
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
}

.site-notice--error {
  border-color: rgba(232, 66, 53, 0.58);
}

.contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.field__error {
  display: block;
  margin-top: 7px;
  color: #ffbcb6;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.contact-form__privacy-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-form__privacy-link:hover,
.contact-form__privacy-link:focus-visible {
  color: var(--color-accent);
}

@keyframes myatom-reading-progress {
  to {
    transform: scaleX(1);
  }
}

@supports (animation-timeline: scroll()) {
  .reading-progress {
    transform: scaleX(0) !important;
    transform-origin: left center;
    animation: myatom-reading-progress linear both;
    animation-timeline: scroll(root);
  }

  html[dir="rtl"] .reading-progress {
    transform-origin: right center;
  }
}

[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  [data-responsive-variant="desktop"] {
    display: none !important;
  }
}

/* Arabic finishing pass: component rules above deliberately keep the LTR
   composition, while these text-level rules make every Arabic reading block
   follow a single, predictable right-hand edge. */
html[dir="rtl"] main :is(
  .story-chapter p,
  .story-bridge p,
  .closing-block__heading,
  .closing-block__text,
  .process-section__label,
  .process-section__title,
  .support-section__label,
  .support-section__title,
  .support-protocol__value,
  .support-protocol__note,
  .roi-section__note,
  .elite-proof-card__text,
  .quote-block--contact,
  .quote-block--contact p
) {
  direction: rtl;
  text-align: right;
}

/* These are editorial pull-quotes, so centring them retains the original
   visual hierarchy without making Arabic read from the wrong side. */
html[dir="rtl"] main :is(
  .quote-block--results,
  .results-testimony__quote-title,
  .results-testimony__story
) {
  direction: rtl;
  text-align: center;
}

/* Story quotation and MYATOM Protocol use explicit LTR rules in the original
   composition. Restore the Arabic reading edge and place the quote rule on
   the logical right, without altering the Spanish treatment. */
html[dir="rtl"] main .story-inline-quote {
  border-left-width: 0;
  border-right: 1px solid var(--color-accent);
  padding: 2px 14px 2px 0;
}

html[dir="rtl"] main :is(
  .story-inline-quote p,
  .support-protocol__main h3,
  .support-protocol__main p
) {
  direction: rtl;
  text-align: right;
}

/* Keep the ROI table's numbers centred, while moving its reading order and
   descriptive column to the right as Arabic readers expect. */
html[dir="rtl"] main .roi-simulation-table {
  direction: rtl;
}

html[dir="rtl"] main .roi-simulation-table :is(th, td) {
  direction: rtl;
}

html[dir="rtl"] main .roi-simulation-table th:first-child,
html[dir="rtl"] main .roi-simulation-table__scenario {
  text-align: right;
}

html[dir="rtl"] main .roi-simulation-table :is(th:not(:first-child), td) {
  text-align: center;
}

@media (max-width: 767px) {
  html[dir="rtl"] main .story-inline-quote {
    padding-right: 12px;
  }
}

/* Visual order is separate from text direction. These groups are laid out as
   LTR grids in the base design, so reverse their item order for Arabic and
   then place each icon on its logical leading (right) edge. */
html[dir="rtl"] main :is(.hero-choice-grid, .hero-stats, .problem-list-grid) {
  direction: rtl;
}

html[dir="rtl"] main .hero-choice-card {
  direction: rtl;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[dir="rtl"] main .hero-choice-card__copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .hero-stat:not(:first-child) {
  border-left: 0;
  border-right: 1px solid #f5f0eb14;
}

/* Keep the card grid itself physical so that the icon has a deterministic
   right-hand column; only the copy inside it needs RTL text shaping. */
html[dir="rtl"] main .problem-list-item {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 48px;
}

html[dir="rtl"] main .problem-list-item__icon {
  grid-column: 2;
}

html[dir="rtl"] main .problem-list-item__content {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

@media (max-width: 767px) {
  html[dir="rtl"] main .hero-stats--compact .hero-stat + .hero-stat {
    border-left: 0;
    border-right: 1px solid #f5f0eb1f;
  }

  html[dir="rtl"] main .problem-list-item {
    direction: rtl;
    flex-direction: column;
  }

  html[dir="rtl"] main .problem-list-item__icon,
  html[dir="rtl"] main .problem-list-item__content {
    grid-column: auto;
  }

  html[dir="rtl"] main .problem-list-item__content {
    text-align: center;
  }
}

@media (min-width: 768px) {
  [data-responsive-variant="mobile"] {
    display: none !important;
  }
}

@media (max-width: 1239px) {
  [data-responsive-variant="wide"] {
    display: none !important;
  }
}

@media (min-width: 1240px) {
  [data-responsive-variant="compact"] {
    display: none !important;
  }
}

/* Arabic keeps the landing's original physical composition: image, CTA and
   navigation stay in the same places; only the reading direction changes. */
html[dir="rtl"] body,
html[dir="rtl"] .site-shell {
  direction: ltr;
}

html[dir="rtl"] main :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, cite, label, input, textarea, select) {
  direction: rtl;
}

/* Inline copy is used inside cards, buttons and statistic rows. Giving these
   text wrappers their own direction keeps Arabic readable without changing
   the physical order of the landing's grids, images or calls to action. */
html[dir="rtl"] main span {
  direction: rtl;
}

/* Controls and linked cards keep their physical position in the existing
   layout, while their mixed Arabic/Latin labels resolve as natural phrases. */
html[dir="rtl"] main :is(a, button, summary) {
  unicode-bidi: plaintext;
}

/* The Hero headline combines Arabic, the MYATOM brand and numbers. Treat
   each visual line as its own bidi paragraph, so the brand never jumps to a
   separate side of the Arabic sentence. */
html[dir="rtl"] .hero-heading-line,
html[dir="rtl"] .hero-heading-mobile__line {
  direction: rtl;
  unicode-bidi: plaintext;
}

@media (min-width: 1240px) {
  html[dir="rtl"] .hero-copy h1 {
    width: 100%;
    max-width: none;
    text-align: right;
  }

  html[dir="rtl"] .hero-heading-line {
    width: 100%;
    text-align: right;
  }

  html[dir="rtl"] .hero-opening,
  html[dir="rtl"] .hero-body-group--desktop .hero-body,
  html[dir="rtl"] .hero-impact {
    text-align: right;
  }
}

@media (max-width: 1239px) {
  html[dir="rtl"] .hero-copy h1,
  html[dir="rtl"] .hero-heading-line,
  html[dir="rtl"] .hero-heading-mobile__line {
    text-align: center;
  }
}

html[dir="rtl"] main :is(.hero-choice-card__copy, .hero-stat__text, .hero-stat__label, .pricing-card__copy, .profile-choice__option-copy) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .site-header :is(.desktop-nav a, .desktop-actions .button span, .mobile-menu__nav a, .mobile-menu__actions .button span) {
  direction: rtl;
}

html[dir="rtl"] .site-footer__column {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .site-footer :is(p, li, a, span) {
  direction: rtl;
}

html[dir="rtl"] main :is(input, textarea, select) {
  text-align: right;
}

html[dir="rtl"] .language-selector__menu {
  right: 0;
  left: auto;
}

@media (max-width: 1180px) {
  .language-selector--desktop {
    display: none;
  }
}

@media (min-width: 1181px) {
  .language-selector--mobile {
    display: none;
  }
}

/* Arabic QA pass ---------------------------------------------------------
   The page intentionally keeps its Spanish composition (media and section
   columns do not flip), but every Arabic reading surface needs its own RTL
   alignment and control order.  These rules are scoped to Arabic only. */
html[dir="rtl"] main :is(a, button, summary) {
  direction: rtl;
}

html[dir="rtl"] main :is(
  .problem-list-item,
  .difference-section__intro,
  .difference-highlight,
  .difference-pillar,
  .difference-pillar-card,
  .story-intro,
  .story-title,
  .story-bridge,
  .story-chapter,
  .story-timeline__item,
  .study-card,
  .support-card,
  .support-protocol,
  .process-section__intro,
  .process-step,
  .process-summary,
  .roi-section__copy,
  .audience-panel,
  .audience-feature,
  .elite-proof-card,
  .honesty-item,
  .results-accordion__trigger,
  .results-accordion__content-inner,
  .results-testimony,
  .pricing-card,
  .pricing-section__group,
  .faq-item,
  .closing-block,
  .profile-choice,
  .contact-copy,
  .contact-list,
  .application-showcase,
  .application-parameter-card
) {
  direction: rtl;
  text-align: right;
}

/* Cards with an icon or accent use Arabic reading order internally while
   retaining their existing place in the broader grid/carousel. */
html[dir="rtl"] main .problem-list-item {
  grid-template-columns: minmax(0, 1fr) 48px;
}

html[dir="rtl"] main .problem-list-item__icon {
  grid-column: 2;
}

html[dir="rtl"] main .problem-list-item__content {
  grid-column: 1;
}

html[dir="rtl"] main .difference-pillar-card__feature {
  grid-template-columns: minmax(0, 1fr) 36px;
  text-align: right;
}

html[dir="rtl"] main .difference-pillar-card__feature-icon {
  grid-column: 2;
}

html[dir="rtl"] main .difference-pillar-card__feature-copy {
  grid-column: 1;
}

html[dir="rtl"] main .honesty-item__body {
  grid-template-columns: minmax(0, 1fr) 30px;
}

html[dir="rtl"] main .honesty-item__accent {
  grid-column: 2;
}

html[dir="rtl"] main :is(.honesty-item__title, .honesty-item__text) {
  grid-column: 1;
}

html[dir="rtl"] main .elite-proof-card {
  grid-template-columns: minmax(0, 1fr) 30px;
}

html[dir="rtl"] main .elite-proof-card__icon {
  grid-column: 2;
}

html[dir="rtl"] main .elite-proof-card__body {
  grid-column: 1;
}

html[dir="rtl"] main :is(.study-card, .support-card) {
  align-items: flex-end;
}

html[dir="rtl"] main .study-card__link {
  flex-direction: row-reverse;
}

html[dir="rtl"] main .results-accordion__trigger {
  grid-template-columns: auto minmax(0, 1fr);
}

html[dir="rtl"] main .results-accordion__title {
  grid-column: 2;
}

html[dir="rtl"] main .results-accordion__icon {
  grid-column: 1;
}

html[dir="rtl"] main .faq-item__button {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] main .faq-item__panel-inner {
  padding-right: 0;
  padding-left: clamp(0px, 5vw, 90px);
  text-align: right;
}

html[dir="rtl"] main .pricing-card__top {
  align-items: flex-end;
  text-align: right;
}

html[dir="rtl"] main .pricing-card__price-row {
  justify-content: flex-end;
}

html[dir="rtl"] main .profile-choice__option {
  padding: 16px 18px 16px 54px;
  text-align: right;
}

html[dir="rtl"] main .profile-choice__option-indicator {
  right: auto;
  left: 22px;
}

html[dir="rtl"] .site-header :is(.desktop-nav, .desktop-actions),
html[dir="rtl"] .mobile-menu__panel,
html[dir="rtl"] .language-selector {
  direction: rtl;
}

html[dir="rtl"] .mobile-menu__panel,
html[dir="rtl"] .mobile-menu__nav a {
  text-align: right;
}

html[dir="rtl"] .mobile-menu__nav a {
  padding: 16px 0 16px 34px;
}

html[dir="rtl"] .mobile-menu__nav a::after {
  right: auto;
  left: 6px;
  transform: translateY(-50%) rotate(-135deg);
}

html[dir="rtl"] .language-selector__menu {
  text-align: right;
}

@media (max-width: 767px) {
  html[dir="rtl"] main .audience-selector {
    direction: rtl;
    justify-items: end;
    text-align: right;
  }

  html[dir="rtl"] main .support-card__trigger-main {
    grid-template-columns: minmax(0, 1fr) 42px;
    text-align: right;
  }
}

/* RTL visual order — this must remain last: the base stylesheet contains
   late desktop/mobile component rules that otherwise restore LTR placement. */
html[dir="rtl"] main :is(.hero-choice-grid, .hero-stats, .problem-list-grid) {
  direction: rtl;
}

html[dir="rtl"] main .hero-choice-card {
  direction: rtl;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[dir="rtl"] main .hero-choice-card__copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .hero-stat:not(:first-child) {
  border-left: 0;
  border-right: 1px solid #f5f0eb14;
}

html[dir="rtl"] main .problem-list-item {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 48px;
}

html[dir="rtl"] main .problem-list-item__icon {
  grid-column: 2;
}

html[dir="rtl"] main .problem-list-item__content {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .story-inline-quote {
  border-left-width: 0;
  border-right: 1px solid var(--color-accent);
  padding: 2px 14px 2px 0;
}

html[dir="rtl"] main :is(
  .story-inline-quote p,
  .support-protocol__main h3,
  .support-protocol__main p,
  .roi-simulation-table th,
  .roi-simulation-table td
) {
  direction: rtl;
}

html[dir="rtl"] main :is(
  .story-inline-quote p,
  .support-protocol__main h3,
  .support-protocol__main p,
  .roi-simulation-table th:first-child,
  .roi-simulation-table__scenario
) {
  text-align: right;
}

html[dir="rtl"] main .roi-simulation-table {
  direction: rtl;
}

html[dir="rtl"] main .roi-simulation-table :is(th:not(:first-child), td) {
  text-align: center;
}

@media (max-width: 767px) {
  html[dir="rtl"] main .hero-stats--compact .hero-stat + .hero-stat {
    border-left: 0;
    border-right: 1px solid #f5f0eb1f;
  }

  html[dir="rtl"] main .problem-list-item {
    direction: rtl;
    flex-direction: column;
  }

  html[dir="rtl"] main .problem-list-item__icon,
  html[dir="rtl"] main .problem-list-item__content {
    grid-column: auto;
  }

  html[dir="rtl"] main .problem-list-item__content {
    text-align: center;
  }

  html[dir="rtl"] main .story-inline-quote {
    padding-right: 12px;
  }
}

/* Icon-and-copy components: use a physical grid for placement and RTL only
   on the copy itself. This avoids CSS Grid reversing the icon column twice. */
html[dir="rtl"] main .difference-pillar-card__feature {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 36px;
}

html[dir="rtl"] main .difference-pillar-card__feature-icon {
  grid-column: 2;
}

html[dir="rtl"] main .difference-pillar-card__feature-copy {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .honesty-item__body {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 30px;
}

html[dir="rtl"] main .honesty-item__accent {
  grid-column: 2;
}

html[dir="rtl"] main :is(.honesty-item__title, .honesty-item__text) {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .elite-proof-card {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 30px;
}

html[dir="rtl"] main .elite-proof-card__icon {
  grid-column: 2;
}

html[dir="rtl"] main .elite-proof-card__body {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .results-accordion__trigger {
  direction: ltr;
  grid-template-columns: 20px minmax(0, 1fr);
}

html[dir="rtl"] main .results-accordion__icon {
  grid-column: 1;
}

html[dir="rtl"] main .results-accordion__title {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .faq-item__button {
  direction: ltr;
  flex-direction: row-reverse;
}

html[dir="rtl"] main .faq-item__question {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .profile-choice__option {
  padding: 16px 54px 16px 18px;
  text-align: right;
}

html[dir="rtl"] main .profile-choice__option-indicator {
  right: 22px;
  left: auto;
}

html[dir="rtl"] main :is(.hero-choice-card__arrow, .study-card__link) svg.lucide-arrow-right {
  transform: scaleX(-1);
  transform-origin: center;
}

@media (min-width: 1240px) {
  html[dir="rtl"] main .hero-opening {
    border-left: 0;
    border-right: 2px solid var(--color-accent);
    padding-left: 0;
    padding-right: 16px;
  }
}

html[dir="rtl"] main .quote-block--contact {
  border-left: 0;
  border-right: 2px solid #e84235b8;
  margin-right: 0;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 0;
  text-align: right;
}

html[dir="rtl"] main .quote-block--contact::before {
  right: 4px;
  left: auto;
}

html[dir="rtl"] main :is(.quote-block--contact p, .quote-block--contact cite) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .pricing-card__callout {
  border-left: 0;
  border-right: 2px solid var(--color-accent);
}

html[dir="rtl"] main .support-card::before {
  right: 0;
  left: auto;
}

/* Arabic layout parity
   Keep the physical composition identical to the Spanish page. RTL belongs to
   the copy, not to the grids, flex rows, media frames or decorative elements. */
html[dir="rtl"] .site-header :is(.desktop-nav, .desktop-actions),
html[dir="rtl"] .language-selector,
html[dir="rtl"] .mobile-menu__panel,
html[dir="rtl"] .mobile-menu__nav,
html[dir="rtl"] .mobile-menu__actions,
html[dir="rtl"] main .hero-media__image,
html[dir="rtl"] main .hero-choice-grid,
html[dir="rtl"] main .hero-choice-card,
html[dir="rtl"] main .hero-stats,
html[dir="rtl"] main .problem-list-grid,
html[dir="rtl"] main .problem-list-item,
html[dir="rtl"] main .story-timeline__item,
html[dir="rtl"] main .difference-pillar-card__feature,
html[dir="rtl"] main .honesty-item__body,
html[dir="rtl"] main .elite-proof-card,
html[dir="rtl"] main .results-accordion__trigger,
html[dir="rtl"] main .process-step,
html[dir="rtl"] main .study-card,
html[dir="rtl"] main .support-card,
html[dir="rtl"] main .study-card__link,
html[dir="rtl"] main .audience-selector,
html[dir="rtl"] main .pricing-card__top,
html[dir="rtl"] main .pricing-card__price-row,
html[dir="rtl"] main .faq-item__button,
html[dir="rtl"] main .profile-choice__option,
html[dir="rtl"] main .roi-simulation-table {
  direction: ltr;
}

html[dir="rtl"] .site-header :is(.desktop-nav a, .desktop-actions .button span),
html[dir="rtl"] .language-selector__current,
html[dir="rtl"] .language-selector__option,
html[dir="rtl"] .mobile-menu__nav a,
html[dir="rtl"] .mobile-menu__actions .button span {
  direction: rtl;
}

html[dir="rtl"] main .hero-media__image {
  justify-content: flex-end;
}

html[dir="rtl"] main .hero-choice-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[dir="rtl"] main .hero-choice-card__icon {
  grid-column: 1;
}

html[dir="rtl"] main .hero-choice-card__copy {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .hero-choice-card__arrow {
  grid-column: 3;
}

html[dir="rtl"] main .hero-stat:not(:first-child) {
  border-left: 1px solid #f5f0eb1f;
  border-right: 0;
}

html[dir="rtl"] main .problem-list-item {
  grid-template-columns: 48px minmax(0, 1fr);
}

html[dir="rtl"] main .problem-list-item__icon {
  grid-column: 1;
}

html[dir="rtl"] main .problem-list-item__content {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .story-timeline__item {
  grid-template-columns: 82px 24px 136px;
}

html[dir="rtl"] main .story-timeline__year {
  direction: ltr;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .story-timeline__marker {
  direction: ltr;
  grid-column: 2;
}

html[dir="rtl"] main .story-timeline__text {
  direction: rtl;
  grid-column: 3;
  text-align: right;
}

html[dir="rtl"] main .difference-pillar-card__feature {
  grid-template-columns: 36px minmax(0, 1fr);
}

html[dir="rtl"] main .difference-pillar-card__feature-icon {
  grid-column: 1;
}

html[dir="rtl"] main .difference-pillar-card__feature-copy {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .honesty-item__body {
  grid-template-columns: 24px minmax(0, 1fr);
}

html[dir="rtl"] main .honesty-item__accent {
  grid-column: 1;
}

html[dir="rtl"] main :is(.honesty-item__title, .honesty-item__text) {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .elite-proof-card {
  grid-template-columns: 38px minmax(0, 1fr);
}

html[dir="rtl"] main .elite-proof-card__icon {
  grid-column: 1;
}

html[dir="rtl"] main .elite-proof-card__body {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .results-accordion__trigger {
  grid-template-columns: minmax(0, 1fr) 20px;
}

html[dir="rtl"] main .results-accordion__title {
  direction: rtl;
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] main .results-accordion__icon {
  grid-column: 2;
}

html[dir="rtl"] main .process-step__number {
  grid-column: 1;
}

html[dir="rtl"] main .process-step__body {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main :is(.study-card, .support-card) {
  align-items: flex-start;
  text-align: right;
}

html[dir="rtl"] main :is(
  .study-card__eyebrow,
  .study-card__title,
  .study-card__copy,
  .study-card__meta,
  .support-card__content,
  .support-card__row
) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .study-card__link {
  flex-direction: row;
}

html[dir="rtl"] main .study-card__link span {
  direction: rtl;
}

html[dir="rtl"] main .pricing-card__top {
  align-items: flex-start;
}

html[dir="rtl"] main .pricing-card__price-row {
  justify-content: flex-start;
}

html[dir="rtl"] main .pricing-card__top :is(
  .pricing-card__eyebrow,
  .pricing-card__name,
  .pricing-card__description,
  .pricing-card__price-note
) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .faq-item__button {
  flex-direction: row;
}

html[dir="rtl"] main .faq-item__question {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .profile-choice__option {
  padding: 16px 54px 16px 18px;
}

html[dir="rtl"] main .profile-choice__option-copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .profile-choice__option-indicator {
  right: 22px;
  left: auto;
}

html[dir="rtl"] main .roi-simulation-table :is(th, td) {
  direction: ltr;
}

html[dir="rtl"] main .roi-simulation-table th:first-child,
html[dir="rtl"] main .roi-simulation-table__scenario {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .roi-simulation-table :is(th:not(:first-child), td:not(.roi-simulation-table__scenario)) {
  text-align: center;
}

html[dir="rtl"] main :is(.hero-choice-card__arrow, .study-card__link) svg.lucide-arrow-right {
  transform: none;
}

html[dir="rtl"] main .quote-block--contact {
  border-left: 2px solid #e84235b8;
  border-right: 0;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 16px;
}

html[dir="rtl"] main .quote-block--contact::before {
  right: auto;
  left: 4px;
}

html[dir="rtl"] main .pricing-card__callout {
  border-left: 2px solid var(--color-accent);
  border-right: 0;
}

html[dir="rtl"] main .support-card::before {
  right: auto;
  left: 0;
}

@media (min-width: 1240px) {
  html[dir="rtl"] main .hero-opening {
    border-left: 2px solid var(--color-accent);
    border-right: 0;
    padding-left: 16px;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  html[dir="rtl"] main .problem-list-item {
    direction: ltr;
    grid-template-columns: none;
  }

  html[dir="rtl"] main .problem-list-item__icon,
  html[dir="rtl"] main .problem-list-item__content {
    grid-column: auto;
  }

  html[dir="rtl"] main .problem-list-item__content {
    direction: rtl;
    text-align: center;
  }

  html[dir="rtl"] .mobile-menu__nav a {
    padding: 16px 34px 16px 0;
    text-align: right;
  }

  html[dir="rtl"] .mobile-menu__nav a::after {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* Final structural reset for Arabic.
   Any component that places media, an icon, a marker or a control keeps the
   same LTR geometry as Spanish. Its textual descendants remain RTL. */
html[dir="rtl"] main :is(a, button, summary),
html[dir="rtl"] main :is(
  .difference-pillar,
  .difference-pillar__heading,
  .difference-pillar__feature,
  .difference-pillar-card,
  .difference-pillar-card__meta,
  .audience-panel,
  .audience-feature,
  .audience-feature__body,
  .support-protocol,
  .support-protocol__aside,
  .process-summary,
  .process-specs__trigger,
  .application-showcase,
  .application-showcase__frame,
  .application-showcase__content,
  .application-showcase__notes,
  .application-showcase__note,
  .application-parameters,
  .application-parameter-card,
  .application-parameter-card__header,
  .applications-switch__button,
  .profile-choice,
  .profile-choice__grid,
  .pricing-section__group,
  .pricing-card,
  .pricing-card__inner,
  .pricing-card__actions,
  .pricing-card__highlights,
  .pricing-card__highlights li,
  .pricing-card__reassurance,
  .pricing-card__toggle,
  .results-testimony__details,
  .results-testimony__closing,
  .results-commitment__item,
  .faq-item__panel,
  .closing-block,
  .contact-distribution,
  .time-calculator__stepper
) {
  direction: ltr;
}

/* Keep the visual carousel indicators compact while providing comfortable
   touch targets on phones and tablets. */
@media (max-width: 1239px) {
  .time-calculator__stepper {
    min-width: 44px;
    min-height: 44px;
  }

  :is(
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button
  ) {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent !important;
    /* The base stylesheet scales the active button. That changes the spacing
       between dots as the active card changes, which makes the indicator look
       as if it jumps on touch devices. The pseudo-element below is the only
       part that should grow. */
    transform: none !important;
  }

  :is(
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button
  )::after {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 6px;
    height: 6px;
    content: "";
    background: rgba(245, 240, 235, 0.34);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  :is(
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button
  ).is-active::after {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
  }

  .support-carousel-dots__button {
    width: 44px;
    height: 44px;
  }

  /* Use the accompaniment indicator as the shared visual language. The
     buttons stay compact so a long set of cards does not spread across the
     whole phone, while the active state remains easy to identify. */
  :is(
    .problem-list-dots .problem-list-dot,
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button,
    .support-carousel-dots__button
  ) {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    cursor: pointer;
    transform: none !important;
  }

  :is(
    .problem-list-dots,
    .difference-pillars-carousel-dots,
    .science-carousel-dots,
    .support-carousel-dots
  ) {
    gap: 4px;
  }

  :is(
    .problem-list-dots .problem-list-dot,
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button,
    .support-carousel-dots__button
  )::after {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 999px;
    background: rgba(245, 240, 235, 0.24);
    transform: translate(-50%, -50%);
    transition: all var(--transition-fast);
  }

  :is(
    .problem-list-dots .problem-list-dot,
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button,
    .support-carousel-dots__button
  ).is-active::after {
    width: 18px;
    height: 8px;
    background: var(--color-accent);
  }

  :is(
    .problem-list-dots .problem-list-dot,
    .difference-pillars-carousel-dots__button,
    .science-carousel-dots__button,
    .support-carousel-dots__button
  ):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

/* Keep the same compact accompaniment indicator at every viewport size. */
:is(
  .problem-list-dots .problem-list-dot,
  .difference-pillars-carousel-dots__button,
  .science-carousel-dots__button,
  .support-carousel-dots__button
) {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  cursor: pointer;
  transform: none !important;
}

:is(
  .problem-list-dots,
  .difference-pillars-carousel-dots,
  .science-carousel-dots,
  .support-carousel-dots
) {
  gap: 4px;
}

:is(
  .problem-list-dots .problem-list-dot,
  .difference-pillars-carousel-dots__button,
  .science-carousel-dots__button,
  .support-carousel-dots__button
)::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 999px;
  background: rgba(245, 240, 235, 0.24);
  transform: translate(-50%, -50%);
  transition: all var(--transition-fast);
}

:is(
  .problem-list-dots .problem-list-dot,
  .difference-pillars-carousel-dots__button,
  .science-carousel-dots__button,
  .support-carousel-dots__button
).is-active::after {
  width: 18px;
  height: 8px;
  background: var(--color-accent);
}

:is(
  .problem-list-dots .problem-list-dot,
  .difference-pillars-carousel-dots__button,
  .science-carousel-dots__button,
  .support-carousel-dots__button
):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

html[dir="rtl"] main .difference-pillar__feature {
  grid-template-columns: 38px minmax(0, 1fr);
}

html[dir="rtl"] main .difference-pillar__feature-icon {
  grid-column: 1;
}

html[dir="rtl"] main .difference-pillar__feature-copy {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main .application-showcase__note {
  grid-template-columns: 24px minmax(0, 1fr);
}

html[dir="rtl"] main .application-showcase__note > :first-child {
  grid-column: 1;
}

html[dir="rtl"] main .application-showcase__note p {
  direction: rtl;
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] main :is(
  .application-parameter-card__copy,
  .application-parameter-card__header h3,
  .audience-feature__copy,
  .audience-feature__body h3,
  .audience-feature__body p,
  .support-protocol__aside,
  .support-protocol__aside p,
  .pricing-card__inner h3,
  .pricing-card__inner p,
  .pricing-card__highlights li span,
  .pricing-card__reassurance,
  .pricing-card__toggle span,
  .results-testimony__details,
  .results-testimony__closing,
  .results-commitment__item,
  .faq-item__panel p,
  .closing-block,
  .contact-distribution
) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .contact-list li {
  text-align: left;
}

html[dir="rtl"] main .contact-list li :is(span, a) {
  direction: rtl;
  text-align: right;
}

/* Keep the client-facing quotations and editorial sign-off consistently italic. */
:is(
  .brand-lockup__motto,
  .closing-quote,
  .site-footer__motto,
  .story-inline-quote p,
  .quote-block--story p,
  .results-testimony__quote-title,
  .quote-block--contact p
) {
  font-style: italic;
}

.mobile-menu__brand {
  display: grid;
  gap: 4px;
}

.mobile-menu__brand .brand-lockup__motto {
  max-width: 31ch;
  font-family: var(--font-display);
  font-size: 0.7rem;
  line-height: 1.15;
}

.mobile-menu__motto {
  max-width: 31ch;
  margin: 0 0 14px;
  color: var(--color-soft);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.25;
}

.inertia-section__step-text strong {
  font-weight: 700;
}

/* A visible but subordinate lead-in on phone-sized screens. */
@media (max-width: 767px) {
  .hero-opening {
    color: #f5f0eb;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6.25vw, 1.625rem);
    font-style: italic;
  }
}

/* Give the hero's opening statement a little more presence on desktop only. */
@media (min-width: 1240px) {
  .hero-opening {
    font-size: clamp(1.34rem, 1.65vw, 1.52rem);
  }
}

/* The page shell remains physically LTR so media layouts stay stable, but the
   Arabic footer is entirely textual. Give it its own RTL flow so every
   column, list and bottom action shares the same right-hand edge. */
html[dir="rtl"] .site-footer,
html[dir="rtl"] .site-footer__inner,
html[dir="rtl"] .site-footer__bottom {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .site-footer__inner {
  justify-items: end;
}

html[dir="rtl"] .site-footer__column {
  justify-self: end;
  align-items: flex-end;
}

html[dir="rtl"] .site-footer :is(.site-footer__contact, .site-footer__legal) {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] .site-footer__contact li,
html[dir="rtl"] .site-footer__bottom,
html[dir="rtl"] .site-footer__backtop {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .site-footer__contact li,
html[dir="rtl"] .site-footer__backtop {
  justify-content: flex-start;
}

@media (max-width: 1239px) {
  html[dir="rtl"] .site-footer__inner,
  html[dir="rtl"] .site-footer__bottom {
    align-items: flex-end;
  }

  html[dir="rtl"] .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  html[dir="rtl"] .site-footer__column,
  html[dir="rtl"] .site-footer :is(.site-footer__contact, .site-footer__legal) {
    width: 100%;
    margin-inline: 0;
  }

  html[dir="rtl"] .site-footer__column {
    justify-self: stretch;
  }
}

/* Header labels are localized, so their width cannot be treated as fixed.
   Keep the full navigation visible on large screens while using a more compact
   rhythm before the tablet menu takes over. */
@media (min-width: 1240px) and (max-width: 1399px) {
  .site-header__inner {
    width: min(calc(100% - 40px), var(--hero-max));
    gap: clamp(12px, 1.35vw, 18px);
  }

  .desktop-nav {
    gap: clamp(12px, 1.25vw, 18px);
  }

  .desktop-nav a {
    font-size: 0.92rem;
  }

  .desktop-actions {
    gap: 8px;
  }

  .desktop-actions .button {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 0.84rem;
  }

  .language-selector--desktop .language-selector__trigger {
    min-height: 42px;
  }
}

/* Keep each chapter's date and title directly below the sticky site header.
   The desktop header's rendered box, including its border, is exactly 79px. */
.story-section {
  --story-header-sticky-top: 79px;
}

/* The timeline represents everything already travelled, not only the current
   marker. Keeping the segment after the active date muted makes its direction
   unambiguous while scrolling or jumping between chapters. */
.story-timeline__item.is-complete {
  opacity: 0.82;
}

.story-timeline__item.is-complete::before,
.story-timeline__item.is-complete::after,
.story-timeline__item.is-active::before {
  background: rgba(232, 66, 53, 0.88);
}

.story-timeline__item.is-active::after {
  background: rgba(232, 66, 53, 0.34);
}

.story-timeline__item.is-complete .story-timeline__year {
  color: rgba(232, 66, 53, 0.82);
}

.story-timeline__item.is-complete .story-timeline__marker {
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(232, 66, 53, 0.12);
}

.story-timeline__item.is-complete .story-timeline__text {
  color: rgba(245, 240, 235, 0.74);
}

@media (width <= 767px) {
  .story-section {
    --story-mobile-sticky-top: calc(65px + max(env(safe-area-inset-top), 10px));
  }

  /* The mobile header and chapter heading meet at the same pixel. Keep both
     surfaces opaque so previous story copy cannot bleed through that seam. */
  .site-header.is-blurred {
    background: #090909;
    border-bottom-color: #090909;
  }

  .story-body--mobile .story-chapter__header {
    top: calc(var(--story-mobile-sticky-top) - 1px);
    background: #090909;
    border-top: 0;
    padding-top: 0;
  }

  .story-body--mobile .story-chapter__header::after {
    display: none;
  }

  /* The sticky chapter heading moves down by the site-header height. Reserve
     the same space in normal flow so the first paragraph cannot slide under
     the heading while the heading is pinned below the header. */
  .story-body--mobile .story-chapter__inner {
    padding-top: var(--story-mobile-sticky-top);
  }

  .story-body--mobile .story-chapter__inner {
    scroll-margin-top: calc(var(--story-mobile-sticky-top) + 18px);
  }
}

/* Tablet layouts constrain several contact blocks with auto margins. In RTL
   those margins centre the heading and contact details, so anchor each block
   to the same right-hand reading edge as the surrounding copy. */
@media (min-width: 768px) and (max-width: 1239px) {
  html[dir="rtl"] #contacto :is(
    .contact-heading,
    .contact-subheading,
    .contact-list,
    .contact-distribution,
    .quote-block--contact
  ) {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Localized hero headlines can be substantially longer than the Spanish
   source. Give the mobile treatment the available inline space and let a
   translated line wrap cleanly instead of overflowing into the hero image. */
@media (max-width: 767px) {
  .hero-copy h1 {
    width: calc(100% - 16px);
    max-width: min(23rem, calc(100% - 16px));
  }

  .hero-heading-mobile__line {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Long localized labels must retain the same content width as their
     section. Some desktop max-content sizing otherwise leaks past the mobile
     gutter while the section clips it. */
  .pricing-section__intro,
  .process-section__copy,
  .applications-section__intro,
  .applications-switch,
  .inertia-section__copy,
  #contacto .contact-copy {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100vw - 32px);
    min-width: 0;
  }

  .pricing-section__intro > *,
  .process-section__copy > *,
  .applications-section__intro > * {
    max-width: 100%;
    min-width: 0;
  }

  .applications-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .applications-switch__button {
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .applications-switch__button span {
    white-space: normal;
  }
}

/* Contact is an important conversion block, so keep its Arabic reading edge
   explicit instead of inheriting it from broader page-level RTL rules. */
html[dir="rtl"] #contacto :is(
  .contact-copy,
  .contact-header,
  .contact-heading,
  .contact-subheading,
  .contact-list,
  .contact-distribution,
  .quote-block--contact
) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #contacto .contact-list li {
  inline-size: 100%;
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
}

html[dir="rtl"] #contacto .quote-block--contact {
  border-left: 0;
  border-right: 2px solid var(--color-accent);
  padding-left: 0;
  padding-right: 16px;
}

/* Arabic component flow
   Mirror semantic sequences and leading markers without changing the physical
   composition, dimensions or behavior of any non-Arabic locale. */
html[dir="rtl"] main.page :is(
  .difference-pillar__heading,
  .difference-pillar__feature,
  .difference-pillar-card__feature,
  .process-step,
  .process-specs__trigger,
  .application-showcase__note,
  .applications-switch,
  .applications-switch__button,
  .application-parameter-card__header,
  .audience-selector-grid,
  .audience-panel,
  .audience-feature,
  .inertia-section__step,
  .story-timeline__item
) {
  direction: rtl;
}

/* The Arabic audience panel reads from the copy on the right towards the
   supporting icon list on the left. */
html[dir="rtl"] main .audience-panel {
  text-align: right;
}

html[dir="rtl"] main .audience-panel__main,
html[dir="rtl"] main .audience-panel__aside {
  direction: rtl;
}

/* Technical specifications follow the same label/value reading order as the
   trigger that opens them. */
html[dir="rtl"] main .process-specs__table {
  direction: rtl;
}

html[dir="rtl"] main .process-specs__table :is(th, td) {
  text-align: right;
}

/* Checks are leading markers in Arabic, so they sit on the right edge. */
html[dir="rtl"] main .pricing-card__highlights li {
  direction: rtl;
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}

html[dir="rtl"] main .pricing-card__highlights li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] main .pricing-card__expanded-list li {
  direction: rtl;
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}

html[dir="rtl"] main .pricing-card__expanded-list li::before {
  left: auto;
  right: 0;
}

/* Native select disclosure is the trailing control in an RTL field. */
html[dir="rtl"] main .select-wrap > svg {
  left: 20px;
  right: auto;
}

html[dir="rtl"] main .select-wrap select {
  padding-left: 54px;
  padding-right: 18px;
  text-align: right;
}

/* RTL reading order for repeated choices, cards and two-column narratives. */
html[dir="rtl"] .site-header .desktop-nav,
html[dir="rtl"] main.page :is(
  .hero-choice-grid,
  .hero-stats,
  .problem-list-grid,
  .time-recovered-layout,
  .time-calculator__results,
  .difference-section__flow,
  .science-section__grid,
  .studies-grid,
  .story-journey,
  .story-chapter__meta,
  .results-section__scopes,
  .results-accordion__trigger,
  .support-cards,
  .support-protocol,
  .support-wellness,
  .application-parameters,
  .profile-choice__grid,
  .roi-section__table-head,
  .inertia-section__inner,
  .pricing-section__groups,
  .pricing-section__cards,
  .pricing-card__toggle,
  .pricing-section__closing-actions,
  .contact-layout
) {
  direction: rtl;
}

/* Keep separators on the logical leading edge after their groups are
   mirrored. */
html[dir="rtl"] main .hero-stat:not(:first-child) {
  border-left: 0;
  border-right: 1px solid #f5f0eb1f;
}

@media (min-width: 768px) {
  html[dir="rtl"] main .results-section__scope + .results-section__scope {
    border-left: 0;
    border-right: 1px solid #f5f0eb24;
    padding-left: 0;
    padding-right: 26px;
  }
}

/* Disclosure affordances are trailing controls: on an RTL line they belong
   to the left of the readable label. */
html[dir="rtl"] main .results-accordion__trigger {
  grid-template-columns: minmax(0, 1fr) 20px;
}

html[dir="rtl"] main .results-accordion__title {
  grid-column: 1;
}

html[dir="rtl"] main .results-accordion__icon {
  grid-column: 2;
}

html[dir="rtl"] .site-footer__bottom {
  direction: rtl;
}

.pricing-card__toggle svg path:last-child {
  opacity: 1;
  transition: opacity var(--transition-fast);
}

/* The desktop navigation used to expose only the text glyphs as a hover target.
   Keep a generous, stable hit area while preserving the current header width. */
.desktop-nav a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.desktop-nav a::after {
  bottom: 6px;
}

.pricing-card.is-open .pricing-card__toggle svg path:last-child {
  opacity: 0;
}

/* The Arabic timeline grid is mirrored, so its connecting rail must be
   measured from the right-hand year column as well. */
html[dir="rtl"] main .story-timeline__item {
  --story-year-column: 82px;
}

html[dir="rtl"] main .story-timeline__item::before,
html[dir="rtl"] main .story-timeline__item::after {
  left: auto;
  right: calc(
    var(--story-year-column) +
    var(--story-column-gap) +
    (var(--story-marker-column) / 2)
  );
  transform: translateX(50%);
}

html[dir="rtl"] main .story-timeline__item:hover,
html[dir="rtl"] main .story-timeline__item:focus-visible {
  transform: translateX(-2px);
}

/* Keep narrower Arabic paragraphs attached to their section's reading edge. */
html[dir="rtl"] main :is(
  .elite-section__lead,
  .elite-section__access,
  .results-section__summary,
  .support-section__body,
  .process-section__title
) {
  margin-left: auto;
  margin-right: 0;
}

/* Semantic icons follow the Arabic reading edge.
   Decorative and disclosure icons keep their existing placement. */
html[dir="rtl"] main :is(
  .hero-choice-card,
  .problem-list-item,
  .elite-proof-card,
  .honesty-item__body
) {
  direction: rtl;
}

html[dir="rtl"] main .audience-panel .audience-feature__body {
  direction: rtl;
}

html[dir="rtl"] main .hero-choice-card .hero-choice-card__arrow svg {
  transform: rotate(180deg);
}

html[dir="rtl"] main .story-inline-quote {
  border-left: 1px solid var(--color-accent);
  border-right: 0;
  padding: 2px 0 2px 14px;
}

@media (max-width: 767px) {
  html[dir="rtl"] main .hero-choice-card {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }

  html[dir="rtl"] main .hero-heading-mobile {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  html[dir="rtl"] main .hero-heading-mobile__line {
    line-height: 1.04;
  }

  html[dir="rtl"] main .story-inline-quote {
    padding: 2px 0 2px 12px;
  }
}

@media (max-width: 1239px) {
  html[dir="rtl"] main .hero-choice-card {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }

  html[dir="rtl"] main .hero-media__image {
    justify-content: center;
  }
}

/* Arabic reading-edge alignment
   Media remains in the Spanish physical grid, while every related copy block
   shares one logical right edge. */
@media (min-width: 1240px) {
  html[dir="rtl"] main .hero-opening {
    border-left: 0;
    border-right: 2px solid var(--color-accent);
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    padding-right: 16px;
  }

  html[dir="rtl"] main :is(
    .hero-opening-group,
    .hero-body-group--desktop,
    .hero-body-group--desktop .hero-body,
    .hero-impact,
    .hero-choice-grid,
    .hero-stats
  ) {
    margin-left: auto;
    margin-right: 0;
  }
}

html[dir="rtl"] main :is(
  .time-recovered-copy__label,
  .time-recovered-copy__heading,
  .time-recovered-copy__highlight,
  .time-recovered-copy__body,
  .time-recovered-copy__body p
) {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] main .time-recovered-copy__body p {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] main .time-recovered-copy__label {
  align-self: stretch;
}

html[dir="rtl"] main .faq-item__button {
  direction: rtl;
  justify-content: flex-start;
  gap: 16px;
}

html[dir="rtl"] main .faq-item__question {
  flex: 0 1 auto;
  width: auto;
  max-width: calc(100% - 42px);
}

html[dir="rtl"] main .faq-item__icon {
  flex: 0 0 26px;
}

html[dir="rtl"] main .faq-item__panel-inner {
  direction: rtl;
  padding-left: 0;
  padding-right: 42px;
  text-align: right;
}

html[dir="rtl"] main .contact-list,
html[dir="rtl"] main .contact-list li {
  direction: rtl;
}

html[dir="rtl"] main .contact-list li {
  justify-content: flex-start;
  text-align: right;
}

html[dir="rtl"] main .contact-list li :is(span, a) {
  direction: rtl;
  text-align: right;
}

/* Fallback for Historia before JavaScript measures the rendered header edge.
   The runtime replaces this value with getBoundingClientRect().bottom and
   keeps it updated through ResizeObserver and visualViewport events. */
@media (max-width: 767px) {
  .story-section {
    --story-mobile-sticky-top: calc(max(env(safe-area-inset-top), 10px) + 65px);
  }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .story-section {
    --story-mobile-sticky-top: 75px;
  }
}

/* Approved product photography from the final MYATOM briefing. */
.difference-pillar__media,
.difference-pillar-card__media,
.difference-mobile-reference,
.process-device-media {
  margin: 0;
  overflow: hidden;
  background: #080808;
}

.difference-pillar__media,
.difference-pillar-card__media {
  aspect-ratio: auto;
  border-radius: 12px;
}

.difference-pillar__media {
  width: min(100%, 260px);
  margin: auto auto 0;
  padding-top: 18px;
  background: transparent;
}

.difference-pillar__media img,
.difference-pillar-card__media img,
.difference-mobile-reference img,
.process-section__media img,
.process-device-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.difference-pillar__media img {
  aspect-ratio: 4 / 3;
  border-radius: inherit;
  background: #080808;
}

.difference-mobile-reference {
  width: min(100%, 960px);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  border-radius: 16px;
}

.story-portrait--approved {
  width: min(100%, 430px);
  justify-self: end;
  margin: 0;
}

.story-portrait--approved img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  border-radius: 10px;
  object-fit: contain;
  object-position: center bottom;
  background: #080808;
  -webkit-mask-image: none;
  mask-image: none;
}

.story-portrait--approved::after {
  content: none;
}

.process-section__hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  grid-template-areas:
    'copy media'
    'steps device';
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 28px;
}

.process-section::after,
.process-section__hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.process-section__media {
  display: block !important;
  grid-area: media;
  width: min(100%, 500px);
  aspect-ratio: 16 / 10;
  align-self: end;
  justify-self: end;
  margin: 0;
  border: 0;
  border-radius: 16px;
  background: #080808;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  -webkit-mask-image: none;
  mask-image: none;
}

.process-section__media img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

.process-section__steps {
  margin-top: 0;
}

.process-device-media {
  grid-area: device;
  width: min(100%, 500px);
  aspect-ratio: 16 / 10;
  align-self: start;
  justify-self: end;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

@media (min-width: 768px) and (max-width: 1239px) {
  [data-responsive-variant='desktop'] .difference-pillar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 30px;
    align-items: start;
  }

  [data-responsive-variant='desktop'] .difference-pillar__heading,
  [data-responsive-variant='desktop'] .difference-pillar__text,
  [data-responsive-variant='desktop'] .difference-pillar__divider,
  [data-responsive-variant='desktop'] .difference-pillar__feature {
    grid-column: 1;
  }

  [data-responsive-variant='desktop'] .difference-pillar__media {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    width: 100%;
    margin: 0;
    padding-top: 0;
  }

  .story-portrait--approved {
    width: min(100%, 380px);
    justify-self: center;
    margin: 22px auto 0;
  }

  .process-section__copy,
  .process-section__heading {
    width: min(100%, 800px);
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
  }

  .process-section__title {
    width: 100%;
    max-width: 20ch;
    margin-inline: auto;
    font-size: clamp(3rem, 5.2vw, 4.25rem);
    line-height: 1;
  }

  .process-section__hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'copy'
      'media'
      'steps'
      'device';
  }

  .process-section__media {
    width: min(100%, 640px);
    aspect-ratio: 16 / 10;
    justify-self: center;
    margin-inline: auto;
  }

  .process-device-media {
    width: min(100%, 640px);
    aspect-ratio: 16 / 10;
    justify-self: center;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .process-section__hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'copy'
      'media'
      'steps'
      'device';
    column-gap: 0;
    row-gap: 24px;
  }

  .difference-mobile-reference {
    width: min(100%, 300px);
    border-radius: 12px;
  }

  .difference-pillar-card__media {
    flex: 0 0 auto;
    width: min(100%, 250px);
    margin: 18px auto 0;
    border-radius: 12px;
  }

  .difference-pillar-card__media img {
    aspect-ratio: 4 / 3;
  }

  .story-portrait--approved {
    width: min(68vw, 240px);
    justify-self: center;
    margin: 20px auto 0;
  }

  .story-portrait--approved img {
    border-radius: 8px;
  }

  .process-section__media {
    width: min(100%, 300px);
    aspect-ratio: 16 / 10;
    margin-inline: auto;
    border-radius: 14px;
  }

  .process-device-media {
    width: min(100%, 300px);
    aspect-ratio: 16 / 10;
    justify-self: center;
    margin-inline: auto;
    border-radius: 14px;
  }
}

/* The new portrait hero needs a filled crop on compact layouts. The previous
   square asset could use `contain`, but that leaves the portrait unreadably
   small inside the wide, short mobile/tablet hero frame. */
@media (max-width: 1239px) {
  .hero-media__frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .hero-media__frame img {
    object-position: 50% 0% !important;
  }
}

/* Give the portrait enough vertical room to keep the complete tablet screen
   visible instead of letting the hero fade crop it at the lower edge. */
@media (max-width: 767px) {
  .hero-media__frame {
    height: clamp(280px, 42svh, 360px) !important;
  }

  .hero-media__frame img {
    object-position: 50% 0% !important;
  }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .hero-media__frame {
    height: clamp(400px, 45svh, 500px) !important;
  }
}

/* On wide screens keep the existing frame dimensions but use the portrait as
   a deliberate editorial crop. This gives the people and tablet presence
   without enlarging the whole hero section. */
@media (min-width: 1240px) {
  .hero-media__frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
    transform: none !important;
    filter: brightness(1.08) contrast(1.03) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .hero-media__frame::before {
    background: linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.78) 0%,
      rgba(8, 8, 8, 0.54) 18%,
      rgba(8, 8, 8, 0.24) 36%,
      rgba(8, 8, 8, 0.08) 56%,
      rgba(8, 8, 8, 0) 76%
    ) !important;
  }
}

/* Final desktop polish: preserve a little more breathing room above the
   models' heads, and keep the portrait in the 2026 story chapter editorial
   rather than letting it expand to the full copy column. */
@media (min-width: 1240px) {
  .hero-media__frame img {
    object-position: 50% 0% !important;
  }

  .story-stage-flow__chapter[data-story-chapter="story-chapter-6"] .story-secondary-image {
    width: min(100%, 380px);
    max-width: 380px;
    margin-inline: 0;
  }

  .story-stage-flow__chapter[data-story-chapter="story-chapter-6"] .story-secondary-image img {
    height: auto;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .story-chapter__inner[data-story-chapter="story-chapter-6"] .story-secondary-image {
    width: min(100%, 380px);
    max-width: 380px;
    margin-inline: 0;
  }

  .story-chapter__inner[data-story-chapter="story-chapter-6"] .story-secondary-image img {
    height: auto;
    object-fit: contain;
  }
}

/* The carousel has 16px of horizontal padding. Include that padding in the
   snapport so the first and last cards settle inside the same gutters instead
   of snapping flush against the viewport edge. */
@media (max-width: 767px) {
  .support-cards--carousel {
    scroll-padding-inline: 16px;
  }
}