/* ============================================================
   رفيق المسلم · Muslim Begleiter · Muslim Companion
   DESIGN SYSTEM v2 — "Arabic Light Premium App Landing"
   Production stylesheet — rafiqalmuslim.app

   No Tailwind. No Bootstrap. No icon-font CDNs. No Google Fonts.
   Icons are inline SVG in markup (stroke: currentColor).

   Typography note: the WEBSITE loads Adobe Typekit (kit vum5gyf,
   family "effra" — verified 2026-06 against the kit CSS, weights
   300/400/500/700/900 in normal + italic, full glyphs incl. Arabic)
   for both Latin and Arabic website typography. This is a website-only
   third party and must be disclosed in the website privacy policy.
   App privacy claims (no tracking, no analytics) refer to the
   APP, not to this website.

   Sections
   01 Design tokens          10 Bento feature grid
   02 Base & reset           11 Feature detail sections
   03 Typography             12 Privacy dark section
   04 Layout & sections      13 Final CTA
   05 Icons                  14 Footer
   06 Buttons                15 FAQ
   07 Header & language      16 WordPress content components
   08 Hero (light)           17 RTL & Arabic overrides
   09 Trust strip            18 Accessibility & motion
                             19 Responsive
   ============================================================ */


/* ============================================================
   01 · DESIGN TOKENS
   ============================================================ */

:root {
  /* Brand */
  --cyan:        #00C0E8;
  --cyan-hover:  #00AED4;
  --cyan-soft:   rgba(0, 192, 232, 0.08);
  --cyan-medium: rgba(0, 192, 232, 0.20);
  /* Derived: accessible cyan for TEXT on light backgrounds.
     Pure --cyan fails WCAG on white (2.2:1) — never use it as text
     on light surfaces. --cyan-text passes AA (≈4.6:1). */
  --cyan-text:   #007FA3;
  /* Text color used ON cyan surfaces (white fails at 2.2:1). */
  --on-cyan:     #0F172A;

  /* Surfaces */
  --bg:        #F9FAFB;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #F1F5F9;

  /* Text */
  --text:           #0F172A;
  --text-secondary: #334155;
  --muted:          #64748B;
  --border:         #E5E7EB;
  --border-strong:  #CBD5E1;

  /* Dark sections */
  --dark-bg:       #0F172A;
  --dark-card:     #1A1A1A;
  --on-dark:       #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, 0.80);

  /* Status & accent */
  --green:       #34C759;
  --green-soft:  rgba(52, 199, 89, 0.10);
  --gold:        #C8A96E;          /* decorative accent only */
  --gold-soft:   rgba(200, 169, 110, 0.14);
  --danger:      #B91C1C;          /* functional error/warning text */
  --danger-soft: rgba(185, 28, 28, 0.08);

  /* Fonts — Effra is the primary face (Typekit kit vum5gyf), used for BOTH
     Arabic and Latin (supersedes the DS v2 "acumin-pro" + system-Arabic
     rules). A SANS-SERIF fallback stack is REQUIRED, not optional: with a
     bare "effra" the UA default for any uncovered glyph, any not-yet-loaded
     weight, or a blocked CDN is the browser SERIF (Times New Roman on
     Windows) — which looks broken. The fallbacks below keep every such case
     on a clean sans-serif while Effra still wins wherever it is available. */
  --font-primary-fallback: system-ui, -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic-fallback:  Tahoma, "Segoe UI", "Geeza Pro",
                           "Noto Naskh Arabic", "Noto Sans Arabic", Arial,
                           system-ui, sans-serif;
  --font-primary: var(--font-primary-fallback);
  --font-arabic:  var(--font-arabic-fallback);
  --font-mono:    "Cascadia Code", "SF Mono", Consolas, monospace; /* unused token (code blocks only) */

  /* Type scale */
  --t-hero-ar: clamp(2.6rem, 6vw, 5rem);
  --t-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --t-h1:      clamp(2rem, 4vw, 3.5rem);
  --t-h2:      clamp(1.6rem, 3vw, 2.6rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --t-body-lg: 1.25rem;
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;

  /* Line heights */
  --lh-ar:      2.0;    /* Arabic body */
  --lh-body:    1.65;   /* Latin body */
  --lh-heading: 1.22;   /* Latin headings */

  /* Layout */
  --container-wide: 1240px;
  --container-main: 1120px;
  --container-text: 760px;
  --container-px:   clamp(1.25rem, 5vw, 3rem);
  --section-y:      clamp(4rem, 8vw, 7rem);
  --section-y-sm:   clamp(2.5rem, 5vw, 4rem);

  /* Radii */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   30px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:  0 8px 24px -8px rgba(15, 23, 42, 0.10);
  --shadow-lg:  0 20px 40px -12px rgba(15, 23, 42, 0.10);
  --shadow-cta: 0 12px 28px -10px rgba(0, 192, 232, 0.45);

  /* Motion */
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 0.3s;
}

/* Effra is applied only after the CSS Font Loading API confirms the faces.
   Until then (or whenever Adobe is blocked), visible system fonts remain. */
html.rafiq-fonts-loaded {
  --font-primary: "effra", var(--font-primary-fallback);
  --font-arabic:  "effra", var(--font-arabic-fallback);
}


/* ============================================================
   02 · BASE & RESET
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; }

figure { margin: 0; }

::selection { background: var(--cyan-medium); }


/* ============================================================
   03 · TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  margin: 0;
  color: inherit;
  font-weight: 700;
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan-text); }

/* Eyebrow label above section headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  color: var(--cyan-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--cyan);
}

/* Centered section intro (heading + subheading) */
.section-intro {
  max-width: 42em;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.section-heading {
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--text);
}

.section-subheading {
  margin: 1rem auto 0;
  max-width: 38em;
  color: var(--muted);
  font-size: var(--t-body);
}


/* ============================================================
   04 · LAYOUT & SECTIONS
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); }

.section--light  { background: var(--surface); }
.section--tinted { background: var(--surface-3); }

.section--dark {
  background: var(--dark-bg);
  color: var(--on-dark);
}

.section--dark :is(h1, h2, h3, h4),
.section--dark .section-heading { color: var(--on-dark); }
.section--dark .section-subheading { color: var(--on-dark-muted); }
.section--dark a { color: var(--cyan); }


/* ============================================================
   05 · ICONS  (inline SVG, stroke: currentColor)
   ============================================================ */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.icon--lg { width: 1.65em; height: 1.65em; }

/* Directional icons (arrows) drawn pointing right (LTR forward).
   Add .icon-flip so they point "forward" in RTL too. */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }


