/* The original site.css is unchanged. Only integration/accessibility additions. */
[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; z-index: 100; top: 8px; inset-inline-start: 12px; padding: 12px 20px; background: #faa620; color: #121212; border-radius: 10px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #faa620; outline-offset: 4px; }
.hero-card a:focus-visible { outline-color: #121212; }
.gallery-pause { font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Content stays visible if JavaScript is unavailable. */
html:not(.js) .feature-card,
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .screen-visual-panels { display: block; min-height: 0; }
html:not(.js) .screen-visual-panel { display: block; min-height: 0; padding: 20px 0; pointer-events: auto; }
html:not(.js) .screen-copy-panel { display: block; margin-bottom: 24px; }
html:not(.js) .device-shot-focus,
html:not(.js) .screens-switcher,
html:not(.js) .gallery-pause { display: none; }
html:not(.js) .device-shot-stage { min-height: 0; display: block; }
html:not(.js) .device-shot-wrap { display: block; }
html:not(.js) .device-shot-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; transform: none; }
html:not(.js) .device-shot-slide { width: min(75vw, 520px); opacity: 1; }
html:not(.js) .is-mobile .device-shot-slide { width: min(65vw, 240px); }

/* Country-based display currency. Checkout remains on the main website. */
.currency-picker { display: grid; gap: 8px; min-width: min(270px, 100%); }
.currency-picker[hidden], .sar-checkout-note[hidden] { display: none !important; }
.currency-picker label { color: rgba(255,255,255,.8); font-weight: 700; }
.currency-picker .currency-select { display: block; width: 100%; min-height: 46px; padding: 10px 14px; background: #1c1c1c; color: #f6f6f6; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; font: inherit; }
.currency-picker option { background: #1c1c1c; color: #f6f6f6; }
.sar-checkout-note { margin: 10px 0 0; font-size: .82rem; line-height: 1.6; color: inherit; opacity: .85; }