/* ============================================================
   Maqar Counsel  ·  quiet luxury homepage
   Palette: warm ivory base, espresso/walnut drama, muted bronze accent
   ============================================================ */

:root {
  /* base */
  --ivory:        #F4EEE2;   /* warm bone cream, fine stationery */
  --ivory-soft:   #EFE7D8;   /* slightly deeper ivory */
  --sand:         #ECE2CF;   /* slightly deeper warm tone for the credibility band */
  --ink:          #35291F;   /* deep espresso text on ivory */
  --ink-soft:     #6A5A4B;   /* muted brown, secondary text */

  /* drama */
  --espresso:     #241B14;   /* deep espresso brown band */
  --espresso-deep:#1A130D;   /* darkest */
  --walnut:       #3A2A1E;

  /* accent + light text */
  --bronze:       #A07C52;   /* muted bronze, used sparingly */
  --bronze-soft:  rgba(160,124,82,0.55);
  --cream:        #EFE6D6;   /* warm cream text on dark */
  --cream-dim:    rgba(239,230,214,0.68);

  --measure: 62rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- shared type ---------- */
.serif { font-family: "Playfair Display", Georgia, serif; }

.label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.30em;
  font-size: 0.72rem;
  color: var(--bronze);
  margin: 0;
}

.display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0.6em 0 0;
  color: var(--ink);
}
.display--cream { color: var(--cream); }

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 1.9rem 0 0;
  font-weight: 300;
}

/* ---------- layout helpers ---------- */
.wrap {
  width: min(100% - 3rem, var(--measure));
  margin-inline: auto;
}
.wrap--center { text-align: center; }

.section--ivory   { background: var(--ivory); }
.section--espresso{ background: var(--espresso); color: var(--cream); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  padding-block: 1.15rem;
  transition: background 0.6s var(--ease), backdrop-filter 0.6s var(--ease), border-color 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-scrolled {
  background: rgba(244, 238, 226, 0.86);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom-color: rgba(53, 41, 31, 0.10);
}
.topbar__inner {
  width: min(100% - 3rem, 82rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream);
  transition: color 0.6s var(--ease);
}
/* THE HEADER WORDMARK IS ALWAYS PLAYFAIR, in both languages.
   `.brand__name` carries the `serif` class, and `html[lang="ar"] .serif`
   further down the sheet switches that class to Amiri. That rule has the
   same specificity as a plain `html[lang="ar"] .brand__name`, so it would
   win on source order alone. The extra `.brand` here raises this above it
   (0,2,2 against 0,2,1), so the wordmark holds Playfair no matter where
   either rule sits, and a later edit cannot silently undo it. Scoped to
   the wordmark only: every other element carrying `serif` still becomes
   Amiri on an Arabic page. */
.brand .brand__name,
html[lang="ar"] .brand .brand__name {
  font-family: "Playfair Display", Georgia, serif;
}
.brand__sub {
  margin-top: 0.5rem;
  font-size: 0.60rem;
  letter-spacing: 0.34em;
  color: var(--cream-dim);
  transition: color 0.6s var(--ease);
}
.topbar.is-scrolled .brand__name { color: var(--ink); }
.topbar.is-scrolled .brand__sub  { color: var(--bronze); }

.lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.lang__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.2rem 0.15rem;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--cream-dim);
  transition: color 0.5s var(--ease), opacity 0.5s var(--ease);
}
.lang__btn[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 1rem; }
.lang__btn.is-active { color: var(--cream); }
.lang__btn:hover { color: var(--cream); }
.lang__sep { color: var(--cream-dim); opacity: 0.5; }
.topbar.is-scrolled .lang__btn { color: var(--ink-soft); }
.topbar.is-scrolled .lang__btn.is-active { color: var(--ink); }
.topbar.is-scrolled .lang__sep { color: var(--ink-soft); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--espresso-deep);
}
.hero__media { position: absolute; inset: 0; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video--loop {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero__video--loop.is-live { opacity: 1; }
.hero__video--intro.is-done { opacity: 0; }

/* warm brown vignette for legibility, not a flat darken */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(26,19,13,0) 34%, rgba(26,19,13,0.44) 78%, rgba(20,14,9,0.68) 100%),
    linear-gradient(180deg, rgba(26,19,13,0.30) 0%, rgba(26,19,13,0.04) 26%, rgba(26,19,13,0.16) 62%, rgba(20,14,9,0.62) 100%);
}

.hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 1.5rem;
  /* hidden on load, revealed slowly by JS about 2s after boardroom is visible */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 2.1s var(--ease), transform 2.1s var(--ease);
}
.hero__content.is-revealed { opacity: 1; transform: none; }