/* ============================================================
   06 · BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.3rem;
  padding: 1rem 2.1rem;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--speed) var(--ease),
    border-color     var(--speed) var(--ease),
    color            var(--speed) var(--ease),
    box-shadow       var(--speed) var(--ease),
    transform        var(--speed) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Primary — cyan surface. Text is dark navy (--on-cyan): white on
   cyan fails WCAG AA (2.2:1); dark-on-cyan passes (≈8.2:1) and
   matches the app's own primary buttons. */
.btn--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--on-cyan);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  background: var(--cyan-hover);
  border-color: var(--cyan-hover);
  transform: translateY(-2px);
}

/* Secondary — outlined on light surfaces */
.btn--secondary {
  background: var(--surface);
  border-color: var(--border);
}

.btn--secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan-text);
}

/* Dark — solid navy (store-style emphasis on light sections) */
.btn--dark {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-dark);
}

.btn--dark:hover { background: #1E293B; border-color: #1E293B; }

/* Disabled — also covers the "coming soon" Google Play state */
.btn--disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Small — header CTA, inline actions */
.btn--sm {
  min-height: 2.5rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
}

/* Store badge — two-line label (e.g. "قريباً على / Google Play").
   Combine with .btn--disabled until the store URL exists. */
.btn--store {
  gap: 0.9rem;
  padding: 0.8rem 1.75rem;
  background: var(--text);
  border-color: var(--text);
  color: var(--on-dark);
  text-align: start;
}

.btn--store:hover { background: #1E293B; border-color: #1E293B; }

.btn-store__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  opacity: 0.85;
}

.btn-store__name {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}


/* ============================================================
   07 · HEADER & LANGUAGE SWITCHER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.5rem;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}

.site-logo__mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--cyan);
  color: #FFFFFF; /* logo glyph — decorative brand mark */
  box-shadow: var(--shadow-sm);
}

.site-logo__sub {
  display: block;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a {
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--cyan-text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.language-switcher {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.22rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.language-switcher a {
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.language-switcher a:hover { color: var(--text); }

.language-switcher a[aria-current="true"] {
  background: var(--cyan-soft);
  color: var(--cyan-text);
}


/* ============================================================
   08 · HERO (LIGHT)
   ============================================================ */

.hero-light {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background:
    radial-gradient(circle at 72% 25%, var(--cyan-soft) 0%, transparent 52%),
    radial-gradient(circle at 8% 85%, rgba(52, 199, 89, 0.05) 0%, transparent 45%),
    var(--surface);
}

.hero-light__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Two-column variant: text + phone visual */
.hero-light__inner--split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
}

.hero-light__content { min-width: 0; }

.hero-light__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.55rem 1.15rem;
  background: var(--cyan-soft);
  border: 1px solid var(--cyan-medium);
  border-radius: var(--r-full);
  color: var(--cyan-text);
  font-size: var(--t-sm);
  font-weight: 700;
}

.hero-light__badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cyan);
}

.hero-light__title {
  margin: 0 0 1.5rem;
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-light__title .accent { color: var(--cyan-text); }

.hero-light__subtitle {
  margin: 0 0 2.4rem;
  max-width: 36em;
  color: var(--text-secondary);
  font-size: var(--t-body-lg);
}

.hero-light__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-light__meta {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 600;
}

.hero-light__visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Radial cyan glow ornament (decorative, aria-hidden in markup).
   Position per use: hero, dark sections, CTA card. */
.hero-glow {
  position: absolute;
  width: clamp(280px, 42vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-medium) 0%, transparent 65%);
  filter: blur(70px);
  pointer-events: none;
}

.hero-light .hero-glow {
  top: -12%;
  inset-inline-end: -10%;
}


/* ============================================================
   09 · TRUST STRIP
   ============================================================ */

.trust-strip-light {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: 1.4rem;
}

.trust-strip-light__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 0.9rem;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
}

.trust-icon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  color: var(--cyan);
}


/* ============================================================
   10 · BENTO FEATURE GRID
   ============================================================ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
}

.bento-card {
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition:
    transform    0.35s var(--ease),
    box-shadow   0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.bento-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-medium);
  box-shadow: var(--shadow-lg);
}

.bento-card--wide { grid-column: span 8; }

.bento-card--center { text-align: center; }
.bento-card--center .bento-card__icon { margin-inline: auto; }

.bento-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.4rem;
  border-radius: var(--r-md);
  background: var(--cyan-soft);
  color: var(--cyan-text);
}

.bento-card__icon .icon { width: 1.6rem; height: 1.6rem; }

.bento-card__icon--gold  { background: var(--gold-soft);  color: var(--gold); }
.bento-card__icon--green { background: var(--green-soft); color: var(--green); }

.bento-card__title {
  margin: 0 0 0.65rem;
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--text);
}

.bento-card__text {
  margin: 0;
  color: var(--muted);
}

.bento-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

/* Soft decorative blob inside cards (aria-hidden) */
.bento-card__glow {
  position: absolute;
  top: -25%;
  inset-inline-end: -15%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-soft) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Small chips (sample prayer times, counts, tags) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: var(--t-xs);
  font-weight: 700;
}

.chip--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--on-cyan);
  box-shadow: 0 6px 14px -6px rgba(0, 192, 232, 0.5);
}


/* ============================================================
   11 · FEATURE DETAIL SECTIONS
   ============================================================ */

.feature-section { padding-block: var(--section-y); }

.feature-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Alternate content/visual order on every other section */
.feature-section--reverse .feature-section__content { order: 2; }

.feature-section__content { min-width: 0; }

.feature-section__title {
  margin: 0 0 1.25rem;
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--text);
}

.feature-section__text {
  margin: 0 0 1.75rem;
  color: var(--text-secondary);
}

