/* werespond.ai — page-specific styles.
 *
 * LAYER MODEL (per the brand kit + implementation brief):
 *   tokens.css  — the canonical brand layer: color/font/radius variables and
 *                 the kit utility classes (.wr-button*, .wr-card, .wr-input,
 *                 .wr-label, .wr-badge, .wr-shell). Loaded FIRST. Never edited.
 *   style.css   — THIS file: page-specific layout + components that the kit
 *                 doesn't ship, plus the handful of additive variables the kit
 *                 omits. Loaded SECOND so it may extend (never fight) the kit.
 *
 * Brand rules honored here:
 *   - No hardcoded brand hex values — everything resolves to a tokens.css var
 *     (the only literals below are the additive --wr-* vars in :root and a few
 *     low-alpha tints derived from the documented brand colors).
 *   - Ember (--wr-color-ember / --wr-live) is used ONLY for the responding/live
 *     signal — never for buttons, alerts, or decoration.
 *   - Built with CSS logical properties so the same rules mirror for [dir=rtl].
 *
 * Reconciliation note (replacing the old placeholder tokens.css): the previous
 * stylesheet referenced a different variable namespace (--wr-neutral-*,
 * --wr-primary, --wr-space, --wr-radius, --wr-font-heading/body). Those are
 * bridged to the kit tokens in the :root block below so the existing, untouched
 * pages (signup / login / pricing / notice) keep rendering, while new pages use
 * the kit tokens directly. The duplicate .wr-input from the old file was removed
 * — the kit owns .wr-input now.
 */

/* ══════════════════════════════════════════════════════════════════════
 * CANONICAL SECTION PATTERN — the design contract for ALL future pages,
 * sections, and admin screens. Reuse this; do not invent new structures.
 * (The pattern is locked across R1+R2+R3; corrected here vs. the original
 *  sketch: the inner wrapper is .wr-container — .wr-shell is the BODY gradient
 *  class — and the eyebrow is a <p class="wr-label wr-sec-eyebrow">.)
 *
 *   <section class="wr-sec">              ← .wr-sec-warm = sand band; .wr-sec-cta = petrol-wash closing band
 *     <div class="wr-container">          ← centred 1100px gutter (.wr-container-narrow = 720px)
 *       <div class="wr-sec-head wr-reveal">
 *         <p class="wr-label wr-sec-eyebrow">EYEBROW</p>
 *         <h2 class="wr-sec-title">Headline</h2>
 *         <p class="wr-sec-sub">Subhead.</p>
 *       </div>
 *       [content — tag each below-the-fold block .wr-reveal so it fades up on scroll]
 *     </div>
 *   </section>
 *
 * Page heroes: <section class="wr-page-hero"> > <div class="wr-container wr-page-hero-inner">
 *   (one-time .wr-hero-rise entrance on first paint; reduced-motion holds the end state).
 * Buttons: .wr-button + .wr-button-primary | .wr-button-quiet  [+ .wr-button-lg for closing CTAs].
 * Brand rules: light atmospheric backgrounds; Ember ONLY in the homepage hero
 * responding pill; Cairo with native (untracked) spacing for Arabic; no inline
 * rgba — promote tints to :root vars. Pattern locked: R1+R2+R3.
 * ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Additive vars the kit's tokens.css does not define ──────────────── */
  --wr-space: 8px;                       /* spacing step used by legacy rules */
  --wr-color-danger: #B3261E;            /* form validation errors            */
  --wr-color-success: #2E7D32;           /* success banners                   */
  --wr-petrol-soft: rgba(14, 110, 115, 0.08); /* calm petrol tint (matches kit .wr-badge[calm]) */
  --wr-petrol-soft-strong: rgba(14, 110, 115, 0.14);
  --wr-petrol-glow: rgba(14, 110, 115, 0.22); /* dark-hero ambient petrol glow */

  /* ── Legacy → kit token aliases (bridge for the untouched pages) ──────── */
  --wr-neutral-0:    var(--wr-surface);
  --wr-neutral-50:   var(--wr-color-cloud);
  --wr-neutral-100:  var(--wr-border);
  --wr-neutral-200:  var(--wr-border);
  --wr-neutral-300:  var(--wr-border);
  --wr-neutral-500:  var(--wr-text-muted);
  --wr-neutral-700:  var(--wr-text-muted);
  --wr-neutral-900:  var(--wr-text);
  --wr-primary:      var(--wr-color-petrol);
  --wr-primary-hover: var(--wr-color-petrol-700);
  --wr-primary-soft: var(--wr-petrol-soft);
  --wr-font-heading: var(--wr-font-display);
  --wr-font-body:    var(--wr-font-sans);
  --wr-radius:       var(--wr-radius-md);
  --wr-error:        var(--wr-color-danger);
  --wr-success:      var(--wr-color-success);
  --wr-warning:      var(--wr-surface-warm);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The .wr-shell (from tokens.css) paints the page gradient on <body>; keep the
 * body itself transparent so the shell shows through. */
body { margin: 0; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; height: auto; }

/* ── Global mobile-overflow safeguard (Phase 22.0.6) ──
 * Stops horizontal scroll at narrow viewports without touching the brand layout:
 *   - overflow-x: clip neutralises any stray over-wide element (clip, NOT hidden,
 *     so the sticky header keeps working — hidden would create a scroll container);
 *   - overflow-wrap lets long unbreakable tokens (slugs, emails, webhook URLs, IG
 *     IDs) wrap inside cards / <code> instead of forcing the box past its column;
 *   - min-inline-size: 0 lets grid/flex children shrink below content min-content
 *     (their default min-width:auto otherwise blocks it).
 * Direction-agnostic (logical / overflow properties) — RTL unaffected. */
html, body { overflow-x: clip; }
.wr-card { overflow-wrap: break-word; }
code { overflow-wrap: anywhere; }
.wr-grid > *, .wr-footer-inner > * { min-inline-size: 0; }

ul { padding-inline-start: calc(var(--wr-space) * 3); }

.wr-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, calc(var(--wr-space) * 3));
}
.wr-container-narrow { max-width: 720px; }