.hero__quote {
  color: var(--cream);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.38);
  white-space: nowrap;          /* each sentence stays on one line on normal screens */
}
.hero__quote--en { font-size: clamp(1.2rem, 3vw, 2.5rem); }
.hero__quote--ar {
  font-family: "Amiri", "Playfair Display", serif;
  font-size: clamp(1.05rem, 2.6vw, 2.15rem);
  line-height: 1.5;
  margin-top: 1.15rem;
  color: var(--cream-dim);
}

/* Enter as a subtle bordered box, transparent inside */
.enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14rem;             /* fixed, identical box for "Enter" and "ادخل" */
  margin-top: 2.6rem;
  padding: 1.15rem 2.4rem;
  border: 1px solid rgba(239, 230, 214, 0.40);
  background: transparent;
  color: var(--cream-dim);
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  transition: border-color 0.7s var(--ease), color 0.7s var(--ease), background 0.7s var(--ease);
}
.enter:hover {
  border-color: rgba(239, 230, 214, 0.85);
  color: var(--cream);
}
.enter--onDark { border-color: var(--bronze-soft); color: var(--cream-dim); }
.enter--onDark:hover { border-color: var(--bronze); color: var(--cream); }

.scrollcue {
  position: absolute;
  z-index: 3;
  inset-block-end: 2.1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(180deg, rgba(239,230,214,0) 0%, rgba(239,230,214,0.55) 100%);
  animation: cue 3.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity: 0.25; } 50% { opacity: 0.8; } }

/* ============================================================
   LOWER SECTION  ·  LAYERED DEPTH
   ============================================================ */
.depth {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  padding-block: clamp(5rem, 12vh, 9rem);
}
/* faded workspace background, almost a shadow, drifts slowly */
.depth__bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  background-image: url("workspace-web.jpg");
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.20;                 /* quietly present, still dim */
  filter: grayscale(24%) contrast(84%) brightness(1.03) sepia(10%);
  will-change: transform;
  pointer-events: none;
}
/* wash the image toward ivory so text stays readable over it */
.depth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(244,238,226,0.42) 0%,
    rgba(244,238,226,0.30) 50%,
    rgba(244,238,226,0.48) 100%);
  pointer-events: none;
}
.depth__content { position: relative; z-index: 2; }

.statement { padding-block: clamp(3rem, 9vh, 7rem); }
.how { padding-block: clamp(3rem, 9vh, 7rem); }

/* framed images, contained with generous ivory space */
.frame {
  margin: clamp(4rem, 12vh, 9rem) auto;
  width: min(100% - 3rem, 44rem);
  text-align: center;
}
.frame__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(160, 124, 82, 0.34);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 26px 60px -30px rgba(26, 19, 13, 0.45);
  background: var(--ivory-soft);
}
.frame__media img {
  position: absolute;
  top: -9%;                     /* centered, with headroom above and below */
  left: 0;
  right: 0;
  width: 100%;
  height: 118%;                 /* slight overscan for gentle drift */
  object-fit: cover;
  will-change: transform;
}
.frame__cap {
  margin: 1.6rem 0 0;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.3;
}

/* HOW IT WORKS steps, centered for balanced ivory space on both sides */
.how { text-align: center; }
.how .label { text-align: center; }
.steps {
  list-style: none;
  margin: 3.2rem auto 0;
  padding: 0;
  display: grid;
  gap: clamp(3rem, 7vh, 5.5rem);
  justify-items: center;
}
.step {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  max-width: 42ch;
  margin-inline: auto;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(160, 124, 82, 0.28);
}
.step__num {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--bronze);
}
.step__head {
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.22;
  margin: 0;
  color: var(--ink);
}
.step__body {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
}

/* closing note under the three steps, set gently apart */
.how__note {
  max-width: 46ch;
  margin: clamp(3.5rem, 8vh, 6rem) auto 0;
  text-align: center;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.how__note::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--bronze-soft);
  margin: 0 auto 1.9rem;
}

/* ============================================================
   CREDIBILITY BAND
   ============================================================ */
