/* =========================================================
   ملتقى حوكمة القطاعات الحيوية — غرفة المدينة المنورة
   Arabic-first, RTL-native. Logical properties throughout.
   Animations: transform/opacity only. prefers-reduced-motion honored.
   ========================================================= */

/* ===== Tokens ===== */
:root {
  /* ---------------------------------------------------------------
     Brand palette — from the forum's approved identity sheet
     (الألوان المعتمدة). Exact values, not derived.

       PRIMARY   #9C4D15  rust    · #372a14  brown
       SUPPORT   #b4a793  taupe   · #d1c6b5  sand
                 #82ccc1  mint    · #b0622e  rust-light
                 #143052  navy

     Only the -deep / -mid / -tint steps below are derived, purely to
     give the brand colours shading room. Note this is the FORUM's
     identity; the chamber logo keeps its own navy + olive and is
     never recoloured to match.
     --------------------------------------------------------------- */
  --brown:        #372a14;   /* primary — dark surfaces */
  --brown-mid:    #2a2010;   /* derived */
  --brown-deep:   #1d160a;   /* derived — footer, deepest ground */
  --brown-light:  #5a482b;   /* derived */

  --rust:         #9C4D15;   /* primary — CTAs, accents, links */
  --rust-light:   #b0622e;   /* support */
  --rust-mid:     #c47a45;   /* derived */

  --taupe:        #b4a793;   /* support */
  --sand:         #d1c6b5;   /* support */
  --sand-tint:    #f7f3ec;   /* derived — section tints */

  --mint:         #82ccc1;   /* support — highlight, as on the identity sheet */
  --mint-light:   #a3ddd4;   /* derived */
  --mint-soft:    #e8f6f3;   /* derived */

  --navy:         #143052;   /* support — deep contrast */

  --text:         #2b2114;
  --text-body:    #4a4034;
  --text-muted:   #7a6f61;
  --bg:           #ffffff;
  --bg-alt:       #faf7f2;
  --border:       #ebe4d9;
  --border-strong:#d1c6b5;

  /* Focus ring: rust reads on light ground, mint on dark. The dark-surface
     override lives just under the base rule. */
  --focus:        #9C4D15;

  --shadow-sm: 0 1px 2px rgba(55, 42, 20, .06), 0 2px 6px rgba(55, 42, 20, .05);
  --shadow-md: 0 4px 12px rgba(55, 42, 20, .07), 0 12px 32px rgba(55, 42, 20, .08);
  --shadow-lg: 0 10px 24px rgba(55, 42, 20, .09), 0 28px 64px rgba(55, 42, 20, .12);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  /* Type — per the identity sheet (الخطوط المعتمدة)
     Almarai for headings (العناوين الرئيسية), Tajawal for body (المحتوى الفرعي). */
  --font:      'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: 'Almarai', 'Tajawal', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .32s;
  --dur-slow: .7s;

  --header-h: 76px;
  --maxw: 1200px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.8;                 /* Arabic needs more air than Latin */
  color: var(--text-body);
  background: var(--bg);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(156, 77, 21, .14);
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.4;
  font-weight: 800;
  text-wrap: balance;
}

/* Display-weight numerals and headline-adjacent text also take the
   heading face, so the two typefaces don't interleave mid-block. */
.hero-title, .hero-slogan, .section-tag, .logo-text strong,
.cd-num, .indicator strong, .card-num, .quote blockquote {
  font-family: var(--font-head);
}

/* Latin/numeric runs inside RTL text */
/* Latin content — emails, timestamps, phone numbers, references — inside an
   otherwise Arabic page.

   `text-align: start` resolves against THIS element's direction, which is ltr,
   so on a block or a table cell it pulled the value to the LEFT edge while its
   label stayed on the right. That was visible in every admin table and in the
   attendee's own details. Isolation is what keeps the digits in Latin order;
   alignment must follow the PAGE, not the span. Inputs keep the caret on the
   left, which is the convention for a Latin field. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.ltr:not(input):not(textarea) { text-align: right; }
[dir="ltr"] .ltr:not(input):not(textarea) { text-align: left; }
input.ltr, textarea.ltr { text-align: left; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ===== Focus ===== */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Rust has no contrast on the dark grounds — swap to mint there. The two dark
   sections added later (.section.dark, .detail-hero) were missing from this
   list, so keyboard focus there sat at 2.99:1 — under the 3:1 floor for a
   focus indicator, on the very surface a keyboard user tabs through first. */
.hero :focus-visible,
.footer :focus-visible,
.indicators :focus-visible,
.section.dark :focus-visible,
.detail-hero :focus-visible,
.header:not(.is-stuck) :focus-visible { outline-color: var(--mint); }
.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--brown); color: #fff;
  border-radius: var(--radius-sm); font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 32px);
}
.container-narrow { max-width: 860px; }

.section { padding-block: clamp(64px, 9vw, 112px); }
.section.alt { background: var(--bg-alt); }

.section-header { text-align: center; max-width: 780px; margin-inline: auto; margin-block-end: clamp(40px, 6vw, 64px); }
.section-tag {
  display: inline-block;
  padding: 6px 18px;
  margin-block-end: 16px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--rust);
  background: var(--sand-tint); border: 1px solid var(--sand);
  border-radius: 50px;
}
.section-header h2 { font-size: clamp(1.45rem, 3.4vw, 2.15rem); }
.section-intro { margin-block-start: 14px; color: var(--text-muted); font-size: 1.02rem; }

.note {
  margin-block-start: 32px; text-align: center;
  font-size: .9rem; color: var(--text-muted);
}
.muted { color: var(--text-muted); }

/* ===== Icons ===== */
.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 34px; height: 34px; stroke-width: 1.6; color: var(--rust); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 30px;
  border-radius: 50px;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

/* A locked button must LOOK locked. Without this a disabled primary button is
   pixel-identical to a live one, so the visitor clicks it, nothing happens,
   and nothing on screen explains why. */
.btn[disabled] {
  cursor: not-allowed;
  opacity: .45;
  box-shadow: none;
  filter: grayscale(.35);
}
.btn[disabled]:hover,
.btn[disabled]:active { transform: none; box-shadow: none; }
/* Each variant keeps its own resting colour rather than taking the hover one. */
.btn-primary[disabled]:hover { background: var(--rust); }
.btn-ghost[disabled]:hover { background: none; border-color: rgba(255, 255, 255, .5); }

.btn-primary {
  background: var(--rust); color: #fff;
  box-shadow: 0 4px 14px rgba(156, 77, 21, .30);
}
.btn-primary:hover { background: var(--brown); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(55, 42, 20, .34); }

.btn-ghost { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }

.btn-link {
  padding: 8px 4px; color: var(--mint-light); font-weight: 700;
  border-block-end: 1.5px solid transparent; border-radius: 0;
}
.btn-link:hover { border-block-end-color: currentColor; }
.venue-card .btn-link { color: var(--rust); margin-block-start: 12px; }

.btn-lg { padding: clamp(10px, 1.9vh, 16px) clamp(20px, 3vw, 38px); font-size: clamp(.85rem, min(2.2vw, 1.8vh), 1rem); }
.btn-sm { padding: 8px 16px; font-size: .84rem; }
.btn-full { width: 100%; }

/* ===== Scroll progress ===== */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 120; pointer-events: none;
}
.scroll-progress > span {
  display: block; height: 100%;
  background: linear-gradient(to left, var(--mint), var(--rust-mid));
  transform: scaleX(0); transform-origin: right center;
  will-change: transform;
}