/* Brand name stays LTR even inside an RTL layout. */
.wr-ltr { unicode-bidi: isolate; direction: ltr; }

/* Visually-hidden (screen-reader only). */
.wr-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;
}

/* Skip-to-content link. */
.wr-skip {
  position: absolute; inset-inline-start: 0; inset-block-start: -100%;
  background: var(--wr-color-petrol); color: var(--wr-color-white); padding: 0.6rem 1rem;
  border-radius: 0 0 var(--wr-radius-md) 0; z-index: 100;
}
.wr-skip:focus { inset-block-start: 0; }


/* ══════════════════════════════════════════════════════════════════════
 * Site header / nav  (rewritten base.html)
 * ════════════════════════════════════════════════════════════════════ */
.wr-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--wr-surface);
  border-block-end: 1px solid var(--wr-border);
}
.wr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--wr-space) * 2);
  padding-block: calc(var(--wr-space) * 1.5);
}
.wr-nav-logo { display: inline-flex; align-items: center; }
.wr-nav-logo img { height: 34px; width: auto; display: block; }

.wr-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, calc(var(--wr-space) * 3));
}
.wr-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, calc(var(--wr-space) * 2.5));
  list-style: none;
  margin: 0;
  padding: 0;
}
.wr-nav-link {
  color: var(--wr-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.wr-nav-link:hover,
.wr-nav-link[aria-current="page"] { color: var(--wr-text); }

/* Language toggle (EN · AR) — preserves the existing /lang/<code> behavior. */
.wr-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wr-space) * 0.75);
  font-size: 0.85rem;
  color: var(--wr-text-muted);
}
.wr-lang-toggle a { color: var(--wr-text-muted); text-decoration: none; }
.wr-lang-toggle a[aria-current="page"] { color: var(--wr-text); font-weight: 600; }

/* Mobile menu: pure-CSS checkbox disclosure (no JS). */
.wr-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.wr-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--wr-radius-md);
  border: 1px solid var(--wr-border);
  background: var(--wr-surface);
  color: var(--wr-text);
  cursor: pointer;
}
.wr-menu-button svg { width: 22px; height: 22px; }

/* Logout rendered as a <form>+<button> but styled as a nav link (no JS). The
 * button also carries .wr-nav-link, so colour / size / weight / hover already
 * match the other links; this only resets the native button chrome. */
.wr-nav-logout { margin: 0; display: flex; align-items: center; }
.wr-nav-logout-btn {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════
 * Hero
 * ════════════════════════════════════════════════════════════════════ */
.wr-hero {
  padding-block: clamp(2.5rem, 7vw, calc(var(--wr-space) * 12))
                 clamp(2rem, 5vw, calc(var(--wr-space) * 9));
}
.wr-hero-compact {
  padding-block: clamp(2rem, 5vw, calc(var(--wr-space) * 8))
                 clamp(1.25rem, 3vw, calc(var(--wr-space) * 4));
}

/* Dark hero band: data-theme="dark" re-binds the kit tokens (white text, ink
 * surface) for just this section, so the on-dark mark + white "w" read well.
 * The ambient glow is PETROL only — Ember is reserved for the live/responding
 * signal (the on-dark mark's arcs + the responding pill), never decoration. */
.wr-hero-dark {
  margin-block-start: calc(var(--wr-space) * 3);
  padding: clamp(2rem, 5vw, calc(var(--wr-space) * 8));
  border-radius: var(--wr-radius-xl);
  background:
    radial-gradient(circle at 18% 0%, var(--wr-petrol-soft-strong), transparent 34%),
    radial-gradient(circle at 82% 8%, var(--wr-petrol-glow), transparent 38%),
    var(--wr-color-ink);
  color: var(--wr-text);
  text-align: center;
}
.wr-hero-mark { width: clamp(96px, 14vw, 128px); height: auto; margin-inline: auto; }
.wr-hero-mark svg { display: block; width: 100%; height: auto; }

.wr-hero h1 { margin-block: 0.6rem 0.5rem; }
.wr-hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  max-width: 44ch;
  margin-inline: auto;
  color: var(--wr-text-muted);
}
.wr-hero-dark .wr-hero-sub { color: var(--wr-text-muted); }

.wr-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wr-space) * 1.5);
  justify-content: center;
  margin-block-start: calc(var(--wr-space) * 3);
}
.wr-hero-eyebrow { justify-content: center; }

/* Inline responding badge sitting in the hero. */
.wr-hero-signal { margin-block-start: calc(var(--wr-space) * 2.5); }


/* ══════════════════════════════════════════════════════════════════════
 * Sections
 * ════════════════════════════════════════════════════════════════════ */
.wr-section { padding-block: clamp(2.5rem, 6vw, calc(var(--wr-space) * 9)); }
.wr-section-warm { background: var(--wr-surface-warm); }
.wr-section-tint { background: var(--wr-surface); }
.wr-section-head { max-width: 60ch; margin-block-end: calc(var(--wr-space) * 4); }
.wr-section-head-center { margin-inline: auto; text-align: center; }
.wr-section-lead { color: var(--wr-text-muted); font-size: 1.05rem; }

/* Generic card padding — the kit ships .wr-card without interior padding;
 * marketing cards need it. Extends, never overrides, the kit utility. */
.wr-card { padding: clamp(1.25rem, 2.5vw, 1.6rem); }
.wr-card h3 { margin-block-end: 0.4rem; }
.wr-card p:last-child { margin-block-end: 0; }

/* Responsive grids. */
.wr-grid { display: grid; gap: calc(var(--wr-space) * 3); }
.wr-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wr-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* "How it works" numbered steps. */
.wr-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--wr-space) * 3);
  counter-reset: step;
}
.wr-steps > li {
  counter-increment: step;
  background: var(--wr-surface);
  border: 1px solid var(--wr-border);
  border-radius: var(--wr-radius-lg);
  box-shadow: var(--wr-shadow-card);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.wr-steps > li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--wr-space) * 4.5); height: calc(var(--wr-space) * 4.5);
  border-radius: var(--wr-radius-pill);
  background: var(--wr-petrol-soft);
  color: var(--wr-action-text-small);
  font: 600 1rem/1 var(--wr-font-mono);
  margin-block-end: calc(var(--wr-space) * 1.5);
}
.wr-steps h3 { margin-block-end: 0.35rem; }
.wr-steps p { margin: 0; }