.feature-section__visual {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.feature-checklist {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-checklist li {
  position: relative;
  padding-inline-start: 2.2rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.feature-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.14em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--green-soft);
}

.feature-checklist li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.31em;
  top: 0.45em;
  width: 0.73em;
  height: 0.73em;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.05 4.5 12l1.9-1.9 3.15 3.15 8.05-8.05 1.9 1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.05 4.5 12l1.9-1.9 3.15 3.15 8.05-8.05 1.9 1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================================================
   12 · PRIVACY DARK SECTION
   ============================================================ */

.privacy-dark {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--dark-bg);
  color: var(--on-dark);
}

.privacy-dark__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.privacy-dark__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.55rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full);
  color: var(--cyan);
  font-size: var(--t-sm);
  font-weight: 700;
}

.privacy-dark__title {
  margin: 0 0 1.5rem;
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--on-dark);
}

.privacy-dark__text {
  margin: 0 0 2.25rem;
  color: var(--on-dark-muted);
  font-size: var(--t-body-lg);
}

.privacy-list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.privacy-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cyan-medium);
  color: var(--cyan);
}

.privacy-item__title {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--on-dark);
}

.privacy-item__text {
  margin: 0;
  color: var(--on-dark-muted);
}

.privacy-card {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-xl);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* GPS / Overpass disclosure callout */
.privacy-note {
  margin-bottom: 1.75rem;
  padding: 1.4rem 1.5rem;
  background: rgba(0, 192, 232, 0.10);
  border: 1px solid var(--cyan-medium);
  border-radius: var(--r-md);
}

.privacy-note__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  color: var(--cyan);
  font-size: var(--t-sm);
  font-weight: 700;
}

.privacy-note p {
  margin: 0;
  color: var(--on-dark);
  font-size: var(--t-sm);
  line-height: 1.8;
}

/* Verified-fact rows inside .privacy-card */
.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  color: var(--on-dark-muted);
  font-weight: 600;
}

.privacy-row + .privacy-row { margin-top: 0.8rem; }

.privacy-row__check { color: var(--green); }

.privacy-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  color: var(--cyan);
  font-weight: 700;
}

.privacy-dark__glow {
  position: absolute;
  bottom: -22%;
  inset-inline-start: -10%;
  width: clamp(300px, 45vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 192, 232, 0.12) 0%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}


/* ============================================================
   13 · FINAL CTA
   ============================================================ */

.final-cta-light {
  padding-block: var(--section-y);
  background: var(--surface);
}

.final-cta-card {
  position: relative;
  overflow: hidden;
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 50% 0%, var(--cyan-soft) 0%, transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-align: center;
}

.final-cta-card__title {
  margin: 0 0 1rem;
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--text);
}

.final-cta-card__text {
  margin: 0 auto 2.25rem;
  max-width: 34em;
  color: var(--text-secondary);
}

.final-cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.final-cta-card__note {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: var(--t-sm);
}


/* ============================================================
   14 · FOOTER
   ============================================================ */

.site-footer,
.footer-light {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer-light__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--container-main);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--container-px) clamp(2.5rem, 5vw, 3.5rem);
}

.footer-brand p {
  margin: 1.1rem 0 0;
  max-width: 38ch;
  color: var(--muted);
  font-size: var(--t-sm);
}

.footer-links h4 {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  color: var(--text);
}

.footer-links ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.footer-links a:hover { color: var(--cyan-text); }

.footer-bottom { border-top: 1px solid var(--border); }

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-main);
  margin-inline: auto;
  padding: 1.4rem var(--container-px);
  color: var(--muted);
  font-size: var(--t-sm);
}


/* ============================================================
   15 · FAQ  (works with <details>/<summary> — no JS required)
   ============================================================ */

.faq-list {
  display: grid;
  gap: 1rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 1.5rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.faq-q::marker,
.faq-q::-webkit-details-marker { display: none; }

.faq-q .icon {
  color: var(--muted);
  transition: transform var(--speed) var(--ease);
}

details[open] > .faq-q .icon { transform: rotate(180deg); }

.faq-a {
  padding: 0 1.5rem 1.4rem;
  color: var(--text-secondary);
}

.faq-a p { margin: 0; }


/* ============================================================
   16 · WORDPRESS CONTENT COMPONENTS
   ============================================================ */

/* Post/page body (the_content) */
.wp-content {
  max-width: var(--container-text);
  margin-inline: auto;
}

.wp-content h2 {
  margin: 2.2rem 0 1rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--text);
}

.wp-content h3 {
  margin: 1.8rem 0 0.8rem;
  font-size: 1.2rem;
  color: var(--text);
}

.wp-content p,
.wp-content li { color: var(--text-secondary); }

.wp-content ul,
.wp-content ol {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding-inline-start: 1.5rem;
}

.wp-content a {
  color: var(--cyan-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-content img { border-radius: var(--r-md); }

/* Quote / verse / dhikr block */
.quote-block,
.wp-content blockquote {
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--cyan-soft);
  border-inline-start: 3px solid var(--cyan);
  border-radius: var(--r-md);
}

.quote-block p,
.wp-content blockquote p {
  margin: 0;
  color: var(--text);
  font-size: var(--t-body-lg);
  font-weight: 500;
}

.quote-block footer,
.quote-block cite {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--t-sm);
  font-style: normal;
}

/* Notice boxes */
.notice-box {
  margin: 1.5rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.notice-box p { margin: 0 0 0.6em; color: var(--text-secondary); }
.notice-box p:last-child { margin-bottom: 0; }

.notice-box__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: var(--t-body);
  font-weight: 800;
  color: var(--text);
}

.notice-box--info    { background: var(--cyan-soft);   border-color: var(--cyan-medium); }
.notice-box--success { background: var(--green-soft);  border-color: rgba(52, 199, 89, 0.35); }
.notice-box--warning { background: var(--gold-soft);   border-color: rgba(200, 169, 110, 0.45); }
.notice-box--danger  { background: var(--danger-soft); border-color: rgba(185, 28, 28, 0.30); }

.notice-box--danger .notice-box__title { color: var(--danger); }

/* Support / contact card */
.support-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.support-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--cyan-soft);
  color: var(--cyan-text);
}

.support-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }

