/* ==========================================================================
   PayCard — base, layout primitives, components
   RTL-first. Logical properties throughout so LTR mirroring is free.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (not hidden) keeps fixed layers pinned to the visual
   viewport: in RTL some engines clamp scrollX to a ~1px negative origin,
   which would shift the mobile sheet off the edge it's anchored to. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  font-weight: 800;
  margin: 0 0 var(--sp-4);
  letter-spacing: -.015em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--ink-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--text-strong); font-weight: 700; }

/* Persian digits render better with tabular alignment in counters */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Focus: never removed, always visible ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* On navy surfaces the dark ring would vanish — use warm gold (8.9:1 on ink-700) */
.on-inverse :focus-visible,
.hero :focus-visible,
.footer :focus-visible { outline-color: var(--gold-400); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px;
  z-index: 200; background: var(--bg-surface); color: var(--text-strong);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  box-shadow: var(--sh-3); font-weight: 700;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Layout ---------- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}
.section { padding-block: var(--section-py); }
.section--sunken { background: var(--bg-sunken); }
.section--surface { background: var(--bg-surface); }
.section--inverse {
  background: var(--bg-inverse); color: var(--text-on-inverse);
  position: relative; overflow: hidden;
}
.section--inverse h2, .section--inverse h3 { color: #fff; }
.section--inverse p { color: var(--text-on-inverse-muted); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-lead); color: var(--text-muted); margin: 0; }
.section--inverse .section-head p { color: var(--text-on-inverse-muted); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--accent-strong); margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ''; inline-size: 28px; block-size: 2px;
  background: var(--accent); border-radius: 2px;
}
/* On dark backgrounds the eyebrow must switch to the light gold. `.on-inverse`
   is the single hook every inverse container carries (hero, page hero,
   inverse sections), so keying off it covers all of them — keying off
   `.section--inverse` alone missed the hero and dropped the eyebrow to
   2.51:1 on the navy gradient. */
.on-inverse .eyebrow,
.section--inverse .eyebrow { color: var(--gold-400); }

/* ---------- Buttons (44px+ targets, reassurance built in) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-block-size: var(--btn-h); padding-inline: var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* hover lifts the button a hair; :active presses it back down. The two
   together give a physical, tactile press without being showy. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink-700); color: #fff; box-shadow: var(--sh-2);
}
.btn--primary:hover { background: var(--ink-600); box-shadow: var(--sh-3); }

.btn--gold {
  background: var(--accent); color: var(--ink-900); box-shadow: var(--sh-2);
}
.btn--gold:hover { background: var(--gold-400); box-shadow: var(--sh-3); }

.btn--ghost {
  background: transparent; color: var(--text-strong);
  border-color: var(--border-hairline);
}
.btn--ghost:hover { border-color: var(--ink-500); background: var(--bone-050); }

.btn--on-inverse {
  background: rgba(255,255,255,.06); color: #fff;
  border-color: rgba(255,255,255,.24);
}
.btn--on-inverse:hover { background: rgba(255,255,255,.12); }

.btn--sm { min-block-size: var(--btn-h-sm); font-size: var(--fs-xs); padding-inline: var(--sp-4); }
.btn--block { width: 100%; }
.btn svg {
  inline-size: 18px; block-size: 18px; flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
/* the trailing arrow slides toward the reading direction on hover — in RTL
   that's leftward (negative X). A small, deliberate cue that the button leads
   somewhere. Only the last SVG so leading icons (bag, shield) stay put. */
.btn:hover svg:last-child { transform: translateX(-3px); }
.btn--block:hover svg:last-child { transform: translateX(-3px) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .btn:hover svg:last-child { transform: none; }
}

/* CTA reassurance microcopy */
.cta-note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted); margin: 0;
}
.cta-note svg { inline-size: 16px; block-size: 16px; color: var(--verified); flex: none; }
.section--inverse .cta-note,
.hero .cta-note { color: #CFDCEA; }
.section--inverse .cta-note svg,
.hero .cta-note svg { color: var(--gold-400); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.badge svg { inline-size: 14px; block-size: 14px; flex: none; }
.badge--verified { background: var(--verified-wash); color: var(--green-700); border-color: #C9E4D8; }
.badge--gold { background: var(--accent-wash); color: var(--gold-700); border-color: var(--gold-200); }
.badge--neutral { background: var(--bone-100); color: var(--slate-600); border-color: var(--border-subtle); }
.badge--glass {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px);
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--card-pad);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.card:hover { box-shadow: var(--sh-3); transform: translateY(-1px) scale(1.01); border-color: var(--bone-300); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Icon tile ---------- */
.icon-tile {
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px; border-radius: var(--r-md);
  background: var(--ink-700); color: var(--gold-400);
  margin-bottom: var(--sp-4); flex: none;
}
.icon-tile svg { inline-size: 24px; block-size: 24px; }
.icon-tile--wash { background: var(--accent-wash); color: var(--gold-700); }
.icon-tile--glass {
  background: rgba(201,162,39,.14); color: var(--gold-400);
  border: 1px solid rgba(201,162,39,.28);
}

/* ---------- Reveal on scroll (slow, ≤400ms) ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

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