/* Built-for bullet list. */
.wr-checklist { list-style: none; padding: 0; margin: calc(var(--wr-space) * 2) 0 0; }
.wr-checklist li {
  position: relative;
  padding-inline-start: calc(var(--wr-space) * 3.5);
  margin-block-end: calc(var(--wr-space) * 1.5);
  color: var(--wr-text-muted);
}
.wr-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 0.6em; height: 0.6em;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-color-petrol);
}

/* Bilingual side-by-side demo. */
.wr-bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--wr-space) * 3); }
.wr-lang-col {
  background: var(--wr-surface);
  border: 1px solid var(--wr-border);
  border-radius: var(--wr-radius-lg);
  box-shadow: var(--wr-shadow-card);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.wr-lang-col[lang="ar"] { font-family: var(--wr-font-arabic); }
.wr-msg {
  border-radius: var(--wr-radius-md);
  padding: 0.7rem 0.95rem;
  margin-block-end: calc(var(--wr-space) * 1.25);
  background: var(--wr-color-cloud);
  color: var(--wr-text);
}
.wr-msg-reply { background: var(--wr-petrol-soft); color: var(--wr-text); }
.wr-msg:last-child { margin-block-end: 0; }


/* ══════════════════════════════════════════════════════════════════════
 * Final CTA band (light, on the warm sand surface)
 * ════════════════════════════════════════════════════════════════════ */
.wr-cta-band { text-align: center; }
.wr-cta-band .wr-section-lead { margin-inline: auto; max-width: 48ch; }
.wr-cta-band-actions {
  display: flex; flex-wrap: wrap; gap: calc(var(--wr-space) * 1.5); justify-content: center;
  margin-block-start: calc(var(--wr-space) * 3);
}


/* ══════════════════════════════════════════════════════════════════════
 * Contact form
 * ════════════════════════════════════════════════════════════════════ */
.wr-form { display: flex; flex-direction: column; gap: calc(var(--wr-space) * 2.5); }
.wr-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--wr-space) * 2.5);
}
.wr-field { display: flex; flex-direction: column; gap: calc(var(--wr-space) * 0.75);
            border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wr-field-full { grid-column: 1 / -1; }
.wr-field-label { font-weight: 600; font-size: 0.95rem; color: var(--wr-text); }
.wr-field-optional { font-weight: 400; color: var(--wr-text-muted); font-size: 0.85rem; }
.wr-field-help { font-size: 0.85rem; color: var(--wr-text-muted); }
.wr-input-error { border-color: var(--wr-color-danger); }
.wr-field-error { font-size: 0.85rem; color: var(--wr-color-danger); font-weight: 500; }
textarea.wr-input { min-height: 8.5rem; resize: vertical; line-height: 1.5; }

.wr-char-count { font-size: 0.8rem; color: var(--wr-text-muted); align-self: flex-end; }
.wr-char-count[data-state="over"] { color: var(--wr-color-danger); font-weight: 600; }

/* Honeypot: kept in the DOM and the tab order out, visually off-canvas. */
.wr-hp {
  position: absolute !important;
  inset-inline-start: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.wr-form-aside { color: var(--wr-text-muted); font-size: 0.9rem; }
.wr-form-aside p { margin-block-end: calc(var(--wr-space) * 0.75); }


/* ══════════════════════════════════════════════════════════════════════
 * Success card (contact_received)
 * ════════════════════════════════════════════════════════════════════ */
.wr-success-wrap { max-width: 560px; margin-inline: auto; text-align: center; }
.wr-success-card { padding: clamp(1.75rem, 4vw, 2.75rem); }
.wr-check {
  width: 64px; height: 64px; margin-inline: auto;
  margin-block-end: calc(var(--wr-space) * 2);
  display: grid; place-items: center;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-petrol-soft);
  color: var(--wr-color-petrol);
}
.wr-check svg { width: 32px; height: 32px; }
.wr-success-actions {
  display: flex; flex-wrap: wrap; gap: calc(var(--wr-space) * 1.5);
  justify-content: center; margin-block-start: calc(var(--wr-space) * 3);
}


/* ══════════════════════════════════════════════════════════════════════
 * Footer
 * ════════════════════════════════════════════════════════════════════ */
.wr-site-footer {
  border-block-start: 1px solid var(--wr-border);
  background: var(--wr-surface);
  padding-block: calc(var(--wr-space) * 5);
  margin-block-start: calc(var(--wr-space) * 6);
}
.wr-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: calc(var(--wr-space) * 2);
}
.wr-footer-logo img { height: 26px; width: auto; display: block; }
.wr-footer-links { display: flex; flex-wrap: wrap; gap: calc(var(--wr-space) * 2.5); }
.wr-footer-links a { color: var(--wr-text-muted); font-size: 0.9rem; text-decoration: none; }
.wr-footer-links a:hover { color: var(--wr-text); }
.wr-footer-meta { color: var(--wr-text-muted); font-size: 0.85rem; }
.wr-footer-meta .wr-ltr { font-weight: 600; color: var(--wr-text); }


/* ══════════════════════════════════════════════════════════════════════
 * Legacy page-specific classes (signup / login / pricing / notice /
 * check-email / dashboard / verification). Re-pointed at the kit tokens via
 * the :root aliases above so these untouched pages keep rendering correctly.
 * ════════════════════════════════════════════════════════════════════ */