.support-card p {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: var(--t-sm);
}

.support-card a { font-weight: 700; }

/* Legal / policy section card */
.legal-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.legal-card + .legal-card { margin-top: 1.5rem; }

.legal-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.2rem;
  color: var(--text);
}

.legal-card p,
.legal-card li { color: var(--text-secondary); }

.legal-card ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.5rem;
}

/* Article / Shurohat card */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition:
    transform    0.35s var(--ease),
    box-shadow   0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-medium);
  box-shadow: var(--shadow-md);
}

.article-card__meta {
  color: var(--cyan-text);
  font-size: var(--t-xs);
  font-weight: 700;
}

.article-card__title { margin: 0; font-size: 1.25rem; }

.article-card__title a {
  color: var(--text);
  text-decoration: none;
}

.article-card__title a:hover { color: var(--cyan-text); }

.article-card__excerpt { margin: 0; color: var(--muted); }

.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  color: var(--cyan-text);
  font-weight: 700;
  text-decoration: none;
}

/* Phone screenshot placeholder (until real screenshots exist) */
.phone-placeholder {
  position: relative;
  overflow: hidden;
  width: min(290px, 70vw);
  max-width: 100%;
  aspect-ratio: 9 / 19;
  flex: 0 1 330px;
  contain: layout paint;
  isolation: isolate;
  background: linear-gradient(165deg, var(--surface-3), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 42px;
  box-shadow: var(--shadow-lg);
}

.phone-placeholder::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 20px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.phone-placeholder::after {
  content: "";
  position: absolute;
  inset: 50px 16px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 28px;
}

.phone-placeholder__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}


/* ============================================================
   17 · RTL & ARABIC OVERRIDES
   Layout uses CSS logical properties throughout, so RTL works
   without per-component flipping. These rules cover language-
   specific typography only.
   ============================================================ */

/* Arabic: system Arabic stack, no letter-spacing, no uppercase */
:lang(ar) {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

/* Latin blocks nested inside Arabic pages get the primary stack back */
:lang(de),
:lang(en) { font-family: var(--font-primary); }

/* Arabic body rhythm */
p:lang(ar),
li:lang(ar),
dd:lang(ar) { line-height: var(--lh-ar); }

/* Arabic headings need taller line-height than Latin */
h1:lang(ar), h2:lang(ar), h3:lang(ar), h4:lang(ar),
.section-heading:lang(ar),
.bento-card__title:lang(ar),
.feature-section__title:lang(ar),
.privacy-dark__title:lang(ar),
.final-cta-card__title:lang(ar) {
  line-height: 1.5;
  letter-spacing: 0;
}

.hero-light__title:lang(ar) {
  font-size: var(--t-hero-ar);
  line-height: 1.45;
  letter-spacing: 0;
}

.hero-light__subtitle:lang(ar) { line-height: 1.9; }

.eyebrow:lang(ar) {
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
}

.btn:lang(ar),
.faq-q:lang(ar) { letter-spacing: 0; }


/* ============================================================
   18 · ACCESSIBILITY & MOTION
   ============================================================ */

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--text);
  color: var(--on-dark);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
   19 · RESPONSIVE
   1180px desktop · 900px tablet · 640px mobile · 390px small
   ============================================================ */

@media (max-width: 1180px) {
  .site-nav { gap: 1.4rem; }
  .hero-light__inner--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  }
}

@media (max-width: 900px) {
  /* WordPress theme provides a menu toggle at this width;
     the inline nav is hidden. */
  .site-nav { display: none; }

  .hero-light__inner--split { grid-template-columns: 1fr; }
  .hero-light__visual { display: none; }

  .bento-card { grid-column: span 6; }
  .bento-card--wide { grid-column: span 12; }

  .feature-section__inner { grid-template-columns: 1fr; }
  .feature-section--reverse .feature-section__content { order: 0; }

  .privacy-dark__inner { grid-template-columns: 1fr; }

  .footer-light__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header__inner { min-height: 4rem; gap: 0.75rem; }

  /* Compact header: logo + language switcher only.
     The download CTA reappears in the hero directly below. */
  .site-logo__sub { display: none; }
  .site-header__actions .btn { display: none; }

  .hero-light__actions { flex-direction: column; align-items: stretch; }
  .hero-light__actions .btn { width: 100%; }

  .trust-strip-light__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-strip-light__inner::-webkit-scrollbar { display: none; }
  .trust-item { white-space: nowrap; }

  .bento-card,
  .bento-card--wide { grid-column: span 12; }

  .final-cta-card__actions { flex-direction: column; align-items: center; }

  .footer-light__inner { grid-template-columns: 1fr; }
  .footer-bottom__inner { justify-content: center; text-align: center; }
}

@media (max-width: 390px) {
  .hero-light__badge { font-size: var(--t-xs); }
  .btn { padding-inline: 1.5rem; }
  .language-switcher a { padding-inline: 0.55rem; }
}


/* ============================================================
   20 · WORDPRESS THEME ADDITIONS (rafiqalmuslim)
   Theme-specific layer on top of Design System v2 styles.
   Tokens and component classes above are unchanged.
   ============================================================ */

/* --- Core WP helper classes ------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Sticky header below the WP admin bar */
body.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* --- Header: menu items from wp_nav_menu ------------------- */

/* wp_nav_menu outputs <li> wrappers; flatten them so anchors
   remain direct flex children of .site-nav. */
.site-nav li {
  display: contents;
  list-style: none;
}

/* --- Header: mobile menu toggle (≤900px) ------------------- */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { opacity: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .menu-toggle { display: flex; }

  /* Open state: nav drops below the sticky header as a panel. */
  .site-header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 1.25rem var(--container-px) 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
}

/* --- Language switcher: placeholder languages -------------- */

/* DE/EN render as non-link pills until those pages exist. */
.language-switcher__soon {
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-full);
  color: var(--border-strong);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: default;
}

/* --- Logo image (Customizer app icon) ---------------------- */

.site-logo__img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  object-fit: cover;
}

/* --- Compact page hero (page.php / index.php) -------------- */

.hero-light--compact { padding-block: clamp(3rem, 6vw, 4.5rem); }

.hero-light--compact .hero-light__title {
  margin: 0;
  font-size: var(--t-h1);
}