.credo {
  background: var(--sand);
  padding-block: clamp(6rem, 16vh, 11rem);
  text-align: center;
}
.credo__line {
  width: min(100% - 3rem, 46rem);
  margin-inline: auto;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.3vw, 1.85rem);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* ============================================================
   CLOSING  ·  the payoff, workspace resolves to full clarity
   ============================================================ */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--espresso-deep);
  padding-block: clamp(7rem, 22vh, 15rem);
  color: var(--cream);
}
.closing__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("workspace-web.jpg");
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* soft dark warm-brown overlay for readable text */
.closing__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(26,19,13,0.30) 0%, rgba(26,19,13,0.62) 70%, rgba(20,14,9,0.80) 100%),
    linear-gradient(180deg, rgba(36,27,20,0.52) 0%, rgba(26,19,13,0.58) 100%);
}
.closing__content { position: relative; z-index: 2; }
.closing__sub {
  margin: 1.5rem auto 0;
  max-width: 34ch;
  color: var(--cream-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.7;
}
.closing .enter { margin-top: 2.7rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  padding-block: 3.4rem 4rem;
  border-top: 1px solid rgba(239, 230, 214, 0.10);
  text-align: center;
}
.foot .wrap { display: grid; justify-items: center; gap: 1rem; }
.foot__mark { color: var(--cream); font-size: 1.15rem; letter-spacing: 0.02em; }
.foot__email {
  color: var(--cream-dim);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.5s var(--ease);
}
.foot__email:hover { color: var(--cream); }
.foot__social {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cream-dim);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.foot__link { color: var(--cream-dim); transition: color 0.5s var(--ease); }
.foot__link:hover { color: var(--bronze); }
.foot__dot { opacity: 0.5; }
.foot__legal {
  margin-top: 0.4rem;
  color: var(--cream-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: color 0.5s var(--ease);
}
.foot__legal:hover { color: var(--bronze); }

/* ============================================================
   TOP NAV LINK (About)
   ============================================================ */
.topbar__nav { display: inline-flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }
.navlink {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.68rem;
  color: var(--cream-dim);
  transition: color 0.5s var(--ease);
}
.navlink:hover { color: var(--cream); }
.topbar.is-scrolled .navlink { color: var(--ink-soft); }
.topbar.is-scrolled .navlink:hover { color: var(--ink); }
html[lang="ar"] .navlink { letter-spacing: 0.08em; }

/* ============================================================
   INTERIOR PAGES (About, Privacy and Terms)
   ============================================================ */
.topbar--interior {
  background: rgba(244, 238, 226, 0.90);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom-color: rgba(53, 41, 31, 0.10);
}
.topbar--interior .brand__name { color: var(--ink); }
.topbar--interior .brand__sub  { color: var(--bronze); }
.topbar--interior .lang__btn { color: var(--ink-soft); }
.topbar--interior .lang__btn.is-active { color: var(--ink); }
.topbar--interior .lang__sep { color: var(--ink-soft); }
.topbar--interior .navlink { color: var(--ink-soft); }
.topbar--interior .navlink:hover { color: var(--ink); }

.page {
  background: var(--ivory);
  padding-top: clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(5rem, 13vh, 9rem);
}
.page__inner { width: min(100% - 3rem, 46rem); margin-inline: auto; }

.page-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0;
}
.page-note {
  margin: 2.2rem 0 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--bronze-soft);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
html[lang="ar"] .page-note { font-style: normal; }

/* editorial rhythm shared by About + legal pages */
.lead-p {
  margin: 1.7rem 0 0;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink);
}
.block { margin-top: clamp(3.5rem, 9vh, 6.5rem); }
.block__eyebrow { margin-bottom: 1.5rem; }   /* uses .label */
.block__h {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.block__p {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-soft);
}
.subblock { margin-top: clamp(2.2rem, 5vh, 3.3rem); }
.subblock__h {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.page-cta { margin-top: clamp(3.5rem, 9vh, 6rem); }

/* Enter box variant for light ivory backgrounds */
.enter--onLight { border-color: rgba(53, 41, 31, 0.28); color: var(--ink-soft); }
.enter--onLight:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   REVEAL ON SCROLL (calm, slow)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal:nth-child(3) { transition-delay: 0.22s; }

/* ============================================================
   ARABIC  ·  RTL + font swaps
   ============================================================ */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }
html[lang="ar"] .serif { font-family: "Amiri", "Playfair Display", serif; }
/* Arabic sits smaller than Latin at the same pixel size. Lift the whole Arabic
   view evenly through the root, so every rem based size grows and, because line
   heights are unitless, the line spacing grows with it. English is never matched
   by these rules. Fonts are unchanged: the Amiri and IBM Plex Sans Arabic
   switches above still stand. */