/* CTA buttons used by the legacy pages (new pages use the kit .wr-button*). */
.wr-cta-primary, .wr-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font: 600 0.96rem/1 var(--wr-font-sans);
  padding-inline: calc(var(--wr-space) * 2.5);
  padding-block: calc(var(--wr-space) * 1.25);
  border-radius: var(--wr-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.wr-cta-primary { background: var(--wr-color-petrol); color: var(--wr-color-white); border: 0; }
.wr-cta-primary:hover { transform: translateY(-1px); color: var(--wr-color-white); }
.wr-cta-secondary {
  background: var(--wr-surface); color: var(--wr-color-petrol-700);
  border: 1px solid var(--wr-border);
}
.wr-cta-secondary:hover { transform: translateY(-1px); background: var(--wr-petrol-soft); }
.wr-cta-primary:focus-visible, .wr-cta-secondary:focus-visible {
  outline: none; box-shadow: var(--wr-shadow-focus);
}

/* Legacy hero title/sub used by pricing + notice. */
.wr-hero-title { font-family: var(--wr-font-display); font-size: var(--wr-h1-size);
                 line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 0.4em; }

/* Forms (signup / login). */
.wr-form-section { padding-block: calc(var(--wr-space) * 8) calc(var(--wr-space) * 10); }
.wr-form-wrap { max-width: 560px; }
.wr-form-title { font-family: var(--wr-font-display); font-size: clamp(1.6rem, 3vw, 2.25rem);
                 letter-spacing: -0.02em; margin-block-end: calc(var(--wr-space) * 1); }
.wr-form-intro { color: var(--wr-text-muted); margin-block-end: calc(var(--wr-space) * 4); }
.wr-fieldset { gap: calc(var(--wr-space) * 1); }
.wr-radio { display: inline-flex; align-items: center; gap: calc(var(--wr-space) * 1);
            font-weight: 500; margin-inline-end: calc(var(--wr-space) * 2); }
.wr-radio input { accent-color: var(--wr-color-petrol); }
.wr-form-submit { inline-size: 100%; margin-block-start: calc(var(--wr-space) * 1); }
.wr-form-alt { margin-block-start: calc(var(--wr-space) * 3); font-size: 0.95rem; }

/* Auth banners. */
.wr-banner { border-radius: var(--wr-radius-md); padding: calc(var(--wr-space) * 1.5) calc(var(--wr-space) * 2);
             margin-block-end: calc(var(--wr-space) * 3); font-size: 0.95rem; border: 1px solid transparent; }
.wr-banner-success { background: color-mix(in srgb, var(--wr-color-success) 12%, var(--wr-surface));
                     border-color: var(--wr-color-success); color: var(--wr-text); }
.wr-banner-error { background: color-mix(in srgb, var(--wr-color-danger) 10%, var(--wr-surface));
                   border-color: var(--wr-color-danger); color: var(--wr-text); }

/* Notice / confirmation pages. */
.wr-notice { max-width: 620px; margin-inline: auto; text-align: center; }
.wr-notice-meta { color: var(--wr-text-muted); font-size: 0.9rem; }
.wr-link-muted { color: var(--wr-text-muted); text-decoration: underline; }

/* Pricing (kept page — only reachable when feature_flags.can_view_pricing). */
.wr-pricing-note { display: inline-block; background: var(--wr-surface-warm); color: var(--wr-text);
                   padding: calc(var(--wr-space) * 0.75) calc(var(--wr-space) * 1.5);
                   border-radius: var(--wr-radius-pill); font-size: 0.85rem;
                   margin-block-start: calc(var(--wr-space) * 2); }
.wr-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--wr-space) * 3); }
.wr-tier { background: var(--wr-surface); border: 1px solid var(--wr-border); border-radius: var(--wr-radius-lg);
           box-shadow: var(--wr-shadow-card); padding: calc(var(--wr-space) * 4);
           display: flex; flex-direction: column; position: relative; }
.wr-tier-recommended { border-color: var(--wr-color-petrol); }
.wr-tier-badge { position: absolute; inset-block-start: calc(var(--wr-space) * -1.5);
                 inset-inline-start: 50%; transform: translateX(-50%);
                 background: var(--wr-color-petrol); color: var(--wr-color-white);
                 padding: calc(var(--wr-space) * 0.5) calc(var(--wr-space) * 1.5);
                 border-radius: var(--wr-radius-pill); font-size: 0.8rem; font-weight: 600; }
[dir="rtl"] .wr-tier-badge { transform: translateX(50%); }
.wr-tier-name { font-size: 1.25rem; margin-block-end: calc(var(--wr-space) * 1); }
.wr-tier-price { font-family: var(--wr-font-display); margin-block-end: calc(var(--wr-space) * 2); }
.wr-tier-price-value { font-size: 2rem; font-weight: 700; color: var(--wr-text); }
.wr-tier-price-period { color: var(--wr-text-muted); font-size: 0.95rem; margin-inline-start: calc(var(--wr-space) * 0.5); }
.wr-tier-blurb { color: var(--wr-text-muted); }
.wr-tier-features { list-style: none; padding: 0; margin: 0 0 calc(var(--wr-space) * 3); flex-grow: 1; }
.wr-tier-features li { padding-block: calc(var(--wr-space) * 0.75); color: var(--wr-text-muted);
                       border-block-end: 1px solid var(--wr-border); }
.wr-tier-features li:last-child { border-block-end: none; }