.hero-light--compact .hero-light__title:lang(ar) {
  font-size: var(--t-h1);
  line-height: 1.5;
}

/* --- Real phone screenshots (replace placeholders) --------- */

.phone-screenshot {
  display: block;
  width: min(290px, 70vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: auto 9 / 20;
  object-fit: contain;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 42px;
  box-shadow: var(--shadow-lg);
}

/* WordPress adds a 3000x1500 intrinsic placeholder to lazy images using
   sizes="auto". The screenshots already have trustworthy width/height
   attributes, so that generic placeholder would make them abnormally tall. */
img.phone-screenshot { contain-intrinsic-size: none; }

.phone-screenshot--sm,
.phone-placeholder--sm { width: min(200px, 58vw); }

.phone-placeholder--sm { border-radius: 32px; }

.phone-placeholder--sm::after { inset: 38px 12px 12px; border-radius: 22px; }

/* --- Screenshots strip (#screenshots) ----------------------- */

.screenshots-strip {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.screenshots-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.screenshots-strip__label {
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 600;
}

@media (max-width: 640px) {
  /* Horizontal scroll on small screens — no overflow at 390px. */
  .screenshots-strip {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding-block-end: 0.5rem;
  }

  .screenshots-strip::-webkit-scrollbar { display: none; }

  .screenshots-strip__item {
    flex: none;
    scroll-snap-align: start;
  }
}

/* --- Footer: social icons (render only when URLs exist) ---- */

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.footer-social__link {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.footer-social__link:hover {
  color: var(--cyan-text);
  border-color: var(--cyan);
}

/* --- Archive fallback grid (index.php) ---------------------- */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
}

@media (max-width: 900px) {
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .archive-grid { grid-template-columns: 1fr; }
}

/* WP pagination minimal styling */
.pagination { margin-top: 2.5rem; text-align: center; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--cyan-soft);
  border-color: var(--cyan-medium);
  color: var(--cyan-text);
}


/* ============================================================
   21 · PHASE 2.1.1 — VISUAL POLISH LAYER
   Scale, spacing, typography and card-presence upgrades for the
   Arabic homepage. Sections 01-19 above stay byte-identical to
   the Design System v2 baseline; everything here is an override
   layer so the polish is reviewable and reversible as one block.

   Direction unchanged: Arabic Light Premium - light hero, white
   surfaces, single cyan accent, bento grid, one dark privacy
   section. No new colors, no new dependencies.
   ============================================================ */

/* --- 21.1 · Type & rhythm scale-up ------------------------- */

:root {
  --t-hero-ar: clamp(2.75rem, 6.2vw, 5.4rem);   /* was 2.6-5    */
  --t-hero:    clamp(2.6rem, 5.2vw, 4.8rem);    /* was 2.5-4.5  */
  --t-h2:      clamp(1.85rem, 3.4vw, 2.9rem);   /* was 1.6-2.6  */
  --t-h3:      clamp(1.3rem, 2.2vw, 1.6rem);    /* was 1.15-1.5 */
  --t-body-lg: 1.375rem;                        /* was 1.25     */
  --t-body:    1.125rem;                        /* was 1.0625   */
  --t-sm:      1rem;                            /* was 0.9375   */
  --section-y: clamp(4rem, 8vw, 7rem);          /* design-system default */
}

/* Default section rhythm for the prepared interactive screens. */
.rafiq {
  --rafiq-min-height: auto;
}

/* --- 21.2 · Buttons gain physical presence ------------------ */

.btn {
  min-height: 3.6rem;
  padding: 1.05rem 2.4rem;
}

.btn--sm {
  min-height: 2.9rem;
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
}

.btn--store {
  gap: 1rem;
  padding: 1rem 2.2rem;
}

.btn-store__name { font-size: 1.2rem; }

/* --- 21.3 · Header: clearer lockup, readable nav ------------ */

.site-header__inner {
  min-height: 5.25rem;
  gap: 1.5rem;
}

.site-logo {
  gap: 0.85rem;
  font-size: 1.3rem;
}

.site-logo__mark {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 14px;
}

.site-logo__sub { font-size: 0.875rem; }

.site-logo__img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
}

.site-nav { gap: 2.4rem; }

.site-nav a { font-size: 1.0625rem; }

.language-switcher { padding: 0.3rem; }

.language-switcher a,
.language-switcher__soon {
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}

.menu-toggle {
  width: 3rem;
  height: 3rem;
}

/* --- 21.4 · Hero: confident scale, balanced split ----------- */

.hero-light {
  padding-block: clamp(5rem, 10vw, 8.5rem);
  background:
    radial-gradient(circle at 72% 25%, rgba(0, 192, 232, 0.12) 0%, transparent 52%),
    radial-gradient(circle at 8% 85%, rgba(52, 199, 89, 0.06) 0%, transparent 45%),
    var(--surface);
}

.hero-light__inner--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(3rem, 6vw, 5.5rem);
}

.hero-light__badge {
  margin-bottom: 2rem;
  padding: 0.65rem 1.3rem;
  font-size: 1rem;
}

.hero-light__title { margin-bottom: 1.75rem; }

.hero-light__subtitle {
  max-width: 32em;
  margin-bottom: 2.75rem;
}

.hero-light__meta {
  margin-top: 2rem;
  font-size: 1rem;
}

.hero-glow { width: clamp(340px, 48vw, 680px); }

.hero-light .hero-glow {
  top: -10%;
  inset-inline-end: -8%;
  background: radial-gradient(circle, rgba(0, 192, 232, 0.26) 0%, transparent 65%);
}

/* --- 21.5 · Phone visuals: larger, more finished ------------ */

.phone-placeholder,
.phone-screenshot { width: min(330px, 74vw); }