html[lang="ar"] { font-size: 107%; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] .label { letter-spacing: 0.12em; }
html[lang="ar"] .brand__sub { letter-spacing: 0.14em; }
html[lang="ar"] .enter { letter-spacing: 0.14em; }
html[lang="ar"] .drift__line { line-height: 1.45; }
html[lang="ar"] .step__num { letter-spacing: 0.06em; }
html[lang="ar"] .frame__cap { font-style: normal; }
html[lang="ar"] .how__note { font-style: normal; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .brand__name { font-size: 1.2rem; }
  /* on narrow phones, allow the sentences to wrap instead of overflowing */
  .hero__quote { white-space: normal; }
  .hero__quote--en { font-size: clamp(1.5rem, 7.4vw, 2.1rem); max-width: 20ch; }
  .hero__quote--ar { font-size: clamp(1.25rem, 6vw, 1.7rem); max-width: 22ch; }
  .lede { max-width: none; }
  .step { max-width: none; }
  .frame { margin-block: clamp(3rem, 9vh, 6rem); }
  .depth__bg { opacity: 0.16; }
}

/* ============================================================
   THE PHONE
   ------------------------------------------------------------
   Mobile is the main case: a member on a phone, at night, between
   meetings. Nothing here is a redesign. The type, the palette and
   the restraint are untouched, and none of it reaches a larger
   screen. What changes is only this: the quiet controls become
   thumb sized WITHOUT becoming louder (the touch area grows, the
   mark itself does not), the smallest labels stay legible, and the
   edges stop being cramped.
   ============================================================ */
@media (max-width: 30rem) {
  /* the header keeps its height: the controls take the room the
     bar's own padding gives back, so nothing below it shifts */
  .topbar { padding-block: 0.5rem; }
  .topbar__inner { width: min(100% - 2.2rem, 82rem); gap: 0.5rem; }

  .brand { padding-block: 0.5rem; }          /* 37px tall -> 44px of thumb */
  .brand__sub {
    margin-top: 0.4rem;
    font-size: 0.66rem;                      /* was 9.6px on a phone: too small to read */
    letter-spacing: 0.22em;                  /* the wider tracking is what made it cramped */
  }

  .topbar__nav { gap: 0.9rem; }
  .navlink { padding-block: 0.85rem; }       /* 17px tall -> 44px of thumb, same mark */
  .lang { gap: 0.2rem; }
  .lang__btn {                               /* 21px tall -> 44px of thumb */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.4rem;
  }
}

/* ============================================================
   HOW MAQAR WORKS (member guide)
   A single quiet reading column: ivory base, espresso headings in
   Playfair upright, Inter body in the softer ink. text-align start
   and margin-inline auto so the column and its text flip to the
   right in Arabic through the html dir the toggle sets, with no per
   element rule. Amiri and IBM Plex Sans Arabic arrive from the
   shared html[lang="ar"] rules above.
   ============================================================ */
.guide {
  max-width: 46rem;
  margin-inline: auto;
  /* Clear the fixed top bar, the same offset the auth pages use (.auth). */
  padding: clamp(7rem, 14vh, 9rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3.5rem, 10vh, 6rem);
  text-align: start;
}
.guide__title {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.guide__intro {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.guide__section { margin-top: clamp(2rem, 5vh, 3rem); }
.guide__heading {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.85rem;
}
.guide__body {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0;
}
html[lang="ar"] .guide__body { line-height: 2; }
/* a quiet way back to the dashboard, above the heading, bronze and understated */
.guide__back {
  display: inline-block;
  margin-bottom: 1.6rem;
  color: var(--bronze);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 124, 82, 0.4);
  padding-bottom: 0.2rem;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.guide__back:hover { color: var(--ink); border-color: var(--ink); }
html[lang="ar"] .guide__back { letter-spacing: 0.08em; }

/* ============================================================
   MOTION SAFETY
   ============================================================ */
/* ============================================================
   LAPSE (paused access) message, shown in place of a paid room when access has
   paused. Centered, premium, clears the fixed top bar, matches the ivory and
   espresso palette. Reversible: remove this block.
   ============================================================ */
.paused:not([hidden]) {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(7rem, 14vh, 9rem) clamp(1.5rem, 6vw, 3rem) clamp(3rem, 8vh, 5rem);
  text-align: center;
}
.paused__inner { max-width: 34rem; }
.paused__eyebrow { color: var(--bronze); margin-bottom: 1.2rem; }
.paused__title {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.paused__body {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.75;
  margin: 0 0 2rem;
}
.paused__link {
  display: inline-block;
  color: var(--bronze);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 124, 82, 0.4);
  padding-bottom: 0.2rem;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.paused__link:hover { color: var(--ink); border-color: var(--ink); }
html[lang="ar"] .paused__link { letter-spacing: 0.08em; }
html[lang="ar"] .paused__body { line-height: 2; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__content { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}