/* ===== Header ===== */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  padding-block: 14px;
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              padding-block var(--dur) var(--ease);
}
.header.is-stuck {
  padding-block: 8px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
/* Tight budget: forum lockup + chamber lockup + 9 nav links + CTA must
   fit 1200px without wrapping or overflowing. */
.header-inner { display: flex; align-items: center; gap: 14px; }

/* The chamber mark is the site's primary logo. The forum name sits beside
   it, separated by a hairline rule. */
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo .mcci-logo {
  height: 38px;
  transition: opacity var(--dur) var(--ease);
}
.logo:hover .mcci-logo { opacity: .82; }
.logo-rule {
  width: 1px; height: 32px; flex: none;
  background: rgba(255, 255, 255, .26);
  transition: background-color var(--dur) var(--ease);
}
.header.is-stuck .logo-rule { background: var(--border-strong); }
.logo-text { display: flex; flex-direction: column; line-height: 1.3; }
.logo-text strong { font-size: .9rem; color: #fff; transition: color var(--dur) var(--ease); }
.logo-text small { font-size: .74rem; color: rgba(255,255,255,.75); transition: color var(--dur) var(--ease); }
.header.is-stuck .logo-text strong { color: var(--text); }
.header.is-stuck .logo-text small { color: var(--text-muted); }

.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav-link {
  position: relative;
  padding: 8px 9px;
  font-size: .85rem; font-weight: 500; white-space: nowrap;
  color: rgba(255,255,255,.86);
  border-radius: 8px;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute;
  inset-block-end: 2px; inset-inline: 12px;
  height: 2px; border-radius: 2px;
  background: var(--mint);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link.is-active::after { transform: scaleX(1); }
.header.is-stuck .nav-link { color: var(--text-muted); }
.header.is-stuck .nav-link:hover,
.header.is-stuck .nav-link.is-active { color: var(--brown); }

/* ===== Grouped nav ===== */
.nav-group { position: relative; }
.nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-chev {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-start: 0;              /* RTL: pins to the group's start edge */
  z-index: 110;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 208px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-menu.is-open { opacity: 1; transform: none; }

.nav-sublink {
  padding: 9px 14px;
  font-size: .88rem; font-weight: 500;
  color: var(--text-body);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-sublink:hover, .nav-sublink.is-active { background: var(--sand-tint); color: var(--rust); }

.btn-register { flex: none; padding: 11px 20px; font-size: .87rem; }

.menu-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 10px; margin-inline-start: auto;
  border-radius: 10px;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.header.is-stuck .menu-toggle span { background: var(--text); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(29, 22, 10, .55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

/* ===== Hero ===== */
/* One screen, every device.
   Height is svh (not vh) so mobile browser chrome doesn't push content out
   of view. Every child below is sized against BOTH axes — min(Xvw, Yvh) —
   so a short landscape phone shrinks type the same way a narrow one does.
   Short-viewport rules further down drop the optional lines. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  max-height: 1080px;
  display: grid; place-items: center;
  padding-block: calc(var(--header-h) + clamp(8px, 2.5vh, 32px)) clamp(40px, 8vh, 92px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, var(--brown) 0%, var(--brown-deep) 55%, #140f07 100%);
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-grid {
  position: absolute; inset: -20%;
  background-image: url("/assets/ornament.svg");
  background-size: 200px 200px;
  /* texture, not wallpaper — it must not compete with the building photo */
  opacity: .07;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  animation: gridDrift 34s linear infinite;
}
/* Kept deliberately faint. Saturated colour over brown goes muddy fast — these read
   as a soft glow at the corners, never as visible coloured blobs. */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.orb-1 {
  width: 560px; height: 560px;
  background: var(--rust-light);
  opacity: .20;
  inset-block-start: -180px; inset-inline-end: -160px;
  animation: float1 20s var(--ease) infinite alternate;
}
.orb-2 {
  width: 480px; height: 480px;
  background: var(--navy);
  opacity: .26;
  inset-block-end: -200px; inset-inline-start: -140px;
  animation: float2 24s var(--ease) infinite alternate;
}

@keyframes gridDrift { to { transform: translate3d(200px, 200px, 0); } }
@keyframes float1 { to { transform: translate3d(-70px, 60px, 0) scale(1.12); } }
@keyframes float2 { to { transform: translate3d(60px, -50px, 0) scale(1.18); } }

.hero-content { position: relative; text-align: center; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(6px, 1.1vh, 9px) clamp(14px, 2vw, 22px);
  margin-block-end: clamp(12px, 2.6vh, 28px);
  font-size: clamp(.76rem, min(2.4vw, 1.7vh), .9rem); font-weight: 500;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  backdrop-filter: blur(8px);
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint-light);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: .45; }
}

.hero-title {
  font-size: clamp(1.65rem, min(7vw, 7.2vh), 4.2rem);
  font-weight: 800; line-height: 1.22; color: #fff;
  margin-block-end: clamp(6px, 1.4vh, 18px);
}
.hero-title .grad {
  display: block;
  background: linear-gradient(to left, var(--mint), var(--sand) 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-slogan {
  font-size: clamp(.92rem, min(2.8vw, 2.5vh), 1.5rem);
  font-weight: 400; color: var(--mint-light);   /* Almarai has no 500 */
  margin-block-end: clamp(8px, 1.8vh, 20px);
}
.hero-sub {
  max-width: 660px; margin-inline: auto;
  color: rgba(255,255,255,.82);
  font-size: clamp(.84rem, min(2.2vw, 1.85vh), 1.02rem);
}
.hero-sub strong { color: #fff; }

/* Countdown */
.countdown {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(5px, 2vw, 18px);
  margin-block: clamp(16px, 3.6vh, 40px) clamp(14px, 3.2vh, 36px);
}
.cd-unit {
  display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .7vh, 6px);
  min-width: clamp(54px, min(15vw, 11vh), 96px);
  padding: clamp(8px, 1.7vh, 16px) clamp(6px, 1.2vw, 10px);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.cd-num {
  font-size: clamp(1.15rem, min(5vw, 4.2vh), 2.5rem); font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
  direction: ltr;
}
.cd-num.tick { animation: tick .34s var(--ease-out); }
@keyframes tick {
  0%   { transform: translateY(-38%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.cd-label { font-size: clamp(.6rem, min(1.6vw, 1.35vh), .74rem); color: rgba(255,255,255,.68); }
.cd-sep {
  align-self: center; margin-block-start: -14px;
  font-size: 1.5rem; font-weight: 800; color: rgba(255,255,255,.3);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vh, 14px); justify-content: center; align-items: center; }

.hero-scroll {
  position: absolute; inset-block-end: 26px; inset-inline-start: 50%;
  translate: 50% 0;
  display: grid; place-items: center;
  width: 28px; height: 46px;
  border: 2px solid rgba(255,255,255,.3); border-radius: 50px;
}
.hero-scroll span {
  display: block; width: 4px; height: 8px; border-radius: 4px;
  background: var(--mint-light);
  animation: scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-8px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* ===== Quote ===== */
.quote-section { padding-block: clamp(56px, 8vw, 88px); background: var(--sand-tint); }
.quote { position: relative; max-width: 820px; margin-inline: auto; text-align: center; }
.quote-mark {
  width: 44px; height: 44px; margin-inline: auto; margin-block-end: 18px;
  fill: none; stroke: var(--rust); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}
.quote blockquote {
  font-size: clamp(1.08rem, 2.6vw, 1.45rem);
  font-weight: 400; line-height: 1.85; color: var(--brown);
}
.quote figcaption { margin-block-start: 18px; font-size: .88rem; font-weight: 700; color: var(--text-muted); }

/* ===== About ===== */
.about-grid {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1.25fr 1fr; align-items: start;
}
.about-lead h3 {
  font-size: clamp(1.08rem, 2.3vw, 1.3rem);
  line-height: 1.7; color: var(--brown);
  padding-inline-start: 18px;
  border-inline-start: 4px solid var(--mint);
  margin-block-end: 22px;
}
.about-lead p + p { margin-block-start: 16px; }
.about-lead strong { color: var(--brown); }

.about-facts { display: grid; gap: 14px; }
.about-facts li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.about-facts li:hover { transform: translateX(-6px); box-shadow: var(--shadow-md); border-color: var(--sand); }
.about-facts .ico { color: var(--rust); margin-block-start: 5px; }
.about-facts div { display: flex; flex-direction: column; }
.about-facts strong { color: var(--text); font-size: .98rem; }
.about-facts span { font-size: .88rem; color: var(--text-muted); }

/* ===== Cards ===== */
.cards-3 {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  position: relative;
  padding: 32px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(to left, var(--mint), var(--rust-mid));
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.12rem; margin-block-end: 12px; }
.card p { font-size: .95rem; color: var(--text-muted); }
.card-num {
  position: absolute; inset-block-start: 14px; inset-inline-end: 22px;
  font-size: 2.6rem; font-weight: 800; color: var(--sand);
  line-height: 1; font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.card:hover .card-num { color: var(--mint-soft); }
.card-audience .ico-lg { margin-block-end: 18px; }

/* ===== Timeline ===== */
.timeline { position: relative; max-width: 860px; margin-inline: auto; }
.timeline::before {
  content: ""; position: absolute;
  inset-block: 8px; inset-inline-start: calc(112px + 7px);
  width: 2px; background: var(--border-strong);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.1s var(--ease-out);
}
.timeline.is-drawn::before { transform: scaleY(1); }

.timeline-item {
  position: relative;
  display: grid; grid-template-columns: 112px 1fr; gap: 28px;
  padding-block-end: 28px;
}
.timeline-item::before {
  content: ""; position: absolute;
  inset-block-start: 9px; inset-inline-start: 112px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--rust-light);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.timeline-item.is-key::before { border-color: var(--mint); box-shadow: 0 0 0 5px var(--mint-soft); }
.timeline-item:hover::before { transform: scale(1.28); }

.time {
  padding-block-start: 4px;
  font-size: .9rem; font-weight: 700; color: var(--rust);
  text-align: start; white-space: nowrap;
}
.timeline-content {
  padding: 20px 24px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.timeline-item:hover .timeline-content { transform: translateX(-6px); box-shadow: var(--shadow-md); }
.timeline-item.is-key .timeline-content { border-color: var(--mint); background: linear-gradient(180deg, var(--mint-soft), var(--bg) 70%); }
.timeline-content h3 { font-size: 1.04rem; margin-block-end: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timeline-content p { font-size: .93rem; color: var(--text-muted); }

.pill {
  padding: 3px 12px;
  font-size: .72rem; font-weight: 700;
  color: var(--rust); background: var(--sand-tint);
  border: 1px solid var(--sand); border-radius: 50px;
  white-space: nowrap;
}

/* ===== Speakers — dark section =====
   Ten speakers on a four-column row wrap to 4 / 4 / 2, and a short last row
   centres itself, which is why this is flex and not grid. Each card is a
   button: the name and the cue always show, the role opens on click. */
/* --rust-mid (#c47a45) measures about 3.5:1 on the brown ground — under AA for
   the small, bold text it was carrying (the kicker, the dark breadcrumb, the
   "tap for details" cue). This lighter step of the same hue clears 4.5:1 while
   staying the same accent. Used ONLY on dark surfaces. */
:root { --rust-on-dark: #e0a072; }

/* Same dark treatment the indicators band already uses, so the page has one
   dark vocabulary rather than two. */
.section.dark {
  background: linear-gradient(150deg, var(--brown), var(--brown-deep));
  color: var(--sand-tint);
}
.section.dark .section-tag {
  color: var(--rust-on-dark);
  background: rgba(255, 255, 255, .05);
  border-color: rgba(209, 198, 181, .28);
}
.section.dark .section-header h2 { color: #fff; }
.section-header-sub {
  margin-block: clamp(38px, 4vw, 54px) clamp(18px, 2vw, 26px);
  text-align: center;
}
.section-header-sub h3 {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700;
  color: #fff;
}
.section-header-sub h3::before,
.section-header-sub h3::after {
  content: ""; width: clamp(24px, 5vw, 64px); height: 1px;
  background: linear-gradient(to left, transparent, var(--rust-mid));
}
.section-header-sub h3::after { background: linear-gradient(to right, transparent, var(--rust-mid)); }

.speakers-grid {
  --sp-gap: clamp(16px, 1.6vw, 22px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-gap);
}
.speaker-card { flex: 0 0 calc((100% - var(--sp-gap) * 3) / 4); }

/* The card is one button — the whole photo is the hit target. */
.speaker-toggle {
  display: block; width: 100%;
  padding: 10px 10px 4px;
  text-align: center; color: inherit;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(209, 198, 181, .18);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.speaker-toggle:hover,
.speaker-toggle:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .07);
  border-color: var(--rust-mid);
}
.speaker-toggle:focus-visible { outline: 3px solid var(--rust-mid); outline-offset: 3px; }
.speaker-toggle[disabled] { cursor: default; transform: none; }

/* The mat: photo, hairline frame and role panel all clip to one radius. */
.speaker-frame {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius-lg) - 10px);
  overflow: hidden;
  background: linear-gradient(140deg, var(--brown-light), var(--brown-mid));
}
.speaker-frame::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(209, 198, 181, .22);
  border-radius: inherit;
  pointer-events: none;
}
.speaker-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--dur) var(--ease);
}
.speaker-toggle:hover .speaker-photo { transform: scale(1.04); }
.speaker-photo-empty {
  display: grid; place-items: center;
  color: var(--rust-on-dark); font-size: 3.4rem; font-weight: 800;
}

/* The role rides in over the photo when the card is opened. */
.speaker-role {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: block; padding: 34px 14px 16px;
  font-size: .82rem; font-weight: 500; line-height: 1.6;
  color: var(--sand-tint);
  background: linear-gradient(to top, rgba(15, 11, 4, .97), rgba(15, 11, 4, .84) 60%, rgba(15, 11, 4, 0));
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.speaker-toggle[aria-expanded="true"] .speaker-role { transform: none; }

.speaker-foot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 4px 10px;
}
.speaker-name { font-size: .95rem; font-weight: 700; color: #fff; }
.speaker-cue {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 500;
  color: var(--rust-on-dark);
}
.speaker-cue .ico { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.speaker-toggle[aria-expanded="true"] .speaker-cue .ico { transform: rotate(180deg); }

@media (max-width: 900px) {
  .speaker-card { flex-basis: calc((100% - var(--sp-gap)) / 2); }
}
@media (max-width: 520px) {
  .speaker-card { flex-basis: 100%; }
  .speaker-cue-text { display: none; }
}

/* ===== Indicators ===== */
.indicators { background: linear-gradient(150deg, var(--brown), var(--brown-deep)); color: #fff; }
.indicators .section-header h2 { color: #fff; }
.indicators .section-tag { color: var(--mint-light); background: rgba(255,255,255,.1); }

.indicators-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.indicator {
  padding: 30px 18px; text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.indicator:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); }
.indicator dd { display: flex; flex-direction: column; gap: 8px; }
.indicator strong {
  font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800;
  color: var(--mint-light); line-height: 1;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.indicator span { font-size: .88rem; color: rgba(255,255,255,.78); }

/* ===== Venue ===== */
.venue-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.venue-card { text-align: center; }
.venue-card .ico-lg { margin-inline: auto; margin-block-end: 16px; }
.venue-card h3 { font-size: 1.05rem; margin-block-end: 10px; }
.venue-card p { font-size: .95rem; }

/* ===== Partners ===== */
.partners-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.partner-item {
  display: grid; place-items: center;
  min-height: 96px; padding: 20px 18px;
  text-align: center; text-wrap: balance;
  font-size: .92rem; font-weight: 500; color: var(--text-body);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.partner-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-md);
  color: var(--brown); border-color: var(--sand);
}

/* ===== FAQ ===== */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--sand); box-shadow: var(--shadow-sm); }
.faq-item h3 { font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 24px;
  text-align: start;
  font-size: 1rem; font-weight: 700; color: var(--text);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--rust); background: var(--sand-tint); }
.faq-chev {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.faq-q[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
.faq-a { padding-inline: 24px; padding-block-end: 22px; }
.faq-a p { font-size: .95rem; color: var(--text-muted); }
.faq-a.is-animating { overflow: hidden; }

/* ===== Register ===== */
.register { background: var(--bg); }
.register-box {
  padding: clamp(32px, 5vw, 52px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.register-head { text-align: center; margin-block-end: 34px; }
.register-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block: 14px 12px; }
.register-head p { color: var(--text-muted); font-size: .96rem; }

.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-block-end: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: .9rem; font-weight: 700; color: var(--text); }
.req { color: #c0392b; }

/* Every text-like control inside a .field shares one look. This used to list
   text/email/tel individually, which meant any other type — password, number,
   date, time — silently rendered unstyled next to its neighbours. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.field textarea {
  padding: 13px 16px;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: #9aa9a2; }
.field input:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--rust-light);
  box-shadow: 0 0 0 4px rgba(156, 77, 21, .18);
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c0392b; background: #fdf3f2; }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, .14); }

.hint { font-size: .8rem; color: var(--text-muted); }
.err { font-size: .82rem; font-weight: 500; color: #c0392b; }
.field.is-invalid .err { animation: shake .34s var(--ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* honeypot */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-section { border: 0; margin-block: 28px; }
.form-section-title { font-size: 1.05rem; font-weight: 700; color: var(--brown); margin-block-end: 6px; }
.form-section-note { font-size: .88rem; color: var(--text-muted); margin-block-end: 18px; }

/* Intro above the session/workshop pickers: the "you may choose all of them"
   note and the select-all shortcut sit together, and the two pickers below
   read as one group rather than two unrelated blocks. */
.picks-head { margin-block-end: 10px; }
.picks-head .form-section-note { margin-block-end: 12px; }
.picks-head + .form-section { margin-block-start: 0; }

.checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-block-end: 18px; }
.checkbox-group.workshops {
  padding: 18px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.checkbox-group-title {
  display: flex; align-items: center; gap: 10px;
  font-size: .93rem; font-weight: 700; color: var(--text); margin-block-end: 10px;
}

.checkbox-label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.checkbox-label:hover { background: var(--sand-tint); transform: translateX(-3px); }
.checkbox-label input[type="checkbox"] {
  width: 1.2rem; height: 1.2rem; flex: none;
  margin-block-start: .35rem;
  accent-color: var(--rust);
  cursor: pointer;
}
.checkbox-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.checkbox-text strong { font-size: .94rem; font-weight: 700; color: var(--text); }
.checkbox-text small { font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.checkbox-text a { color: var(--rust); font-weight: 700; border-block-end: 1px solid currentColor; }

.consent { margin-block: 8px 24px; }
.consent .checkbox-label { padding-inline: 0; }
.consent.is-invalid .checkbox-label { background: #fdf3f2; padding-inline: 14px; }

#submitBtn { position: relative; }
#submitBtn[data-busy="true"] { pointer-events: none; opacity: .8; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { margin-block-start: 16px; text-align: center; font-size: .92rem; font-weight: 500; }
.form-status.is-ok { color: var(--rust); }
.form-status.is-err { color: #c0392b; }
.form-status:not(:empty) { animation: fadeUp .4s var(--ease-out); }

.form-note { margin-block-start: 18px; text-align: center; font-size: .84rem; color: var(--text-muted); }
.form-note a { color: var(--rust); font-weight: 700; border-block-end: 1px solid currentColor; }

.form-success {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 44px 24px; text-align: center;
  animation: fadeUp .5s var(--ease-out);
}
.form-success .check {
  display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--sand); color: var(--rust);
}
.form-success .check .ico { width: 34px; height: 34px; stroke-width: 2.4; }
.form-success h3 { font-size: 1.25rem; }
.form-success p { color: var(--text-muted); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Footer ===== */
.footer { padding-block: 64px 28px; background: var(--brown-deep); color: rgba(255,255,255,.72); }
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding-block-end: 40px;
  border-block-end: 1px solid rgba(255,255,255,.1);
}
.footer .logo-text strong { color: #fff; }
.footer .logo-text small { color: rgba(255,255,255,.6); }
.footer-slogan { margin-block-start: 16px; color: var(--mint-light); font-size: .95rem; }
.footer h2 { font-size: .98rem; color: #fff; margin-block-end: 16px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-links a {
  font-size: .92rem;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--mint-light); transform: translateX(-4px); }
.footer-info p { font-size: .92rem; margin-block-end: 6px; }
.footer-info a { color: var(--mint-light); border-block-end: 1px solid currentColor; }
/* The two legal links share a line, with room to wrap on a narrow screen. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.footer-legal span { color: rgba(255,255,255,.4); }
.footer-bottom { padding-block-start: 24px; text-align: center; font-size: .85rem; color: rgba(255,255,255,.5); }

/* =========================================================
   MCCI chamber logo — official assets from mcci.org.sa
   Two files, because the mark is two-tone and must stay that way:
     mcci-logo.png        colour  → light surfaces
     mcci-logo-white.svg  white   → dark surfaces
   Swapped by CSS, never recoloured with filters.
   ========================================================= */
.mcci-logo { width: auto; }
.mcci-logo--on-light { display: none; }

/* On the condensed white header the colour mark takes over. */
.header.is-stuck .mcci-logo--on-dark { display: none; }
.header.is-stuck .mcci-logo--on-light { display: block; }

/* Footer */
.footer-brand .logo { display: inline-block; }
.footer-brand .mcci-logo { height: 52px; }
.footer-org {
  margin-block-start: 20px;
  font-size: .95rem; font-weight: 700; color: #fff;
}

/* ===== Scroll top ===== */
.scroll-top {
  position: fixed;
  inset-block-end: max(24px, env(safe-area-inset-bottom));
  inset-inline-start: max(24px, env(safe-area-inset-left));
  z-index: 80;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--rust); color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background-color var(--dur) var(--ease);
}
.scroll-top.is-on { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-top:hover { background: var(--brown); transform: translateY(-3px) scale(1.06); }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in { will-change: auto; }

/* No-JS: never leave content hidden */
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
/* The sessions and workshops links pushed the header over its budget between
   the drawer breakpoint and ~1250px, which shoved the language switch off
   screen. Buy the width back from padding before dropping anything. */
@media (max-width: 1250px) {
  .header-inner { gap: 10px; }
  .nav { gap: 2px; }
  .nav-link { padding: 8px 6px; font-size: .82rem; }
}

@media (max-width: 1080px) {
  .nav-link { padding: 7px 4px; font-size: .8rem; }
  .logo-text small { display: none; }
}

/* The drawer takes over at 1120, not 1050. Between those two widths the full
   nav, both account buttons and the language switch did not fit on one row:
   the switch was pushed past the edge and clipped. Measured on the live site
   — 1121px is the narrowest width where the row still fits whole. */
@media (max-width: 1120px) {
  :root { --header-h: 68px; }

  .menu-toggle { display: flex; }
  .btn-register { display: none; }

  .nav {
    position: fixed;
    inset-block-start: 0; inset-inline-end: 0;
    z-index: 95;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px;
    width: min(320px, 84vw); height: 100dvh;
    padding: calc(var(--header-h) + 24px) 24px 24px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    /* visibility keeps the closed drawer out of the tab order —
       a translated-offscreen drawer is still focusable. */
    visibility: hidden;
    /* Anchored to the inline-end edge (left in RTL, right in LTR) so it sits
       beside the burger. The transform must follow that edge, hence the
       [dir] pair — a single translateX would slide in from the wrong side. */
    transform: translateX(-100%);
    transition: transform .38s var(--ease-out), visibility .38s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { visibility: visible; transform: translateX(0); }
  /* In the drawer the group expands inline instead of floating. */
  .nav-group { width: 100%; }
  .nav-toggle { width: 100%; justify-content: space-between; }
  .nav-menu {
    position: static;
    min-width: 0; padding: 2px 14px 8px;
    background: transparent; border: 0; box-shadow: none;
    opacity: 1; transform: none; transition: none;
  }
  .nav-sublink {
    padding: 11px 14px;
    border-inline-start: 2px solid var(--border);
    border-radius: 0;
  }
  .nav-sublink:hover, .nav-sublink.is-active { border-inline-start-color: var(--rust); }

  .nav-link { padding: 13px 14px; font-size: .98rem; color: var(--text-body); border-radius: var(--radius-sm); }
  .nav-link:hover, .nav-link.is-active { color: var(--brown); background: var(--sand-tint); }
  .nav-link::after { inset-inline: auto; inset-inline-end: 14px; width: 22px; }

  .about-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .countdown { gap: 5px; }
  .cd-sep { display: none; }
  .hero-actions { flex-direction: column; width: min(340px, 100%); margin-inline: auto; }
  .hero-actions .btn { width: 100%; }
  /* The chamber mark IS the logo — on phones it stands alone rather than
     competing with the forum name for a 350px row. The name is the very
     next thing on screen, in the <h1>. */
  .logo .mcci-logo { height: 34px; }
  .logo-rule, .logo-text { display: none; }

  .form-row { grid-template-columns: 1fr; }

  .timeline-item { grid-template-columns: 1fr; gap: 10px; padding-inline-start: 30px; }
  .timeline::before { inset-inline-start: 7px; }
  .timeline-item::before { inset-inline-start: 0; inset-block-start: 6px; }
  .timeline-item:hover .timeline-content { transform: none; }

  .partners-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Short viewports — keep the hero to one screen
   Fluid sizing handles most of it; below these heights something has to
   go, so the least load-bearing lines are dropped in order. The date,
   title, countdown and CTAs always survive.
   ========================================================= */
@media (max-height: 780px) {
  .hero-sub { display: none; }
}
@media (max-height: 640px) {
  .hero-slogan { display: none; }
  .hero-scroll { display: none; }
}
@media (max-height: 540px) {
  .hero { min-height: 0; }
  .hero-badge { margin-block-end: 8px; }
  .cd-sep { display: none; }
}
/* Landscape phones. Stacking six blocks vertically cannot fit ~300px of
   height, but there is width to spare — so the hero becomes two columns:
   date + title on the reading side, countdown + CTAs beside it. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: calc(var(--header-h) + 6px) 14px; }
  .hero-content {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px clamp(18px, 4vw, 44px);
    text-align: start;
  }
  .hero-badge   { grid-column: 1; grid-row: 1; margin-block-end: 4px; }
  .hero-title   { grid-column: 1; grid-row: 2; margin-block-end: 0; font-size: clamp(1.3rem, 4.4vw, 2.1rem); }
  .countdown    { grid-column: 2; grid-row: 1; margin-block: 0 8px; justify-content: flex-start; }
  .hero-actions { grid-column: 2; grid-row: 2; justify-content: flex-start; flex-direction: row; width: auto; }
  .hero-actions .btn { width: auto; }
  .hero-scroll  { display: none; }
}

/* Absolute floor: below this, nothing legible fits — allow scrolling. */
@media (max-height: 300px) {
  .hero { height: auto; max-height: none; padding-block: calc(var(--header-h) + 16px) 32px; }
}

/* =========================================================
   Reduced motion — disable all decorative motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-grid, .orb, .hero-badge .dot, .hero-scroll span { animation: none; }
  .orb { opacity: .28; }
  .timeline::before { transform: scaleY(1); }
  .card:hover, .partner-item:hover, .indicator:hover,
  .speaker-toggle:hover, .speaker-toggle:focus-visible, .about-facts li:hover,
  .timeline-item:hover .timeline-content, .checkbox-label:hover { transform: none; }
}

/* ===== Print ===== */
@media print {
  .header, .nav, .scroll-top, .scroll-progress, .hero-scroll,
  .register, .menu-toggle { display: none !important; }
  .hero { min-height: auto; color: #000; background: none; }
  .hero-title, .hero-title .grad { color: #000; -webkit-text-fill-color: #000; }
  .reveal { opacity: 1; transform: none; }
  body { color: #000; }
}

/* =========================================================
   Sub-pages (register / login / dashboard)
   ========================================================= */
body.subpage { background: var(--bg-alt); }
.page { padding-block: calc(var(--header-h) + 40px) 80px; }

.crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-block-end: 24px;
  font-size: .86rem; color: var(--text-muted);
}
.crumbs a { color: var(--rust); font-weight: 700; }
.crumbs a:hover { border-block-end: 1px solid currentColor; }

.page-head { text-align: center; max-width: 720px; margin-inline: auto; margin-block-end: 44px; }
.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-block: 14px 12px; }
.page-head p { color: var(--text-muted); }

/* =========================================================
   Attendee area (/My)

   The registration IS a pass to an event, so it is drawn as one: the dark
   ground, rosette texture and rust glow of the hero, a perforated stub with
   the details, and notches punched out of the page colour. The metaphor is
   not decoration — it tells the visitor at a glance that this page holds
   something of theirs.
   ========================================================= */
.pass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-end: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, var(--brown) 0%, var(--brown-deep) 58%, #140f07 100%);
  /* The inset hairline is what gives the card an edge instead of a flat fill. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
              0 10px 26px rgba(29, 22, 10, .16),
              0 30px 70px rgba(29, 22, 10, .22);
}

/* The identity's eight-fold rosette, as texture — the same treatment and
   opacity the home hero uses, so the two read as one family. */
.pass::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/ornament.svg");
  /* Small tile, low opacity: at 170px the rosette read as brown blotches
     rather than texture. Faded from the outer corner so it never sits behind
     the name. */
  background-size: 108px 108px;
  opacity: .045;
  mask-image: radial-gradient(ellipse 70% 120% at 100% 0%, #000 5%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 100% 0%, #000 5%, transparent 68%);
  pointer-events: none;
}
/* One soft glow, in the accent of the current status (set per state below). */
.pass::after {
  content: ""; position: absolute;
  width: 460px; height: 460px; border-radius: 50%;
  inset-block-start: -230px; inset-inline-start: -120px;
  background: var(--rust-light);
  filter: blur(120px);
  opacity: .22;
  pointer-events: none;
}

.pass-main { position: relative; z-index: 1; padding: clamp(28px, 4vw, 46px); }

.pass-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--sand);
  text-transform: uppercase;
}
/* One petal from the rosette, used as a mark. */
.pass-kicker::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--rust-mid);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.pass-name {
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.35;
  margin-block: 14px 0;
  color: #fff;
  text-wrap: balance;
}
.pass-line {
  margin-block-start: 12px;
  max-width: 48ch;
  color: var(--sand);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.85;
}

.pass-state {
  display: inline-flex; align-items: center; gap: 9px;
  margin-block-start: 22px;
  padding: 8px 18px;
  font-size: .82rem; font-weight: 800;
  border-radius: 50px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.pass-state .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

/* Per-state accents: the glow, the chip and the dot move together. */
.pass--confirmed::after { background: #57b184; opacity: .20; }
.pass--confirmed .pass-state { color: #b9e7cd; border-color: rgba(185, 231, 205, .35); }
.pass--pending::after   { background: var(--rust-light); }
.pass--pending .pass-state { color: var(--rust-on-dark); border-color: rgba(224, 160, 114, .35); }
.pass--cancelled::after { background: #c76b6b; opacity: .18; }
.pass--cancelled .pass-state { color: #eaa9a9; border-color: rgba(234, 169, 169, .35); }
.pass--attended::after  { background: var(--sand); opacity: .16; }
.pass--attended .pass-state { color: var(--sand); border-color: rgba(209, 198, 181, .35); }

/* The stub, separated by a perforation with punched notches. */
.pass-stub {
  position: relative; z-index: 1;
  display: grid; gap: 20px; align-content: center;
  min-width: 210px;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
  border-inline-start: 2px dashed rgba(255, 255, 255, .22);
}
.pass-stub::before,
.pass-stub::after {
  content: ""; position: absolute;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-alt);
  inset-inline-start: -14px;
}
.pass-stub::before { inset-block-start: -14px; }
.pass-stub::after  { inset-block-end: -14px; }

.pass-fact dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(247, 243, 236, .58);
  margin-block-end: 6px;
}
.pass-fact dd {
  /* No direction override here — the label and its value must start from the
     same edge. The value carries its own isolation instead. */
  margin: 0; color: #fff;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}

/* The numbers are the point of the stub, so they get their own voice: Latin
   digits, isolated so they keep their order inside an Arabic column, tabular
   so the three rows line up on the same vertical rhythm. */
.pass-num {
  display: inline-block;
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining;
  font-weight: 800;
  line-height: 1.2;
}
.pass-ref {
  font-size: 1.08rem;
  letter-spacing: .09em;
  color: var(--rust-on-dark);
}
/* A count is a quantity, not a label — it reads as one number, large. */
.pass-count { font-size: 1.7rem; letter-spacing: .01em; }
.pass-date {
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--sand-tint);
}
.pass-wait {
  font-size: .68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 50px;
  background: rgba(255, 255, 255, .1); color: var(--sand);
}

.my-main { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.my-card {
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(55, 42, 20, .04), 0 12px 30px rgba(55, 42, 20, .05);
}
/* Section titles carry the same petal as the pass, instead of a plain bar. */
.my-card > h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.12rem; margin-block: 0 6px;
}
.my-card > h2::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.my-card .muted { margin-block: 0 20px; font-size: .93rem; }

/* The schedule runs down a spine, the way a programme does. */
.my-schedule { position: relative; display: grid; padding-inline-start: 30px; }
.my-schedule::before {
  content: ""; position: absolute;
  inset-block: 18px 22px; inset-inline-start: 5px;
  width: 2px;
  background: linear-gradient(var(--sand), var(--sand-tint));
}
.my-schedule li { position: relative; padding-block: 16px; }
.my-schedule li + li { border-block-start: 1px solid var(--border); }
.my-schedule li::before {
  content: ""; position: absolute;
  inset-inline-start: -30px; inset-block-start: 24px;
  width: 12px; height: 12px;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.my-schedule li.is-waitlisted::before { background: var(--sand-strong, var(--border-strong)); }

/* inline-block, not block: direction: ltr on a full-width block also moves
   the text to the left edge, which threw the time to the wrong side of an
   Arabic column. As an inline box it keeps its digits in Latin order while
   the box itself still sits on the reading edge. */
.my-time {
  display: inline-block;
  direction: ltr; unicode-bidi: isolate;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
  margin-block-end: 6px;
}
.my-item { display: grid; gap: 5px; }
.my-item strong { font-size: 1.02rem; line-height: 1.6; }
.my-meta { font-size: .82rem; color: var(--text-muted); }
.my-schedule li.is-waitlisted .my-time { color: var(--text-muted); }
.my-schedule .pill { justify-self: start; margin-block-start: 2px; }

.picks-head { display: flex; justify-content: flex-end; margin-block-end: 12px; }

/* A destructive action must not look like the save button beside it. */
.my-danger {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bg);
  border: 1px solid #edcaca;
  border-radius: var(--radius-lg);
}
.my-danger h2 { font-size: 1rem; margin: 0 0 6px; color: #9a3b3b; }
.my-danger p { margin: 0; font-size: .9rem; color: var(--text-muted); max-width: 56ch; }
.btn-danger {
  background: #9a3b3b; color: #fff;
  box-shadow: 0 4px 14px rgba(154, 59, 59, .24);
}
.btn-danger:hover { background: #7d2f2f; transform: translateY(-2px); }

.my-empty {
  max-width: 560px; margin-inline: auto; text-align: center;
  padding: clamp(34px, 6vw, 60px) clamp(22px, 4vw, 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.my-empty h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-block-end: 12px; }
.my-empty p { color: var(--text-muted); margin-block-end: 22px; }

/* Flash messages: status and error read differently at a glance. */
.flash {
  padding: 14px 18px;
  margin-block-end: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--sand);
  font-weight: 700; font-size: .94rem;
  background: var(--bg);
}
.flash-ok  { border-inline-start-color: #2f6b46; color: #2f6b46; background: #f4faf6; }
.flash-err { border-inline-start-color: #9a3b3b; color: #9a3b3b; background: #fdf5f5; }

/* The attendee's own record: a row per fact, each led by its icon, divided so
   the values sit on something instead of floating. */
.id-list { display: grid; gap: 2px; margin-block-start: 4px; }
.id-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding-block: 13px;
}
.id-row + .id-row { border-block-start: 1px solid var(--sand); }
.id-row > .ico {
  width: 17px; height: 17px; flex: none;
  color: var(--rust);
  margin-block-start: .18em;
}
.id-row dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted);
  margin-block-end: 2px;
}
.id-row dd { margin: 0; }
.id-value {
  font-size: .95rem; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;   /* a long address must wrap, not widen the card */
}
/* The Arabic faces carry no Latin, so an email would fall back to a serif and
   read as a different voice from everything around it. */
.id-value.ltr { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; letter-spacing: -.01em; }

.id-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: 16px;
  font-size: .85rem; font-weight: 700;
  color: var(--rust);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.id-link .ico { width: 14px; height: 14px; }
.id-link:hover { border-block-end-color: currentColor; gap: 10px; }

.aside-foot { margin-block-start: 14px; font-size: .85rem; }
.aside-card .btn-full { margin-block-start: 16px; }

/* ---------------------------------------------------------------------------
   Add to calendar
   A <details> so the menu opens with no JavaScript at all; site.js only adds
   the conveniences (close on Escape, close when you click elsewhere).
   --------------------------------------------------------------------------- */
.cal { position: relative; display: inline-block; }
.cal--full { display: block; margin-block-start: 16px; }

.cal-trigger { cursor: pointer; list-style: none; gap: 9px; }
.cal-trigger::-webkit-details-marker { display: none; }   /* Safari's own arrow */
.cal-trigger .ico { width: 17px; height: 17px; flex: none; }
.cal-caret { transition: transform var(--dur) var(--ease); opacity: .6; }
.cal[open] .cal-caret { transform: rotate(180deg); }
.cal--compact .cal-trigger .ico:first-child { width: 15px; height: 15px; }

.cal-menu {
  position: absolute; z-index: 40;
  inset-inline-start: 0; inset-block-start: calc(100% + 8px);
  min-width: 268px; max-width: min(320px, calc(100vw - 32px));
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(55, 42, 20, .38), 0 2px 8px -4px rgba(55, 42, 20, .2);
  animation: cal-in .18s var(--ease-out) both;
}
.cal--full .cal-menu { inset-inline: 0; min-width: 0; max-width: none; }

@keyframes cal-in { from { opacity: 0; transform: translateY(-6px); } }

.cal-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 10px;
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.cal-item:hover, .cal-item:focus-visible { background: var(--sand-tint); }
.cal-item .ico { width: 19px; height: 19px; color: var(--rust); }
.cal-item strong { display: block; font-size: .9rem; font-weight: 700; line-height: 1.35; }
.cal-item small { display: block; font-size: .76rem; color: var(--text-muted); line-height: 1.4; }

/* The attendee's own schedule is the whole point of the menu on /My, so it
   carries the weight the others don't. */
.cal-item--lead { background: var(--sand-tint); }
.cal-item--lead:hover { background: var(--sand); }
.cal-item--lead strong { color: var(--brown); }

.cal-split {
  margin: 8px 11px 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  /* A dropdown pinned to a button falls off a narrow screen; on a phone the
     menu is the page's own full-width block instead. */
  .cal-menu {
    position: fixed; inset: auto 12px 12px; inset-block-start: auto;
    min-width: 0; max-width: none;
    padding: 8px;
    animation-name: cal-up;
  }
  @keyframes cal-up { from { opacity: 0; transform: translateY(14px); } }
  .cal-item { padding: 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-menu { animation: none; }
  .cal-caret { transition: none; }
}
/* Times inside a mostly-Arabic label need their own isolation. */
.ltr-meta { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 780px) {
  /* The stub moves under the pass, and the perforation with it — the notches
     have to follow, or they punch holes in the middle of nothing. */
  .pass { grid-template-columns: 1fr; }
  .pass-stub {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-content: start;
    border-inline-start: 0;
    border-block-start: 2px dashed rgba(255, 255, 255, .22);
  }
  .pass-stub::before, .pass-stub::after {
    inset-block-start: -14px; inset-block-end: auto;
    inset-inline-start: auto;
  }
  .pass-stub::before { inset-inline-start: -14px; }
  .pass-stub::after  { inset-inline-end: -14px; }

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

/* ===== Session / workshop listings =====
   The title is the only link; it stretches over the card so the whole card
   is clickable without nesting interactive elements inside one another. */
.list-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.list-card { display: flex; flex-direction: column; gap: 10px; }
.list-card h3 { margin-block-end: 0; }
.card-link { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { color: var(--rust); }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--rust-light); outline-offset: 3px; }
.card-link:focus-visible { outline: none; }

.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--text-muted);
}
.card-seats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .84rem; color: var(--text-muted); }
.pill-full { color: var(--brown); background: var(--sand); border-color: var(--border-strong); }
.card-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: auto; padding-block-start: 6px;
  font-size: .86rem; font-weight: 700; color: var(--rust);
}
.card-more .ico { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.card:hover .card-more .ico { transform: translateX(-3px); }   /* forward, RTL */
html[dir="ltr"] .card:hover .card-more .ico { transform: translateX(3px); }
.empty-note { text-align: center; color: var(--text-muted); }

/* Separator inside the nav, before the account links */
.nav-sep {
  width: 1px; height: 20px; flex: none;
  margin-inline: 6px;
  background: rgba(255, 255, 255, .24);
}
.header.is-stuck .nav-sep { background: var(--border-strong); }

/* ===== Register page ===== */
.register-layout {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
.register-layout .register-box {
  padding: clamp(26px, 4vw, 42px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* The form is three stacked cards inside one <form>: who you are, what you are
   attending, and the consent that submits it. Separating them means each card
   asks one thing instead of one long scroll of mixed questions. */
.register-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.box-head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-block-end: 18px; margin-block-end: 24px;
  border-block-end: 1px solid var(--border);
}
.box-head > div { flex: 1 1 200px; min-width: 0; }
.box-head h2 { font-size: 1.12rem; margin: 0; color: var(--brown); }
.box-head p { margin: 5px 0 0; font-size: .86rem; line-height: 1.65; color: var(--text-muted); }
.box-head .btn { flex: none; align-self: center; }
.box-head + .form-section { margin-block-start: 0; }

.box-step {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: .88rem;
  color: #fff; background: var(--rust);
}

.box-foot-note { margin-block-start: 6px; font-size: .86rem; color: var(--text-muted); }
.box-foot-note a { color: var(--rust); font-weight: 700; border-block-end: 1px solid currentColor; }

.register-box--submit { display: flex; flex-direction: column; gap: 20px; }
.register-aside {
  display: grid; gap: 18px;
  position: sticky; inset-block-start: calc(var(--header-h) + 24px);
}
.aside-card {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.aside-card h2 { font-size: 1.02rem; margin-block-end: 16px; }
.aside-list { display: grid; gap: 14px; }
.aside-list > div { display: grid; gap: 2px; }
.aside-list dt { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.aside-list dd { font-size: .94rem; color: var(--text-body); }
.free { color: var(--rust); }
.aside-note { background: var(--sand-tint); border-color: var(--sand); }
.aside-note ul { display: grid; gap: 10px; }
.aside-note li {
  position: relative; padding-inline-start: 18px;
  font-size: .89rem; color: var(--text-body);
}
.aside-note li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
}

/* ===== Auth page ===== */
.page-auth { padding-block: calc(var(--header-h) + 56px) 90px; }
.auth-wrap { max-width: 470px; margin-inline: auto; }
.auth-card {
  padding: clamp(26px, 4vw, 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.auth-head { text-align: center; margin-block-end: 24px; }
.auth-head h1 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-block: 14px 10px; }
.auth-head p { font-size: .92rem; color: var(--text-muted); }

.callout-warn {
  display: block;
  padding: 14px 18px; margin-block-end: 24px;
  font-size: .86rem; line-height: 1.7; color: var(--text-body);
  background: var(--sand-tint);
  border: 1px solid var(--sand);
  border-inline-start: 4px solid var(--rust);
  border-radius: var(--radius-sm);
}
.callout-warn strong { display: block; color: var(--rust); margin-block-end: 3px; }

.auth-form { display: grid; gap: 18px; }
.pass-wrap { position: relative; display: flex; }
.pass-wrap input { flex: 1; padding-inline-end: 48px; }
.pass-toggle {
  position: absolute;
  inset-inline-end: 6px; inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pass-toggle:hover { color: var(--rust); background: var(--sand-tint); }
.pass-toggle[aria-pressed="true"] { color: var(--rust); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-remember { padding: 0; }
.auth-remember:hover { background: none; transform: none; }
.auth-forgot { font-size: .86rem; font-weight: 700; color: var(--rust); }
.auth-forgot:hover { border-block-end: 1px solid currentColor; }

.auth-preview {
  margin-block-start: 22px; padding-block-start: 18px;
  border-block-start: 1px solid var(--border);
  text-align: center; font-size: .86rem; color: var(--text-muted);
}
.auth-preview a { color: var(--rust); font-weight: 700; border-block-end: 1px solid currentColor; }
.auth-back { margin-block-start: 22px; text-align: center; font-size: .88rem; }
.auth-back a { color: var(--text-muted); }
.auth-back a:hover { color: var(--rust); }

/* ===== Dashboard ===== */
.page-dash { padding-block: calc(var(--header-h) + 28px) 70px; }

.dash-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; margin-block-end: 30px;
  font-size: .89rem; line-height: 1.7;
  color: var(--text-body);
  background: var(--sand-tint);
  border: 1px solid var(--sand);
  border-inline-start: 4px solid var(--rust);
  border-radius: var(--radius);
}
.dash-banner .ico { color: var(--rust); margin-block-start: 3px; }
.dash-banner strong { color: var(--rust); }

.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-block-end: 34px;
}
.dash-head h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-block-end: 6px; }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-outline {
  border: 1.5px solid var(--border-strong); color: var(--text-body);
  background: var(--bg);
}
.btn-outline:hover { border-color: var(--rust); color: var(--rust); transform: translateY(-2px); }

.dash-section { margin-block-end: 42px; }
.dash-h2 { font-size: 1.12rem; margin-block-end: 14px; }
.dash-note { font-size: .86rem; color: var(--text-muted); margin-block-end: 16px; }

.kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi {
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi dt { font-size: .84rem; font-weight: 700; color: var(--text-muted); margin-block-end: 8px; }
.kpi dd { display: flex; flex-direction: column; gap: 4px; }
.kpi strong {
  font-family: var(--font-head);
  font-size: 2rem; font-weight: 800; color: var(--rust); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: .8rem; color: var(--text-muted); }

.cap-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cap-card {
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cap-card h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 1rem; margin-block-end: 6px;
}
.cap-time { font-family: var(--font); font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.cap-topic { font-size: .86rem; color: var(--text-muted); margin-block-end: 14px; }
.cap-bar {
  display: flex;                /* flex so the fill starts at the inline-start edge (right in RTL) */
  height: 8px; border-radius: 50px; overflow: hidden;
  background: var(--sand-tint); border: 1px solid var(--border);
}
.cap-bar > span {
  display: block; height: 100%;
  background: var(--rust);
  border-radius: 50px;
  transition: width .8s var(--ease-out);
}
.cap-bar > span.is-full { background: var(--brown); }
.cap-meta { margin-block-start: 10px; font-size: .84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-block-end: 16px;
}
.dash-toolbar .dash-h2 { margin-block-end: 0; }
.dash-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-search, .dash-select {
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dash-search { min-width: 240px; }
.dash-search:focus, .dash-select:focus {
  outline: none; border-color: var(--rust);
  box-shadow: 0 0 0 4px rgba(156, 77, 21, .14);
}

.table-wrap {
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The search row shared by every admin list. */
.list-filter {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-block-end: 18px;
}
.list-filter .dash-search { min-width: 220px; flex: 1 1 220px; max-width: 380px; }
.list-filter-count { font-size: .84rem; color: var(--text-muted); }

/* Account sync: each option states its own consequence, so the rows are tall
   and the label is the whole hit area rather than the 14px box. */
.sync-opts { display: grid; gap: 10px; }
.sync-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sync-opt:hover { border-color: var(--sand); background: var(--sand-tint); }
.sync-opt:has(input:checked) { border-color: var(--rust); }
.sync-opt:has(input:disabled) { opacity: .5; cursor: default; }
.sync-opt input { margin-block-start: 3px; accent-color: var(--rust); }
.sync-opt strong { display: block; font-size: .92rem; margin-block-end: 4px; }
.sync-opt small { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

/* Sending mail cannot be undone, so this one is marked before it is ticked,
   not after. */
.sync-opt--warn:has(input:checked) {
  border-color: #9a3b3b;
  background: #fdf5f5;
}
.sync-opt--warn:has(input:checked) strong { color: #9a3b3b; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dash-table th, .dash-table td {
  padding: 13px 16px;
  text-align: start;
  border-block-end: 1px solid var(--border);
}
/* Headers stay on one line; cells wrap, so a long name or organisation
   grows the row instead of forcing the whole table into a scrollbar. */
.dash-table th { white-space: nowrap; }
.dash-table th {
  font-family: var(--font-head);
  font-size: .84rem; font-weight: 700; color: var(--text-muted);
  background: var(--sand-tint);
  position: sticky; inset-block-start: 0; z-index: 1;
}
.dash-table tbody tr { transition: background-color var(--dur) var(--ease); }
.dash-table tbody tr:hover { background: var(--sand-tint); }
.dash-table tbody tr:last-child td { border-block-end: 0; }
.tbl-empty { text-align: center; color: var(--text-muted); padding-block: 34px; }
.dash-count { margin-block-start: 14px; font-size: .86rem; color: var(--text-muted); }

.badge {
  display: inline-block; padding: 3px 12px;
  font-size: .76rem; font-weight: 700; border-radius: 50px;
  white-space: nowrap;
}
.badge-confirmed { color: #2f6b46; background: #e6f2ea; border: 1px solid #c6e2d2; }
.badge-pending { color: var(--rust); background: var(--sand-tint); border: 1px solid var(--sand); }
.badge-cancelled { color: #9a3b3b; background: #f7e9e9; border: 1px solid #eccece; }
.badge-attended { color: var(--navy); background: var(--mint-soft); border: 1px solid var(--mint-light); }

/* ===== Registrations — filter card, KPI links, richer table ===== */
.kpi-link { display: block; text-decoration: none; color: inherit; }
.kpi-link .kpi { cursor: pointer; }
.kpi-link.is-active .kpi {
  border-color: var(--rust);
  background: linear-gradient(180deg, var(--sand-tint), var(--bg) 75%);
  box-shadow: var(--shadow-sm);
}
.kpi-link.is-active .kpi strong { color: var(--rust); }

.filter-card {
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block-end: 22px;
}
.filter-card .dash-h2 { margin-block-end: 16px; }
.filter-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field label {
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
}
.filter-field .dash-search, .filter-field .dash-select {
  width: 100%; min-width: 0;
}
.filter-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-block-start: 4px;
}
.filter-clear { font-size: .86rem; color: var(--text-muted); }
.filter-clear:hover { color: var(--rust); }

.dash-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.dash-table tbody tr:hover { background: var(--sand-tint); }

.reg-who { display: flex; align-items: center; gap: 12px; }
.reg-avatar {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: .9rem;
  color: #fff; background: var(--rust);
}
.reg-name-col { min-width: 0; }
.reg-name-col strong { display: block; white-space: nowrap; }
.reg-name-col span { display: block; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

.session-pills { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.session-pills .pill { background: var(--sand-tint); }
.session-pills .pill.is-workshop { color: var(--navy); background: var(--mint-soft); border-color: var(--mint-light); }
.session-pills .pill.is-waitlist { color: #9a3b3b; background: #f7e9e9; border-color: #eccece; }

.dash-table th[data-sort] { padding: 0; }
.dash-table th[data-sort] a {
  display: block; padding: 13px 16px; color: inherit; text-decoration: none;
}
.dash-table th[data-sort] a:hover { color: var(--rust); }
.dash-table th[data-sort] a.is-active { color: var(--rust); }
.dash-table th[data-sort] a.is-active::after { content: ' ↓'; }

.pagination {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-block-start: 18px;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding-inline: 6px;
  border-radius: var(--radius-sm);
  font-size: .86rem; font-variant-numeric: tabular-nums;
  color: var(--text-body);
  border: 1px solid transparent;
}
.pagination a:hover { border-color: var(--border-strong); }
.pagination a.is-current {
  font-weight: 700; color: #fff; background: var(--rust);
}
.pagination a.is-disabled { color: var(--border-strong); pointer-events: none; }
.pagination .pg-info { margin-inline-start: 8px; font-size: .82rem; color: var(--text-muted); }

.tbl-empty-rich { text-align: center; padding-block: 48px; color: var(--text-muted); }
.tbl-empty-rich strong { display: block; margin-block-end: 6px; font-size: 1rem; color: var(--text-body); }

.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.row-actions form { display: inline-flex; }
.btn-tiny {
  padding: 6px 12px; font-size: .79rem; white-space: nowrap; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); background: var(--bg); color: var(--text-body);
  cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-tiny:hover { border-color: var(--rust); color: var(--rust); transform: translateY(-1px); }
.btn-tiny.is-danger:hover { border-color: #9a3b3b; color: #9a3b3b; }

/* ===== Admin dialogs (Details / Edit / Add) =====
   Native <dialog> — no JS framework needed, and it gets focus-trapping and
   Esc-to-close from the browser for free. */
dialog.admin-dialog {
  /* Wider and shorter: the content lays out in two columns, so the whole
     popup fits on screen instead of turning into a scrolling panel. */
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;                      /* centred in both axes */
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;                  /* the body scrolls, never the box */
}
dialog.admin-dialog::backdrop { background: rgba(29, 22, 10, .58); backdrop-filter: blur(2px); }
dialog.admin-dialog[open] { animation: dlg-in .2s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
dialog.admin-dialog form { display: flex; flex-direction: column; max-height: inherit; }

.dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 24px;
  background: var(--sand-tint);
  border-block-end: 1px solid var(--border);
}
.dlg-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlg-head h2 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.dlg-head p { margin: 2px 0 0; font-size: .82rem; color: var(--text-muted); }
.dlg-head-side { display: flex; align-items: center; gap: 10px; flex: none; }
.dlg-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text-muted); font-size: .95rem; line-height: 1; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dlg-close:hover { color: var(--rust); border-color: var(--rust); }

.dlg-body { padding: 20px 24px; overflow-y: auto; }
.dlg-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px;
  background: var(--bg-alt);
  border-block-start: 1px solid var(--border);
}

/* Two tidy columns of label/value — compact enough that the details popup
   never needs to scroll on a normal screen. */
.detail-grid { display: grid; gap: 14px 22px; grid-template-columns: 1fr 1fr; }
.detail-item dt { font-size: .74rem; font-weight: 700; color: var(--text-muted); margin-block-end: 3px; }
.detail-item dd { font-size: .9rem; margin: 0; }
.detail-full { grid-column: 1 / -1; }
.detail-item dd.muted { color: var(--text-muted); }

.reg-avatar-lg { width: 44px; height: 44px; font-size: 1.05rem; }

.checkbox-grid {
  display: grid; gap: 4px; grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.checkbox-grid label {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  font-size: .84rem; border-radius: var(--radius-sm); cursor: pointer;
}
.checkbox-grid label:hover { background: var(--sand-tint); }

/* Tighter than the public forms: an edit popup has nine fields and has to
   fit a laptop screen without the body turning into a scroll area. */
.admin-dialog .form-row { gap: 14px; margin-block-end: 14px; }
.admin-dialog .field { gap: 5px; }
.admin-dialog .field label { font-size: .82rem; }
.admin-dialog .field > input,
.admin-dialog .field > textarea,
.admin-dialog .field > select { padding: 8px 12px; font-size: .88rem; }
.admin-dialog .hint { font-size: .76rem; margin: 0; }
.admin-dialog .dlg-body > .field { margin-block-end: 14px; }
.admin-dialog .dlg-body > .field:last-child { margin-block-end: 0; }

@media (max-width: 620px) {
  .detail-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .admin-dialog .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .register-layout { grid-template-columns: 1fr; }
  .register-aside { position: static; }
}
@media (max-width: 620px) {
  .dash-search { min-width: 0; width: 100%; }
  .dash-filters { width: 100%; }
  .dash-select { flex: 1; }
}

/* Home-page CTA that replaces the inline form */
.register-cta {
  padding: clamp(32px, 5vw, 52px);
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.register-cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block: 14px 12px; }
.register-cta > p { color: var(--text-muted); max-width: 560px; margin-inline: auto; }
.cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-block-start: 26px;
}

/* Aside link sits on white — mint has no contrast there. */
.aside-card .btn-link { color: var(--rust); }

/* Sub-pages have no dark hero — the header is permanently in its light
   state, in CSS as well as JS, so it is correct before script.js runs
   and correct if JS never runs at all. */
body.subpage .header {
  padding-block: 8px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
body.subpage .logo-text strong { color: var(--text); }
body.subpage .logo-text small { color: var(--text-muted); }
body.subpage .logo-rule,
body.subpage .nav-sep { background: var(--border-strong); }
body.subpage .nav-link { color: var(--text-muted); }
body.subpage .nav-link:hover,
body.subpage .nav-link.is-active { color: var(--rust); }
body.subpage .menu-toggle span { background: var(--text); }
body.subpage .mcci-logo--on-dark { display: none; }
body.subpage .mcci-logo--on-light { display: block; }

/* =========================================================
   LTR (English) overrides
   ---------------------------------------------------------
   Layout is built on logical properties, so almost everything mirrors
   for free. Only two categories cannot: CSS transforms (always
   physical) and transform-origin. Those are corrected here.
   ========================================================= */
[dir="ltr"] body { direction: ltr; line-height: 1.7; }   /* Latin needs less leading than Arabic */

/* Bars and underlines grow from the reading edge */
[dir="ltr"] .scroll-progress > span,
[dir="ltr"] .nav-link::after,
[dir="ltr"] .card::before { transform-origin: left center; }

/* Mobile drawer: inline-end is the right edge in LTR */
@media (max-width: 1120px) {
  [dir="ltr"] .nav { transform: translateX(100%); }
  [dir="ltr"] .nav.is-open { transform: translateX(0); }
}

/* Hover nudges point along the reading direction */
[dir="ltr"] .about-facts li:hover,
[dir="ltr"] .timeline-item:hover .timeline-content { transform: translateX(6px); }
[dir="ltr"] .checkbox-label:hover { transform: translateX(3px); }
[dir="ltr"] .footer-links a:hover { transform: translateX(4px); }

/* Latin numerals read better without the Arabic-Indic tabular tweak */
[dir="ltr"] .cd-num,
[dir="ltr"] .indicator strong { direction: ltr; }

/* =========================================================
   Language switcher
   ========================================================= */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  padding: 6px 12px;
  font-size: .82rem; font-weight: 700;
  color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.lang-switch .ico { width: 15px; height: 15px; }
.lang-switch:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }

.header.is-stuck .lang-switch,
body.subpage .lang-switch {
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.header.is-stuck .lang-switch:hover,
body.subpage .lang-switch:hover {
  color: var(--rust); border-color: var(--rust); background: var(--sand-tint);
}

@media (max-width: 1120px) {
  /* The switch sits in the header, not inside the drawer — it stays a compact
     pill beside the burger so a language change is always one tap away. */
  .lang-switch {
    margin-inline-start: auto;
    padding-block: 9px;
    font-size: .84rem;
    color: var(--text-muted); border-color: var(--border-strong);
  }
}

/* ===== Legal pages (privacy policy + terms) ===== */
  .legal { padding-block: calc(var(--header-h) + 56px) 80px; }
  .legal h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-block-end: 10px; }
  .legal .updated { color: var(--text-muted); font-size: .9rem; margin-block-end: 34px; }
  .legal h2 { font-size: 1.15rem; color: var(--brown); margin-block: 34px 12px; }
  .legal p, .legal li { color: var(--text-body); font-size: .98rem; }
  /* The reset zeroes every margin, so a clause of several paragraphs would
     otherwise run together as one block of text. */
  .legal p { margin-block-end: 12px; }
  .legal ul { display: grid; gap: 9px; padding-inline-start: 4px; margin-block-end: 16px; }
  /* Scoped to ul: an ordered list carries its own number, and the mint dot
     would print on top of it. */
  .legal ul > li { position: relative; padding-inline-start: 20px; }
  .legal ul > li::before {
    content: ""; position: absolute;
    inset-inline-start: 0; inset-block-start: .72em;
    /* --mint is 1.85:1 on white — these bullets were all but invisible.
       The warm accent is the readable one on a light ground. */
    width: 7px; height: 7px; border-radius: 50%; background: var(--rust);
  }
  .legal ol { padding-inline-start: 1.35em; margin-block-end: 16px; }
  .legal ol > li { margin-block-end: 8px; }
  .legal a { color: var(--rust); font-weight: 700; border-block-end: 1px solid currentColor; }
  /* The "in short" box: its lead-in is a heading in all but name, so it gets
     its own line rather than running into the first bullet. */
  .legal .callout strong { display: block; margin-block-end: 9px; color: var(--brown); }
  .legal .callout > *:last-child { margin-block-end: 0; }

  /* Numbered clauses. The number is generated into its own box rather than
     typed into the heading: a leading "1." inside an RTL heading is reordered
     by the bidi algorithm and lands as ".1", and a hand-typed number goes
     stale the moment a clause is inserted above it. */
  .legal-doc { counter-reset: clause; }
  .legal-doc h2 {
    display: flex; align-items: baseline; gap: 10px;
    scroll-margin-block-start: calc(var(--header-h) + 20px);
  }
  .legal-doc h2::before {
    counter-increment: clause; content: counter(clause);
    flex: none; inline-size: 26px; block-size: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--sand-tint); color: var(--rust);
    font-family: var(--font-head); font-size: .78rem; font-weight: 800;
    transform: translateY(3px);
  }

  .legal-toc {
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 26px; margin-block: 30px;
  }
  /* The contents list is a heading, but it is not a clause. */
  .legal-toc h2 { counter-increment: none; margin-block: 0 12px; font-size: 1rem; }
  .legal-toc h2::before { content: none; }
  .legal-toc ol { columns: 2; column-gap: 30px; padding-inline-start: 1.2em; margin-block-end: 0; }
  .legal-toc li { break-inside: avoid; margin-block-end: 7px; font-size: .92rem; }
  .legal-toc a { color: var(--text-body); font-weight: 500; border-block-end: 0; }
  .legal-toc a:hover { color: var(--rust); }

  /* Definitions and rights read as term → meaning, not as prose. */
  .legal dl { display: grid; gap: 14px; margin-block-end: 16px; }
  .legal dt { font-family: var(--font-head); font-weight: 800; color: var(--brown); }
  .legal dd { margin-inline-start: 0; color: var(--text-body); font-size: .98rem; }

  /* The data map — what we hold, why, on what basis, for how long. Four
     columns is wide by nature, so it scrolls inside .table-wrap rather than
     forcing the page sideways. */
  .legal .table-wrap { margin-block: 6px 18px; }
  .legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .legal-table th, .legal-table td {
    padding: 12px 14px; text-align: start; vertical-align: top;
    border-block-end: 1px solid var(--border);
  }
  .legal-table th {
    font-family: var(--font-head); font-size: .84rem; font-weight: 700;
    color: var(--text-muted); background: var(--sand-tint);
  }
  .legal-table td { color: var(--text-body); }
  .legal-table tbody tr:last-child td { border-block-end: 0; }

  @media (max-width: 700px) {
    .legal-toc { padding: 18px 20px; }
    .legal-toc ol { columns: 1; }
    .legal-table { min-width: 640px; }
  }

  /* A legal document gets printed and signed off. Strip the furniture, keep
     the text. The header and nav are already hidden by the print block
     further up; these are the parts that only matter here. */
  @media print {
    .footer, .tabbar, .skip-link, .crumbs, .legal-toc, .section-tag { display: none !important; }
    .legal { padding-block: 0; }
    .legal a { color: inherit; border-block-end: 0; }
    .legal-doc h2 { break-after: avoid; }
    .table-wrap { overflow: visible; border: 0; }
    .legal-table { min-width: 0; }
  }
  .callout {
    padding: 20px 24px; margin-block: 28px;
    background: var(--mint-soft); border-inline-start: 4px solid var(--mint);
    border-radius: var(--radius-sm);
  }
  .back { display: inline-flex; align-items: center; gap: 8px; margin-block-end: 28px; font-weight: 700; color: var(--rust); }
  .back:hover { color: var(--brown); }

/* [hidden] is a UA rule with lower specificity than .nav-menu's display,
   so without this the dropdown stays in flow — visible in the drawer, and
   focusable/announced on desktop even while it looks hidden. */
.nav-menu[hidden] { display: none; }

/* =========================================================
   Account links — التسجيل + تسجيل الدخول
   One registration entry (the duplicate CTA button is gone). The two
   account actions read as a matched pair in the brand rust, clearly
   separate from the content links beside them.
   ========================================================= */
.nav-account {
  padding: 8px 18px;
  border: 1.5px solid var(--rust-mid);
  border-radius: 50px;
  font-weight: 700;
  color: var(--rust-mid);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.nav-account::after { content: none; }          /* no scrollspy underline on these */
.nav-account:hover { background: rgba(156, 77, 21, .16); color: #fff; border-color: var(--rust-mid); transform: translateY(-1px); }

.nav-account--primary {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.nav-account--primary:hover { background: var(--rust-light); border-color: var(--rust-light); color: #fff; }

/* On the light header the same pair sits in full-strength rust. */
.header.is-stuck .nav-account,
body.subpage .nav-account { color: var(--rust); border-color: var(--rust); }
.header.is-stuck .nav-account:hover,
body.subpage .nav-account:hover { background: var(--sand-tint); color: var(--rust); }
.header.is-stuck .nav-account--primary,
body.subpage .nav-account--primary { background: var(--rust); color: #fff; }
.header.is-stuck .nav-account--primary:hover,
body.subpage .nav-account--primary:hover { background: var(--rust-light); border-color: var(--rust-light); color: #fff; }

@media (max-width: 1120px) {
  /* In the drawer they become full-width buttons at the end of the list. */
  .nav-account { width: 100%; text-align: center; margin-block-start: 8px; padding-block: 12px; }
  .nav-account--primary { margin-block-start: 14px; }
}

/* A thin ornamental band, used to separate major sections. */
.ornament-band {
  height: 68px;
  background-image: url("/assets/ornament.svg");
  background-repeat: repeat-x;
  background-size: auto 68px;
  background-position: center;
  opacity: .85;
  /* fade the row out at both ends so it reads as an inset rule, not a strip */
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* =========================================================
   Hero — the chamber building
   ========================================================= */
.hero-photo {
  position: absolute; inset: 0;
  /* styles.css lives at the site root, so this one path is correct for
     both / and /en/ pages — url() resolves against the stylesheet. */
  background-image: url("/assets/chamber-building.webp");
  background-size: cover;
  background-position: center 62%;
  /* The photo is a dusk shot; this keeps it as ground, not subject. */
  opacity: .68;
}

/* Legibility scrim. The hero carries white text over a photograph, so
   this is a contrast requirement, not decoration — do not lighten it
   without re-checking the title and countdown against WCAG AA. */
.hero-scrim {
  position: absolute; inset: 0;
  /* Two layers: a radial well that keeps the centred text block dark, and a
     vertical wash that lets the building and roadway read at the edges. */
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%,
      rgba(29, 22, 10, .84) 0%, rgba(29, 22, 10, .50) 68%, transparent 100%),
    linear-gradient(to bottom,
      rgba(29, 22, 10, .78) 0%,
      rgba(55, 42, 20, .58) 45%,
      rgba(29, 22, 10, .84) 100%);
}

@media (max-width: 720px) {
  .hero-photo { background-position: center 58%; opacity: .5; }
}

/* =========================================================
   Session / workshop detail pages
   ========================================================= */
.split-layout {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

/* The session and workshop pages ask for .session-layout, which had no rule at
   all — so both detail pages fell back to block flow and rendered as one
   full-width column with the details card's labels and values thrown to
   opposite edges of the screen. */
.session-layout {
  display: grid; gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  margin-block-start: clamp(-56px, -4vw, -34px);   /* the cards lift over the hero's lower edge */
  position: relative; z-index: 1;
}

/* ===== Detail hero — session / workshop masthead ===== */
.detail-page { padding-block-start: 0; }
.detail-hero {
  background: linear-gradient(150deg, var(--brown), var(--brown-deep));
  color: var(--sand-tint);
  padding-block: calc(var(--header-h) + clamp(28px, 4vw, 48px)) clamp(76px, 8vw, 104px);
}
.detail-hero h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.5;
  color: #fff;
  /* Session titles run long in Arabic — a tight measure turns one into a
     seven-line column. Wide enough for two or three lines, still short of the
     full container so it never reads as a paragraph. */
  max-width: 34ch;
  margin-block: 14px 0;
  text-wrap: balance;
}
.detail-kicker {
  display: inline-block;
  padding: 6px 16px;
  font-size: .78rem; font-weight: 700;
  color: var(--rust-on-dark);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(209, 198, 181, .3);
  border-radius: 50px;
}
.detail-lead {
  margin-block-start: 16px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.9;
  color: var(--sand);
}

/* Breadcrumb sitting on the dark band rather than the cream page. */
.crumbs-on-dark { color: rgba(247, 243, 236, .62); margin-block-end: 20px; }
.crumbs-on-dark a { color: var(--rust-on-dark); }
.crumbs-on-dark a:hover { color: #fff; border-block-end-color: currentColor; }

/* The facts a visitor needs before reading a word of the description. */
.detail-facts {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin-block-start: 26px;
}
.detail-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  font-size: .86rem; font-weight: 500;
  color: var(--sand-tint);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(209, 198, 181, .2);
  border-radius: 50px;
}
.detail-facts .ico { width: 16px; height: 16px; flex: none; color: var(--rust-on-dark); }

.aside-card--sticky { position: sticky; inset-block-start: calc(var(--header-h) + 20px); }
/* The primary button carries a wide shadow; without this it crowds the last
   detail row above it and washes over the note below. */
.aside-card .btn { margin-block-start: 22px; }
/* Named .cta-note, not .aside-note: that name is already taken at the top of
   this file by the tinted card used on /My. Two same-specificity rules under
   one name applied together — the note here picked up a sand background bar,
   and the "بياناتك" card on /My shrank to .8rem and centred itself. */
.cta-note {
  margin-block-start: 14px;
  font-size: .8rem; color: var(--text-muted); text-align: center;
}

.callout-audience {
  margin-block-start: 28px;
  padding: 20px 22px;
  background: var(--sand-tint);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}
.callout-audience h2 { margin-block: 0 8px; border: 0; padding: 0; font-size: 1rem; }
.callout-audience p { margin: 0; color: var(--text-body); }

.detail-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-block-start: clamp(30px, 4vw, 46px);
}
/* .btn-link defaults to mint, which is for dark grounds — on the cream page
   the warm accent is the readable one. */
.detail-foot .btn-link { color: var(--rust); }

@media (max-width: 900px) {
  .session-layout { grid-template-columns: 1fr; margin-block-start: -28px; }
  .aside-card--sticky { position: static; }
}
.session-body {
  padding: clamp(26px, 4vw, 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.session-body h2 {
  font-size: 1.12rem;
  margin-block: 26px 12px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--rust);
}
.session-body h2:first-child { margin-block-start: 0; }
.session-body p { margin-block-end: 14px; }
.session-body strong { color: var(--text); }

/* Numbered beats of the session. The counter is drawn rather than listed so
   the digits keep the rust accent and align on their own column. */
.session-points {
  display: grid; gap: 2px;
  counter-reset: point;
  margin-block-start: 4px;
}
.session-points li {
  counter-increment: point;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  align-items: start;
  padding: 13px 0;
  color: var(--text-body);
  border-block-end: 1px solid var(--border);
}
.session-points li:last-child { border-block-end: 0; }
.session-points li::before {
  content: counter(point, decimal-leading-zero);
  font-size: .82rem; font-weight: 800;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
  padding-block-start: .18em;
}
.session-points .point-text { line-height: 1.85; }

/* Agenda entries link through to their own page */
.agenda-link {
  color: inherit;
  border-block-end: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agenda-link:hover { color: var(--rust); border-block-end-color: currentColor; }
.timeline-content h3 .agenda-link::after {
  content: "›";
  margin-inline-start: 6px;
  color: var(--rust);
  font-weight: 800;
}

/* =========================================================
   Dashboard shell — sidebar + panel
   The sidebar sits on the inline-start edge: right in Arabic, left in
   English, so it is always on the side the reader starts from.
   ========================================================= */
.dash-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.dash-side {
  position: sticky; inset-block-start: calc(var(--header-h) + 20px);
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dash-side h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-muted);
  padding-inline: 12px;
  margin-block-end: 10px;
}
.dash-nav { display: grid; gap: 2px; }
.dash-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  font-size: .92rem; font-weight: 500;
  color: var(--text-body);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dash-nav a .ico { width: 18px; height: 18px; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.dash-nav a:hover { background: var(--sand-tint); color: var(--rust); }
.dash-nav a:hover .ico { color: var(--rust); }
.dash-nav a.is-active {
  background: var(--sand-tint); color: var(--rust); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--rust);
}
[dir="ltr"] .dash-nav a.is-active { box-shadow: inset -3px 0 0 var(--rust); }
.dash-nav a.is-active .ico { color: var(--rust); }
.dash-nav .count {
  margin-inline-start: auto;
  padding: 1px 9px;
  font-size: .76rem; font-weight: 700;
  color: var(--rust); background: var(--sand-tint);
  border: 1px solid var(--sand); border-radius: 50px;
  font-variant-numeric: tabular-nums;
}
.dash-nav a.is-active .count { background: var(--bg); }

.dash-side-foot {
  margin-block-start: 16px; padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
}

/* Panels — only one visible at a time */
.dash-panel[hidden] { display: none; }

/* Compact list used by the agenda / speakers / partners / sessions panels */
.dash-list { display: grid; gap: 10px; }
.dash-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dash-row:hover { border-color: var(--sand); box-shadow: var(--shadow-sm); }
.dash-row .row-time {
  flex: none; min-width: 78px;
  font-size: .86rem; font-weight: 700; color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.dash-row .row-main { flex: 1; min-width: 0; }
.dash-row .row-main strong { display: block; font-size: .96rem; color: var(--text); }
.dash-row .row-main span { font-size: .85rem; color: var(--text-muted); }
.dash-row .row-go {
  flex: none;
  font-size: .84rem; font-weight: 700; color: var(--rust);
  white-space: nowrap;
}
.dash-row .row-go:hover { border-block-end: 1px solid currentColor; }

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .dash-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; }
  .dash-nav a { white-space: nowrap; }
  .dash-nav a.is-active { box-shadow: inset 0 -3px 0 var(--rust); }
  [dir="ltr"] .dash-nav a.is-active { box-shadow: inset 0 -3px 0 var(--rust); }
  .dash-side h2, .dash-side-foot { display: none; }
}
@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; }
}

/* Sidebar footer link sits on white — mint has no contrast there. */
.dash-side-foot .btn-link { color: var(--rust); }

/* =========================================================
   MOBILE APP SHELL  (≤ 720px)
   ---------------------------------------------------------
   On phones the site stops behaving like a scaled-down desktop page and
   becomes an app: a fixed bottom tab bar for the four things people
   actually came for, quick-action tiles under the hero, and horizontal
   swipe rows instead of tall stacked grids.

   Everything here is additive and gated behind the media query — the
   desktop layout is untouched.
   ========================================================= */

/* The bar is hidden on desktop and only becomes a tab bar on phones. */
.tabbar { display: none; }

@media (max-width: 720px) {
  /* Content must clear the fixed bar, including the home indicator on
     notched devices. The dashboard does not render a tab bar, so reserving
     the space there just left 66px of dead air under every admin screen. */
  body:not(.dash-body) { padding-block-end: calc(66px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed;
    inset-inline: 0; inset-block-end: 0;
    /* Below the drawer (95) and its scrim (90) — it used to sit at 130 and
       stayed lit on top of the dimmed overlay while the drawer slid under it,
       which is the opposite of what the comment below the drawer promises. */
    z-index: 85;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding-block-end: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-block-start: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(55, 42, 20, .07);
  }

  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding-block: 9px 8px;
    font-size: .68rem; font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease);
  }
  .tab .ico { width: 21px; height: 21px; }
  .tab:hover, .tab.is-active { color: var(--rust); }

  /* The registration tab is raised and filled — the one action the whole
     site exists to drive. */
  .tab-cta { position: relative; color: #fff; }
  .tab-cta .ico {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-block-start: -22px;
    background: var(--rust);
    border: 3px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(156, 77, 21, .38);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .tab-cta .ico svg { width: 21px; height: 21px; stroke: #fff; }
  .tab-cta { color: var(--rust); }
  .tab-cta:active .ico { transform: scale(.94); }
  .tab-cta.is-active .ico { background: var(--rust-light); }

  /* The drawer sits above the bar, and the scrim must cover it too. */
  .nav { padding-block-end: calc(90px + env(safe-area-inset-bottom)); }

  /* ---- Quick actions, directly under the hero ---- */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-block-start: -34px;      /* lift the row onto the hero edge */
    position: relative; z-index: 5;
  }
  .quick-action {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: .76rem; font-weight: 700;
    color: var(--text-body);
    text-align: center;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .quick-action .ico {
    width: 34px; height: 34px; padding: 8px;
    color: var(--rust);
    background: var(--sand-tint);
    border-radius: 50%;
  }
  .quick-action:active { transform: scale(.97); border-color: var(--sand); }

  /* ---- Horizontal swipe rows ---- */
  .swipe-hint {
    display: flex; align-items: center; gap: 7px;
    margin-block-end: 12px;
    font-size: .8rem; color: var(--text-muted);
  }
  .swipe-hint .ico { width: 16px; height: 16px; animation: nudge 1.8s var(--ease) infinite; }
  @keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-5px); }
  }

  /* The agenda stops being a vertical timeline and becomes a card reel. */
  .timeline {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding-block-end: 10px;
    margin-inline: calc(clamp(20px, 5vw, 32px) * -1);
    padding-inline: clamp(20px, 5vw, 32px);
  }
  .timeline::before { display: none; }         /* no spine in reel mode */
  .timeline-item {
    flex: 0 0 78%;
    scroll-snap-align: start;
    display: block;
    padding: 0;
  }
  .timeline-item::before { display: none; }
  .timeline-item .time {
    display: inline-block;
    margin-block-end: 8px;
    padding: 4px 12px;
    background: var(--sand-tint);
    border: 1px solid var(--sand);
    border-radius: 50px;
  }
  .timeline-item .timeline-content { height: 100%; }

  /* Partners become a reel too rather than a 7-row grid. */
  .partners-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding-block-end: 10px;
    margin-inline: calc(clamp(20px, 5vw, 32px) * -1);
    padding-inline: clamp(20px, 5vw, 32px);
  }
  .partner-item { flex: 0 0 46%; scroll-snap-align: start; min-height: 84px; }

  /* Outcome cards likewise */
  .outputs .cards-3 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding-block-end: 10px;
    margin-inline: calc(clamp(20px, 5vw, 32px) * -1);
    padding-inline: clamp(20px, 5vw, 32px);
  }
  .outputs .card { flex: 0 0 74%; scroll-snap-align: start; }

  /* Thin, unobtrusive scrollbars on the reels */
  .timeline, .partners-grid, .outputs .cards-3 { scrollbar-width: thin; }
  .timeline::-webkit-scrollbar,
  .partners-grid::-webkit-scrollbar,
  .outputs .cards-3::-webkit-scrollbar { height: 4px; }
  .timeline::-webkit-scrollbar-thumb,
  .partners-grid::-webkit-scrollbar-thumb,
  .outputs .cards-3::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 50px; }

  /* The scroll-to-top button would collide with the tab bar. */
  .scroll-top { display: none; }

  /* Sections tighten up — an app screen, not a brochure page. */
  .section { padding-block: 48px; }
  .ornament-band { height: 46px; background-size: auto 46px; }
}

/* Desktop keeps the vertical timeline and the grids; the hint is phone-only. */
.swipe-hint { display: none; }
@media (max-width: 720px) { .swipe-hint { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .swipe-hint .ico { animation: none; }
}