.phone-placeholder {
  background: linear-gradient(170deg, #FDFEFF 0%, var(--surface-3) 58%, #E9F7FB 100%);
  box-shadow:
    0 32px 64px -20px rgba(15, 23, 42, 0.20),
    0 24px 48px -16px rgba(0, 192, 232, 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.65);
}

.phone-placeholder__label { font-size: 1rem; }

/* --- 21.6 · Trust strip ------------------------------------- */

.trust-strip-light { padding-block: 1.75rem; }

.trust-item { font-size: 1.0625rem; }

/* --- 21.7 · Section intros ---------------------------------- */

.section-intro { margin-bottom: clamp(3rem, 6vw, 5rem); }

.section-subheading {
  font-size: 1.15rem;
  max-width: 36em;
}

/* --- 21.8 · Bento grid: substance and depth ----------------- */

.bento-grid { gap: clamp(1.4rem, 2.8vw, 2rem); }

.bento-card {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.4vw, 2.9rem);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

/* Wide cards carry a faint cyan wash so the 8-col slots read as
   feature anchors, not just stretched cards. */
.bento-card--wide {
  background: linear-gradient(135deg, var(--surface) 55%, rgba(0, 192, 232, 0.05) 100%);
}

.bento-card--center {
  align-items: center;
  justify-content: center;
}

.bento-card__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.6rem;
  border-radius: 18px;
}

.bento-card__icon .icon {
  width: 1.85rem;
  height: 1.85rem;
}

.bento-card__title { margin-bottom: 0.8rem; }

.bento-card__text {
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

/* Chips sit at the card baseline so wide cards fill their slot. */
.bento-card__meta {
  margin-top: auto;
  padding-top: 1.75rem;
  gap: 0.7rem;
}

.chip {
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}

@media (min-width: 901px) {
  .bento-card { min-height: 16rem; }
}

/* --- 21.9 · Feature detail ---------------------------------- */

.feature-section__inner { gap: clamp(3rem, 7vw, 6rem); }

.feature-section__text {
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.feature-checklist { gap: 1.1rem; }

.feature-checklist li {
  padding-inline-start: 2.5rem;
  font-size: 1.0625rem;
}

/* --- 21.10 · Privacy (small touches only - already strongest) */

.privacy-card { padding: clamp(2rem, 4vw, 3rem); }

.privacy-dark__text { max-width: 30em; }

.privacy-row { padding: 1.1rem 1.35rem; }

.privacy-item__icon {
  width: 3rem;
  height: 3rem;
}

/* --- 21.11 · Screenshots strip ------------------------------ */

.screenshots-strip { gap: clamp(1.75rem, 4vw, 3rem); }

.phone-screenshot--sm,
.phone-placeholder--sm { width: min(240px, 62vw); }

.screenshots-strip__label {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* --- 21.12 · FAQ: comfort + clear open state ---------------- */

#faq .container--text { max-width: 820px; }

.faq-list { gap: 1.1rem; }

.faq-q {
  padding: 1.5rem 1.75rem;
  font-size: 1.15rem;
}

.faq-a {
  padding: 0 1.75rem 1.6rem;
  font-size: 1.0625rem;
}

details[open].faq-item { border-color: var(--cyan-medium); }

details[open] > .faq-q,
details[open] > .faq-q .icon { color: var(--cyan-text); }

/* --- 21.13 · Final CTA: a real conversion moment ------------ */

.final-cta-card {
  max-width: 62rem;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem);
}

.final-cta-card__title { font-size: clamp(2rem, 4vw, 3.2rem); }

.final-cta-card__text {
  max-width: 36em;
  margin-bottom: 2.5rem;
  font-size: var(--t-body-lg);
}

.final-cta-card__note {
  margin-top: 1.75rem;
  font-size: 1rem;
}

/* --- 21.14 · Footer: presence without going dark ------------ */

.footer-light__inner {
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--container-px) clamp(3rem, 6vw, 4rem);
}

.footer-brand p {
  margin-top: 1.4rem;
  max-width: 36ch;
  font-size: 1.0625rem;
}

.footer-links h4 {
  margin-bottom: 1.4rem;
  font-size: 1.15rem;
}

.footer-links ul { gap: 0.9rem; }

.footer-links a { font-size: 1.0625rem; }

.footer-bottom__inner {
  padding: 1.75rem var(--container-px);
  font-size: 1rem;
}

/* --- 21.15 · Responsive restatements -------------------------
   Rules from sections 19/20 media queries whose properties are
   also set by this layer's base rules. Re-declared here so the
   cascade keeps the correct values at each breakpoint (this
   layer's base rules come later in source order than the §19
   media blocks, and would otherwise win at small widths). */

@media (max-width: 1180px) {
  .site-nav { gap: 1.6rem; }

  .hero-light__inner--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

@media (max-width: 900px) {
  .hero-light__inner--split { grid-template-columns: 1fr; }

  .footer-light__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header__inner {
    min-height: 4.25rem;
    gap: 0.85rem;
  }

  .footer-light__inner { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .btn { padding-inline: 1.5rem; }

  .hero-light__badge { font-size: var(--t-xs); }

  .language-switcher a,
  .language-switcher__soon { padding-inline: 0.55rem; }
}


/* ============================================================
   22 · PHASE 2.1.2 — LAYOUT WIDTH & PRESENCE FIX
   Root cause: with global box-sizing: border-box, every
   container's max-width INCLUDED its own inline padding
   (--container-px, 48px/side at desktop). The width tokens
   therefore never reached the content:

     .container box 1120px  -> content 1024px
     bento-grid / screenshots strip   = 1024px
     FAQ list (820 cap - 96 padding)  =  724px
     footer content                   = 1024px

   Fix: cap each wrapper at token + 2*padding so the CONTENT
   measures the token. Tokens themselves are unchanged
   (--container-main stays 1120px). width:100% + padding still
   governs below the cap, so small screens are unaffected and
   nothing can overflow.
   ============================================================ */

.container {
  max-width: calc(var(--container-main) + 2 * var(--container-px));
}

.container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--container-px));
}

.container--text {
  max-width: calc(var(--container-text) + 2 * var(--container-px));
}

.site-header__inner {
  max-width: calc(var(--container-wide) + 2 * var(--container-px));
}

.hero-light__inner,
.trust-strip-light__inner,
.feature-section__inner,
.privacy-dark__inner,
.footer-light__inner {
  max-width: calc(var(--container-main) + 2 * var(--container-px));
}

.footer-bottom__inner {
  max-width: calc(var(--container-main) + 2 * var(--container-px));
}

/* --- 22.1 · FAQ: comfortable reading column (880px content) -- */