/* ══════════════════════════════════════════════════════════════════════
 * Responsive
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .wr-grid-3, .wr-steps, .wr-pricing-grid { grid-template-columns: 1fr; }
  .wr-grid-2, .wr-bilingual, .wr-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Collapse the primary nav into the CSS-only disclosure menu. */
  .wr-menu-button { display: inline-flex; }
  .wr-nav-links {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--wr-surface);
    border-block-end: 1px solid var(--wr-border);
    box-shadow: var(--wr-shadow-card);
    padding: calc(var(--wr-space) * 1);
  }
  .wr-nav-toggle:checked ~ .wr-nav-links { display: flex; }
  .wr-nav-links .wr-nav-link { padding: calc(var(--wr-space) * 1.5); border-radius: var(--wr-radius-md); }
  .wr-site-header .wr-header-inner { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-cta-primary, .wr-cta-secondary { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
 * Hero v2 — light, two-column homepage hero (copy + faux-DM preview).
 *
 * Stripe-shaped: full-bleed atmospheric background, centered 1100px content,
 * big display headline on the left, a floating product-preview card on the
 * right. Purely additive — it lives ALONGSIDE the legacy .wr-hero* rules above
 * (still used by other pages) and reuses the kit tokens only.
 *
 * Brand rules honored: light surface (no Ink band); Ember appears ONLY inside
 * the reused responding pill; everything resolves to a tokens.css var or a
 * documented low-alpha tint derived from a brand color. Logical properties +
 * direction-aware flex mirror the whole hero for [dir=rtl].
 * ════════════════════════════════════════════════════════════════════ */
.wr-hero-v2 {
  position: relative;
  overflow: hidden;
  min-block-size: 85vh;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2rem, 6vw, 3.75rem);
  /* Atmospheric wash: an opaque white→cloud base (covers the body .wr-shell so
   * no Ember radial bleeds in), with faint petrol + sand glows layered on top. */
  background:
    radial-gradient(120% 95% at 88% -12%, rgba(63, 169, 164, 0.16), transparent 60%),
    radial-gradient(90% 80% at 6% 4%, rgba(234, 223, 208, 0.50), transparent 55%),
    linear-gradient(180deg, var(--wr-color-white) 0%, var(--wr-color-cloud) 100%);
}

.wr-hero-v2-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* ── Left: copy column (the only tab-order content) ── */
.wr-hero-v2-copy { max-inline-size: 38rem; }

.wr-hero-v2-eyebrow { display: inline-block; margin: 0 0 1.15rem; }

.wr-hero-v2-title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);   /* ~44px → 84px */
  line-height: 1.04;
  letter-spacing: -0.03em;                      /* ≈ -2.5px at the 84px cap */
  color: var(--wr-color-ink);
  margin: 0;
  text-wrap: balance;
}
/* Arabic must never carry Latin negative tracking (cramps the script). This
 * reset is REQUIRED, not redundant: the rule above re-introduces -0.03em on a
 * class that loads after the kit's [dir=rtl] :where(h1) reset, so it would win
 * in RTL without this explicit guard. */
[dir="rtl"] .wr-hero-v2-title { letter-spacing: normal; }
/* Arabic eyebrow: drop the .wr-label mono tracking + mono fallback so it reads
 * as first-class Cairo (brand rule: never squeeze Arabic into Latin spacing). */
[dir="rtl"] .wr-hero-v2-eyebrow {
  letter-spacing: normal;
  font-family: var(--wr-font-arabic);
}

.wr-hero-v2-sub {
  margin: 1.5rem 0 0;
  max-inline-size: 52ch;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);   /* 18 → 20px */
  line-height: 1.55;
  color: var(--wr-color-graphite);
}

.wr-hero-v2-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-block-start: 2rem;
}
/* Quiet CTA reads as a text link with a direction-aware arrow. */
.wr-hero-v2-quiet { gap: 0.4rem; padding-inline: 0.55rem; }
.wr-hero-v2-arrow {
  inline-size: 1.1em; block-size: 1.1em;
  transition: transform 150ms ease;
}
.wr-hero-v2-quiet:hover .wr-hero-v2-arrow { transform: translateX(2px); }
[dir="rtl"] .wr-hero-v2-arrow { transform: scaleX(-1); }
[dir="rtl"] .wr-hero-v2-quiet:hover .wr-hero-v2-arrow { transform: scaleX(-1) translateX(2px); }

.wr-hero-v2-trust {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  color: var(--wr-text-muted);
}

/* ── Right: decorative product preview ── */
.wr-hero-v2-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Soft petrol + sand glow pooled behind the card (no Ember). */
.wr-hero-v2-stage::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  background:
    radial-gradient(50% 46% at 62% 40%, var(--wr-petrol-glow), transparent 72%),
    radial-gradient(55% 52% at 28% 80%, rgba(234, 223, 208, 0.55), transparent 70%);
  filter: blur(6px);
}

.wr-dm-card {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 26.5rem);
  background: var(--wr-color-white);
  border: 1px solid var(--wr-color-border);
  border-radius: var(--wr-radius-lg);
  /* Stripe-subtle depth: a tight contact shadow + a soft long cast. */
  box-shadow:
    0 1px 2px rgba(15, 15, 15, 0.04),
    0 26px 60px -18px rgba(15, 15, 15, 0.22);
  padding: 1rem 1rem 1.15rem;
  transform: rotate(-2deg);
  transform-origin: center;
  animation: wr-dm-float-ltr 5s ease-in-out infinite;
}
[dir="rtl"] .wr-dm-card {
  transform: rotate(2deg);
  animation-name: wr-dm-float-rtl;
}

.wr-dm-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.85rem;
  margin-block-end: 0.85rem;
  border-block-end: 1px solid var(--wr-color-border);
}
.wr-dm-avatar {
  flex: none;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: var(--wr-radius-pill);
  display: grid;
  place-items: center;
  /* Petrol avatar (brand color, never Ember). Inherits the doc font so the
   * Arabic initial renders in Cairo. */
  background: linear-gradient(150deg, var(--wr-color-petrol-300), var(--wr-color-petrol));
  color: var(--wr-color-white);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: uppercase;
}
.wr-dm-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--wr-color-ink);
}
/* Push the reused responding pill to the row's end (mirrors in RTL). */
.wr-dm-head .wr-badge { margin-inline-start: auto; }

.wr-dm-body { display: flex; flex-direction: column; gap: 0.55rem; }
.wr-dm-bubble {
  max-inline-size: 86%;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--wr-radius-md);
  font-weight: 400;
  font-size: 0.95rem;      /* ~15px; font-family inherits (Cairo under RTL) */
  line-height: 1.5;
  color: var(--wr-color-ink);
}
/* Incoming (seeker): neutral bubble at the start edge (left LTR / right RTL). */
.wr-dm-in {
  align-self: flex-start;
  background: var(--wr-color-cloud);
  border: 1px solid var(--wr-color-border);
  border-end-start-radius: var(--wr-radius-sm);
}
/* Outgoing (werespond): petrol-tinted bubble at the end edge. */
.wr-dm-out {
  align-self: flex-end;
  background: var(--wr-petrol-soft);
  border: 1px solid var(--wr-petrol-glow);
  border-end-end-radius: var(--wr-radius-sm);
}

