/* Base: reset, typography, focus, accessibility helpers.
   Logical properties only (margin-inline, padding-block…) so RTL just works. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  /* Canvas = footer colour: what Safari shows behind its toolbar and in the overscroll
     at the end of the page continues the footer instead of a light strip. */
  background: var(--red-deep);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-block-size: 100vh;
  /* The page colour is painted as an image; background-color only drives the tint
     Safari 26 gives its toolbar area: mist over the content, burgundy once the
     footer is on screen (.at-end, set by app.js). Nothing visible changes. */
  background: linear-gradient(var(--mist), var(--mist)) var(--mist);
  transition: background-color 0.3s linear;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
body.at-end { background-color: var(--red-deep); }

img, picture, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: var(--emerald); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
.on-green a:not(.btn) { color: var(--on-green); }

/* Headings: tracking tightens as size grows */
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: var(--track-display); }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: var(--track-heading); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
:lang(ar) .h1, :lang(ar) .h2 { line-height: 1.35; }
:lang(ar) .display, :lang(ar) .h1, :lang(ar) .h2 { font-weight: 700; }

.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-muted); max-inline-size: 38em; }
.on-green .lede { color: var(--on-green-muted); }
:lang(ar) .lede { line-height: 1.75; }

.eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--red);
  margin-block-end: var(--s-3);
}
.eyebrow--light { color: var(--saffron); }

/* Every price uses tabular figures */
.mad-amount, .tnum { font-variant-numeric: tabular-nums; }
/* The symbol always sits left of the digits, in LTR and RTL alike */
.mad-amount { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* Focus: visible, calm, on-brand */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.on-green :focus-visible { outline-color: var(--saffron); }
main:focus { outline: none; }

.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); inset-block-start: var(--s-2);
  z-index: 100; padding: var(--s-2) var(--s-4);
  background: var(--ink); color: var(--mist); border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: none; color: var(--mist); }

/* Direction-aware icons (arrows) flip in RTL */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Numbers are always isolated so they never reorder inside Arabic text */
bdi, .mad-num { unicode-bidi: isolate; }

/* Dev review mode (?review=1): strings still marked TODO(owner) */
mark.review { background: rgb(242 179 61 / 0.38); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px rgb(242 179 61 / 0.9); }
mark.review--fallback { background: rgb(120 160 255 / 0.30); box-shadow: 0 0 0 1px rgb(120 160 255 / 0.9); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}