#faq .container--text {
  max-width: calc(880px + 2 * var(--container-px));
}

/* --- 22.2 · CTA: strong conversion block within 860-980 ------ */

.final-cta-card { max-width: 960px; }

/* --- 22.3 · Screenshots: intentional 5-up row on desktop -----
   At >=1180px the five phones form one symmetric row filling the
   full container instead of a centered 3+2 wrap with leftover
   whitespace. Tablet keeps the centered wrap; <=640 keeps the
   horizontal scroll row from §20. */

@media (min-width: 1180px) {
  .screenshots-strip {
    flex-wrap: nowrap;
    gap: 2rem;
  }

  .screenshots-strip__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .screenshots-strip__item .phone-placeholder--sm,
  .screenshots-strip__item .phone-screenshot--sm {
    width: 100%;
  }
}


/* ============================================================
   23 · PHASE 2.2 — PRIVACY & SUPPORT PAGE LAYOUT
   Page-specific additions only; reuses the existing hero-light,
   legal-card, support-card, notice-box and faq components.
   ============================================================ */

/* --- Inner pages: section rhythm + compact hero text -------- */

.section--page { padding-block: clamp(3rem, 6vw, 5rem); }

.page-hero__subtitle {
  margin: 1.1rem 0 0;
  max-width: 38em;
  font-size: 1.2rem;
}

.page-hero__meta {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

.page-intro { margin-bottom: 2rem; }

.page-intro p {
  font-size: var(--t-body-lg);
  color: var(--text-secondary);
}

/* --- Legal cards: h2 section headings ------------------------ */

.legal-card__title {
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}

/* Notice boxes nested in cards: align with card padding rhythm. */
.legal-card .notice-box {
  margin: 1.5rem 0 0;
}

/* --- Third-party services list (locked content) -------------- */

.service-list {
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.service-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.service-item__name {
  flex: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.service-item__desc {
  flex: 1 1 16em;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* --- Support page ------------------------------------------- */

.support-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}

.support-card p { font-size: 1.0625rem; }

.support-checklist { margin-top: 1.5rem; }

.page-faq { margin-top: 3rem; }

.page-faq__title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--text);
}


/* ============================================================
   24 · PHASE 2.4 — MULTILINGUAL MICRO-FIXES
   The Latin logo lockups (Muslim Companion / Muslim Begleiter)
   are wider than the Arabic one; at <=440px the header actions
   row can overflow the viewport by ~2px on LTR pages. Tighten
   the compact-header metrics for every language.
   ============================================================ */

@media (max-width: 440px) {
  .site-header__inner { gap: 0.3rem; }

  .site-header__actions { gap: 0.6rem; }

  .site-logo {
    gap: 0.6rem;
    font-size: 1.15rem;
  }

  .site-logo__mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .menu-toggle {
    width: 2.6rem;
    height: 2.6rem;
  }

  .language-switcher a,
  .language-switcher__soon { padding-inline: 0.5rem; }
}

/* Keep the compact LTR header inside the narrowest supported viewport. */
@media (max-width: 340px) {
  .site-header__inner { gap: 0.2rem; }

  .site-header__actions { gap: 0.35rem; }

  .language-switcher { gap: 0.1rem; }

  .language-switcher a,
  .language-switcher__soon { padding-inline: 0.25rem; }

  .menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
}


/* ============================================================
   25 · HERO SCREENSHOT CAROUSEL
   Lightweight, hero-only carousel with no scroll pinning.
   ============================================================ */

.rafiq-hero-showcase {
  position: relative;
  width: 100%;
  align-items: center;
  isolation: isolate;
  overflow: visible;
}

.rafiq-hero-carousel {
  position: relative;
  --rafiq-hero-carousel-height: clamp(38.75rem, 52vw, 43.75rem);
  width: min(100%, clamp(26.875rem, 36vw, 32.5rem));
  min-width: 0;
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
}

.rafiq-hero-carousel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 47%;
  left: 50%;
  width: min(105%, 31rem);
  aspect-ratio: 1.05;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 192, 232, 0.28), rgba(0, 192, 232, 0.12) 43%, transparent 72%);
  filter: blur(38px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rafiq-hero-carousel__viewport {
  position: static;
  min-height: var(--rafiq-hero-carousel-height);
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.rafiq-hero-carousel__viewport:active { cursor: grabbing; }

.rafiq-hero-carousel__stage {
  position: absolute;
  z-index: 1;
  top: 0;
  inset-inline: 0;
  height: var(--rafiq-hero-carousel-height);
  overflow: visible;
  pointer-events: none;
}

.rafiq-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transform: translateX(0) scale(0.58);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease,
    filter 360ms ease;
  pointer-events: none;
  will-change: transform, opacity;
}

.rafiq-hero-slide.is-active {
  z-index: 5;
  opacity: 1;
  visibility: visible;
  filter: none;
  transform: translateX(0) rotate(0deg) scale(1.07);
}

@media (min-width: 901px) {
  .rafiq-hero-slide.is-active {
    /* Keep the primary screenshot larger than the 0.84 side previews so it
       remains the genuine visual/LCP focus on desktop. */
    transform: translateX(0) rotate(0deg) scale(0.92);
  }
}

.rafiq-hero-slide.is-prev,
.rafiq-hero-slide.is-next {
  z-index: 1;
  opacity: 0.38;
  visibility: visible;
  filter: blur(0.35px) saturate(0.9);
}

.rafiq-hero-slide.is-prev {
  transform: translateX(-28%) rotate(-5deg) scale(0.84);
}

.rafiq-hero-slide.is-next {
  transform: translateX(28%) rotate(5deg) scale(0.84);
}

[dir="rtl"] .rafiq-hero-slide.is-prev {
  transform: translateX(-28%) rotate(-5deg) scale(0.84);
}

[dir="rtl"] .rafiq-hero-slide.is-next {
  transform: translateX(28%) rotate(5deg) scale(0.84);
}

.rafiq-hero-slide.is-hidden {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0) scale(0.58);
  pointer-events: none;
}

.rafiq-hero-slide__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  width: clamp(20.5rem, 27vw, 21.875rem);
  aspect-ratio: 9 / 20;
  contain: size;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