/* ── Motion: gentle float + a one-time entrance rise (pure CSS) ── */
@keyframes wr-dm-float-ltr {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-6px); }
}
@keyframes wr-dm-float-rtl {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-6px); }
}
@keyframes wr-hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wr-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wr-hero-v2-eyebrow,
.wr-hero-v2-title,
.wr-hero-v2-sub,
.wr-hero-v2-ctas,
.wr-hero-v2-trust {
  animation: wr-hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.wr-hero-v2-title { animation-delay: 0.06s; }
.wr-hero-v2-sub   { animation-delay: 0.12s; }
.wr-hero-v2-ctas  { animation-delay: 0.18s; }
.wr-hero-v2-trust { animation-delay: 0.24s; }
/* Opacity-only fade on the stage so it never fights the card's transform. */
.wr-hero-v2-stage { animation: wr-hero-fade 0.9s ease 0.2s both; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .wr-hero-v2-grid { gap: clamp(1.75rem, 4vw, 2.75rem); }
  .wr-hero-v2-title { font-size: clamp(2.6rem, 5.6vw, 3.5rem); }   /* ~56px cap */
}
@media (max-width: 768px) {
  .wr-hero-v2 {
    min-block-size: auto;
    padding-block: clamp(2rem, 9vw, 3rem) clamp(1.5rem, 7vw, 2.5rem);
  }
  .wr-hero-v2-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .wr-hero-v2-copy { max-inline-size: none; }
  .wr-hero-v2-title { font-size: clamp(2.2rem, 10.5vw, 2.6rem); }  /* ~40px */
  .wr-dm-card { inline-size: min(100%, 24rem); }
}

/* ── Reduced motion: hold final state, no float / rise / arrow nudge.
 * (The responding pill's own CSS already disables its ripple.) ── */
@media (prefers-reduced-motion: reduce) {
  .wr-dm-card { animation: none; }
  .wr-hero-v2-stage,
  .wr-hero-v2-eyebrow,
  .wr-hero-v2-title,
  .wr-hero-v2-sub,
  .wr-hero-v2-ctas,
  .wr-hero-v2-trust { animation: none; opacity: 1; transform: none; }
  /* Keep the static tilt even when the float is off. */
  .wr-dm-card { transform: rotate(-2deg); }
  [dir="rtl"] .wr-dm-card { transform: rotate(2deg); }
  .wr-hero-v2-arrow,
  .wr-hero-v2-quiet:hover .wr-hero-v2-arrow { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
 * Homepage sections v2 (R2) — the four sections below the hero, rebuilt to
 * the hero's design language: light atmospheric bands, a shared
 * eyebrow + display headline + subhead header, generous whitespace, and a
 * pure-CSS scroll-driven reveal (no JavaScript). Additive only — the legacy
 * .wr-section / .wr-steps / .wr-bilingual / .wr-checklist rules above are
 * untouched and still serve the other pages.
 * ════════════════════════════════════════════════════════════════════ */
:root {
  /* Ghosted petrol for the large decorative step numerals (atmosphere). */
  --wr-petrol-ghost: rgba(14, 110, 115, 0.30);
  /* Elevation tokens — ink-derived, matching the kit's --wr-shadow-card. */
  --wr-shadow-soft: 0 1px 2px rgba(15, 15, 15, 0.04), 0 18px 40px -18px rgba(15, 15, 15, 0.16);
  --wr-shadow-lift: 0 1px 2px rgba(15, 15, 15, 0.05), 0 28px 60px -20px rgba(15, 15, 15, 0.20);
}

/* ── Shared section scaffolding ── */
.wr-sec {
  position: relative;
  padding-block: clamp(4rem, 10vw, 7.5rem);     /* ~64 → 120px */
  background: var(--wr-color-cloud);             /* opaque: covers the body shell (no Ember bleed) */
}
.wr-sec-warm { background: var(--wr-surface-warm); }   /* sand band for the bilingual section */
/* Atmospheric petrol washes (no Ember), mirrored per section for variety. */
.wr-sec-how {
  background:
    radial-gradient(60% 45% at 88% 2%, var(--wr-petrol-soft), transparent 60%),
    var(--wr-color-cloud);
}
.wr-sec-ministries {
  background:
    radial-gradient(60% 45% at 10% 100%, var(--wr-petrol-soft), transparent 60%),
    var(--wr-color-cloud);
}

/* ── Shared section header: eyebrow + display headline + subhead ── */
.wr-sec-head {
  max-inline-size: 60ch;
  margin-inline: auto;
  margin-block-end: clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}
.wr-sec-eyebrow { display: inline-block; margin: 0 0 1.1rem; }
/* Section eyebrows follow the PAGE language: Arabic reads as first-class Cairo,
 * never Latin-tracked mono. (Card labels are handled separately below, scoped
 * to their own card so the page language can't override the card's language.) */
[dir="rtl"] .wr-sec-eyebrow {
  letter-spacing: normal;
  font-family: var(--wr-font-arabic);
}
.wr-sec-title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--wr-color-ink);
  margin: 0;
  text-wrap: balance;
}
[dir="rtl"] .wr-sec-title { letter-spacing: normal; }
.wr-sec-sub {
  margin: 1.25rem auto 0;
  max-inline-size: 58ch;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);   /* 18 → 20px */
  line-height: 1.55;
  color: var(--wr-color-graphite);
}

/* ── Section 1: "How it works" — stacked steps, each its own moment ── */
.wr-steps2 {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-inline-size: 800px;
  counter-reset: wrstep;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}