.rafiq-hero-slide.is-active .rafiq-hero-slide__phone,
.rafiq-hero-slide.is-active .rafiq-hero-slide__screen {
  overflow: visible;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

.rafiq-hero-slide.is-prev .rafiq-hero-slide__phone,
.rafiq-hero-slide.is-next .rafiq-hero-slide__phone,
.rafiq-hero-slide.is-prev .rafiq-hero-slide__screen,
.rafiq-hero-slide.is-next .rafiq-hero-slide__screen {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.rafiq-hero-slide__phone::before,
.rafiq-hero-slide__phone::after,
.rafiq-hero-slide__screen::before,
.rafiq-hero-slide__screen::after {
  display: none;
}

.rafiq-hero-slide__phone img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  background: transparent;
  border-radius: 24px;
  box-shadow: none;
  pointer-events: none;
}

.rafiq-hero-slide.is-active img {
  background: transparent;
  border-radius: 30px;
  box-shadow:
    0 34px 90px rgba(0, 192, 232, 0.20),
    0 20px 55px rgba(15, 23, 42, 0.14);
}

.rafiq-hero-slide.is-prev img,
.rafiq-hero-slide.is-next img {
  object-fit: cover;
  background: transparent;
  border-radius: 24px;
  box-shadow: none;
}

@media (min-width: 901px) {
  .rafiq-hero-slide__phone img {
    max-height: calc(var(--rafiq-hero-carousel-height) - 1rem);
  }
}

.rafiq-hero-carousel__controls {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  margin-top: -0.5rem;
  opacity: 0.38;
  transition: opacity var(--speed) var(--ease);
}

.rafiq-hero-carousel__controls:hover,
.rafiq-hero-carousel__controls:focus-within {
  opacity: 1;
}

.rafiq-hero-nav {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: rgba(0, 151, 183, 0.72);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(0, 192, 232, 0.1);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition:
    color var(--speed) var(--ease),
    background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    transform var(--speed) var(--ease);
}

.rafiq-hero-nav:hover {
  color: var(--on-cyan);
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.rafiq-hero-nav:focus-visible,
.rafiq-hero-dot:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.rafiq-hero-nav .icon {
  width: 0.68rem;
  height: 0.68rem;
}

.rafiq-hero-nav--prev .icon { transform: rotate(180deg); }

[dir="rtl"] .rafiq-hero-nav--prev .icon { transform: none; }
[dir="rtl"] .rafiq-hero-nav--next .icon { transform: rotate(180deg); }

.rafiq-hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}

.rafiq-hero-dot {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.rafiq-hero-dot::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  background: rgba(0, 192, 232, 0.22);
  border-radius: var(--r-full);
  transition:
    width 280ms var(--ease),
    background-color 280ms var(--ease);
}

.rafiq-hero-dot:hover::before { background: var(--cyan-text); }

.rafiq-hero-dot.is-active::before {
  width: 0.95rem;
  background: rgba(0, 192, 232, 0.72);
}

@media (max-width: 900px) {
  .hero-light__visual.rafiq-hero-showcase {
    display: flex;
    margin-top: 0.5rem;
  }

  .rafiq-hero-carousel {
    /* Reserve the full 9:20 phone height plus the active-slide scale so the
       controls do not overlap the screenshot at tablet widths. */
    --rafiq-hero-carousel-height: min(50.5rem, 133vw);
    width: 100%;
  }

  .rafiq-hero-slide__phone { width: min(21rem, 56vw); }

  .rafiq-hero-slide.is-prev,
  .rafiq-hero-slide.is-next {
    opacity: 0.38;
    visibility: visible;
  }
}

@media (max-width: 640px) {
  .rafiq-hero-carousel { --rafiq-hero-carousel-height: min(44rem, 179vw); }

  .rafiq-hero-slide__phone { width: min(18.25rem, 75vw); }

  .rafiq-hero-slide.is-prev,
  .rafiq-hero-slide.is-next {
    opacity: 0.38;
    visibility: visible;
  }

  .rafiq-hero-carousel__controls {
    gap: 0.65rem;
    min-height: 1.5rem;
    margin-top: -0.35rem;
  }

  .rafiq-hero-nav { display: none; }
}

@media (max-width: 390px) {
  .rafiq-hero-showcase,
  .rafiq-hero-carousel,
  .rafiq-hero-carousel__viewport {
    max-width: 100%;
  }

  .rafiq-hero-carousel__controls { gap: 0.6rem; }

  .rafiq-hero-dots { gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rafiq-hero-slide,
  .rafiq-hero-nav,
  .rafiq-hero-dot {
    transition: none;
  }
}

/* Mobile screenshot sizing and density. Keep these overrides after the
   component refinements above so the small-screen measurements stay stable. */
@media (max-width: 640px) {
  .hero-light__visual.rafiq-hero-showcase { display: none; }

  .feature-section__visual .phone-screenshot {
    width: min(280px, 72vw);
    border-radius: 34px;
  }

  .screenshots-strip {
    gap: 0.75rem;
    scroll-snap-type: inline mandatory;
  }

  .screenshots-strip:focus-visible {
    outline: 2px solid var(--cyan-text);
    outline-offset: 0.35rem;
  }

  .screenshots-strip__item {
    flex: 0 0 62%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .screenshots-strip__item .phone-placeholder--sm,
  .screenshots-strip__item .phone-screenshot--sm {
    width: min(198px, 42vw);
  }

  .screenshots-strip__label {
    width: 100%;
    text-align: center;
  }
}

/* Features page: keep the compact default header instead of the showcase
   viewport treatment used by the interactive hero demo. */
.hero-light.hero-light--compact {
  height: auto;
  min-height: 0;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Feature screens come directly from the prepared wp-rafiq package. Keep
   their approved phone visual inside the default feature-section scaffold;
   the outer copy above remains the page's compact reference copy. */
.feature-section__visual--source .rafiq {
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.feature-section__visual--source .rafiq > [class$="__inner"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
}

.feature-section__visual--source .rafiq .rafiq-copy {
  display: none;
}

.feature-section__visual--source .rafiq [class$="__stage"] {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

.feature-section__visual--source .rafiq-device {
  max-width: 100%;
}