.wr-step2 {
  counter-increment: wrstep;
  display: grid;
  grid-template-columns: clamp(3.5rem, 9vw, 6rem) 1fr;
  gap: clamp(1.25rem, 4vw, 2.75rem);
  align-items: start;
}
.wr-step2-num {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--wr-petrol-ghost);
  text-align: center;
}
.wr-step2-num::before { content: counter(wrstep); }
.wr-step2-body { padding-block-start: 0.4rem; }
.wr-step2-rule {
  display: block;
  inline-size: 2.5rem;
  block-size: 2px;
  margin-block-end: 1.1rem;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-color-petrol);
}
.wr-step2-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wr-color-ink);
  margin: 0 0 0.5rem;
}
[dir="rtl"] .wr-step2-title { letter-spacing: normal; }
.wr-step2-text {
  margin: 0;
  max-inline-size: 48ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wr-color-graphite);
}

/* ── Section 2: "Bilingual by design" — peer cards (no tilt) ── */
.wr-bidi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.wr-bidi-card {
  background: var(--wr-surface);
  border-radius: var(--wr-radius-lg);
  box-shadow: var(--wr-shadow-lift);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Each card is a self-contained language island, regardless of page language:
 * the English card stays in Plex Sans (the kit only forces Arabic for [dir=rtl],
 * so an LTR island on an Arabic page would otherwise inherit Cairo), and the
 * Arabic card's label drops the mono treatment for first-class Cairo (its body
 * already inherits Cairo from the kit's [dir=rtl] rule). Scoping to the card —
 * not [dir=rtl] alone — stops the page's <html dir> from leaking across. */
.wr-bidi-card[dir="ltr"] { font-family: var(--wr-font-sans); }
.wr-bidi-card[dir="rtl"] .wr-bidi-label {
  letter-spacing: normal;
  font-family: var(--wr-font-arabic);
}
.wr-bidi-label { display: block; margin: 0 0 1.25rem; }
.wr-bidi-thread { display: flex; flex-direction: column; gap: 0.6rem; }
.wr-bidi-msg {
  max-inline-size: 88%;
  margin: 0;
  align-self: flex-start;
  padding: 0.7rem 0.95rem;
  border-radius: var(--wr-radius-md);
  border-end-start-radius: var(--wr-radius-sm);
  background: var(--wr-color-cloud);
  border: 1px solid var(--wr-color-border);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wr-color-ink);
}
.wr-bidi-reply {
  align-self: flex-end;
  background: var(--wr-petrol-soft);
  border-color: var(--wr-petrol-glow);
  border-end-start-radius: var(--wr-radius-md);
  border-end-end-radius: var(--wr-radius-sm);
}

/* ── Section 3: "Built for ministries" — feature blocks ── */
.wr-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.wr-feature {
  background: var(--wr-surface);
  border-radius: var(--wr-radius-lg);
  box-shadow: var(--wr-shadow-soft);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.wr-feature-icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: 1.25rem;
  border-radius: var(--wr-radius-md);
  background: var(--wr-petrol-soft);
  color: var(--wr-color-petrol);
}
.wr-feature-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
.wr-feature-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wr-color-ink);
  margin: 0 0 0.6rem;
}
[dir="rtl"] .wr-feature-title { letter-spacing: normal; }
.wr-feature-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wr-color-graphite);
}

/* ── Section 4: Final CTA — the closing breath ── */
.wr-sec-cta {
  padding-block: clamp(4.5rem, 12vw, 10rem);     /* ~72 → 160px */
  background:
    radial-gradient(100% 80% at 50% 0%, var(--wr-petrol-soft-strong), transparent 65%),
    radial-gradient(80% 70% at 50% 120%, var(--wr-petrol-soft), transparent 60%),
    var(--wr-color-cloud);
}
.wr-cta2 { max-inline-size: 720px; text-align: center; }
.wr-cta2-title { margin-inline: auto; }
.wr-cta2-actions { margin-block-start: 2.25rem; }
.wr-cta2-trust {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: var(--wr-text-muted);
}
/* Larger CTA for the closing moment — a modifier layered on the kit .wr-button. */
.wr-button-lg {
  min-height: 54px;
  padding-inline: 1.65rem;
  padding-block: 0.95rem;
  font-size: 1.05rem;
}

/* ── Scroll-driven reveal (pure CSS, progressive enhancement) ──
 * Default: content is fully visible. The hidden→revealed animation applies
 * ONLY where scroll timelines are supported AND motion is allowed, so browsers
 * without support (or users who prefer reduced motion) simply see the content —
 * never a blank section. No JavaScript, consistent with the rest of the site. */
@keyframes wr-reveal-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wr-reveal {
      animation: wr-reveal-rise both;
      animation-timeline: view();
      animation-range: entry 10% entry 65%;
    }
  }
}

/* ── Responsive: collapse the multi-column sections ── */
@media (max-width: 860px) {
  .wr-features { grid-template-columns: 1fr; }
  .wr-bidi { grid-template-columns: 1fr; }
}

/* ── Mobile clipping safeguard ──
 * Belt-and-suspenders so step + bilingual content can NEVER be forced to
 * overflow (and get clipped by an ancestor) on engines that resolve a grid/flex
 * item's default min-width:auto differently from Blink (notably iOS Safari):
 *   - min-inline-size:0 lets the content track shrink so text wraps instead of
 *     pushing the box wider than its column;
 *   - overflow-wrap:break-word breaks any single long token (e.g. a URL) rather
 *     than letting it blow past the bubble's max-inline-size.
 * No visual change to the normal rendering — purely defensive; the boxes grow to
 * fit their content at every width. */
.wr-step2,
.wr-step2-body,
.wr-bidi-card { min-inline-size: 0; }
.wr-step2-text,
.wr-bidi-msg { overflow-wrap: break-word; }


/* ══════════════════════════════════════════════════════════════════════
 * Supporting pages v3 (R3) — Features / About / Contact, built on the R1+R2
 * design language. Additive only; reuses .wr-sec*, .wr-label, .wr-sec-cta /
 * .wr-cta2*, .wr-button-lg, and the .wr-reveal scroll animation. No Ember,
 * no inline rgba (everything resolves to a token or an additive :root var).
 * ════════════════════════════════════════════════════════════════════ */

/* ── Shared page-hero band (single column; no DM card — the homepage owns it) ── */
.wr-page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(90% 70% at 82% -15%, var(--wr-petrol-soft-strong), transparent 60%),
    radial-gradient(70% 60% at 8% 8%, var(--wr-petrol-soft), transparent 55%),
    linear-gradient(180deg, var(--wr-color-white) 0%, var(--wr-color-cloud) 100%);
}
.wr-page-hero-inner {
  max-inline-size: 52rem;
  margin-inline: auto;
  text-align: center;
  /* One-time entrance, reusing the hero keyframe (above the fold, so .wr-reveal
   * is not appropriate here). Held at the end state under reduced motion. */
  animation: wr-hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.wr-page-hero-title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--wr-color-ink);
  margin: 0;
  text-wrap: balance;
}
[dir="rtl"] .wr-page-hero-title { letter-spacing: normal; }
.wr-page-hero-sub {
  margin: 1.35rem auto 0;
  max-inline-size: 54ch;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--wr-color-graphite);
}
.wr-page-hero-cta { margin-block-start: 2rem; }

/* ── Features: vertical story of icon-led rows (not a grid) ── */
.wr-frows {
  max-inline-size: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3.25rem, 8vw, 6.5rem);
}
.wr-frow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
}
.wr-frow-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  border-radius: var(--wr-radius-md);
  background: var(--wr-petrol-soft);
  color: var(--wr-color-petrol);
}
.wr-frow-icon svg { inline-size: 1.75rem; block-size: 1.75rem; }
.wr-frow-body { min-inline-size: 0; padding-block-start: 0.25rem; }
.wr-frow-eyebrow { display: inline-block; margin: 0 0 0.6rem; }
[dir="rtl"] .wr-frow-eyebrow { letter-spacing: normal; font-family: var(--wr-font-arabic); }
.wr-frow-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--wr-color-ink);
  margin: 0 0 0.7rem;
}
[dir="rtl"] .wr-frow-title { letter-spacing: normal; }
.wr-frow-text {
  margin: 0;
  max-inline-size: 54ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wr-color-graphite);
  overflow-wrap: break-word;
}

/* ── About: mission (two-column) + nonprofit prose + team ── */
.wr-mission {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-inline-size: 980px;
  margin-inline: auto;
}
.wr-mission-title { margin: 0; }
.wr-mission-body p {
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--wr-color-graphite);
  margin: 0 0 1.15rem;
}
.wr-mission-body p:last-child { margin-block-end: 0; }

.wr-prose-center { max-inline-size: 44rem; margin-inline: auto; text-align: center; }
.wr-prose-center > p {
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--wr-color-graphite);
  margin: 0 0 1.1rem;
}
.wr-prose-center > p:last-child { margin-block-end: 0; }
.wr-about-team-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wr-color-ink);
  margin: 0 0 0.5rem;
}
[dir="rtl"] .wr-about-team-title { letter-spacing: normal; }

/* Thin petrol divider (centered). */
.wr-divider {
  inline-size: 2.5rem;
  block-size: 2px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-color-petrol);
}

/* ── Contact: scoped form restyle + "what happens next" ── */
.wr-contact { max-inline-size: 720px; margin-inline: auto; }
/* Field labels become mono eyebrows (Arabic stays first-class Cairo). */
.wr-contact .wr-field-label {
  font: 500 0.72rem/1.3 var(--wr-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wr-action-text-small);
}
[dir="rtl"] .wr-contact .wr-field-label {
  font-family: var(--wr-font-arabic);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
}
.wr-contact .wr-field-optional {
  font-family: var(--wr-font-sans);
  font-size: 0.72rem;
  letter-spacing: normal;
  text-transform: none;
}
/* More deliberate spacing than the base contact form. */
.wr-contact .wr-form { gap: clamp(1.75rem, 4vw, 2.25rem); }
.wr-contact .wr-form-grid { gap: clamp(1.5rem, 3.5vw, 2rem); }
.wr-contact .wr-field { gap: 0.55rem; }
.wr-contact .wr-form-aside { margin-block-start: 1.5rem; text-align: center; }

.wr-next-divider { margin-block: clamp(3rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem); }
.wr-next-head { text-align: center; margin-block-end: clamp(1.75rem, 4vw, 2.5rem); }
.wr-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-inline-size: 940px;
  margin-inline: auto;
}
.wr-next-item { min-inline-size: 0; }
.wr-next-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wr-color-ink);
  margin: 0 0 0.5rem;
}
[dir="rtl"] .wr-next-title { letter-spacing: normal; }
.wr-next-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wr-color-graphite);
  overflow-wrap: break-word;
}

/* ── Reduced motion: the page-hero entrance holds its final state ── */
@media (prefers-reduced-motion: reduce) {
  .wr-page-hero-inner { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .wr-mission { grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 2rem); }
  .wr-next { grid-template-columns: 1fr; max-inline-size: 520px; }
}


/* ══════════════════════════════════════════════════════════════════════
 * Final polish (R4) — dead-code cleanup left translations.py; here: the
 * "RM Global Network" proper-noun span + mobile touch-target sizing (WCAG 2.5.5).
 * Additive only.
 * ════════════════════════════════════════════════════════════════════ */

/* The legal entity name reads as an isolated Latin proper noun inside an Arabic
 * heading — slightly lighter than the heading weight, never italic. */
.wr-rln {
  unicode-bidi: isolate;
  direction: ltr;
  font-weight: 600;
}

/* WCAG 2.5.5 — 44x44 minimum touch targets in the collapsed mobile header +
 * footer. base.html markup is locked, so the existing link classes are sized
 * here (mobile only; the desktop header/footer stay compact). The CTAs, form
 * inputs (46px) and submit button (44px) already pass and need no change. */
@media (max-width: 720px) {
  .wr-nav-links .wr-nav-link { display: flex; align-items: center; min-block-size: 44px; }
  .wr-lang-toggle a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 0.4rem; }
  .wr-footer-links a { display: inline-flex; align-items: center; min-block-size: 44px; }
}