/* ============================================================
   URUJ — DESIGN SYSTEM v1.1 — "Red on Void"
   Token architecture per URUJ-DESIGN-SYSTEM-v1_1-STRUCTURE.md
   No hardcoded hex/rgb/named colors below :root. No hardcoded
   font-family strings outside the four --font-* declarations.
   ============================================================ */

/* ---------- §1 COLOR TOKENS ---------- */
:root {
  /* Surfaces */
  --color-ground:              #0A0B0D;
  --color-surface-raised:      #141619;
  --color-surface-overlay:     #1B1E23;
  --color-border-hairline:     #232830;
  --color-border-muted:        #3A424E;

  /* Light surface (max 2 sections per page) */
  --color-surface-light:       #EDE8DE;
  --color-surface-light-deep:  #DCD5C7;

  /* Text */
  --color-text-primary-on-dark:    #F5F2EC;
  --color-text-secondary-on-dark:  #A8AEB8;
  --color-text-tertiary-on-dark:   #6E7681;
  --color-text-primary-on-light:   #0A0B0D;
  --color-text-secondary-on-light: #4A4238;

  /* Primary action (things a man can DO) */
  --color-primary-action:        #C1272D;
  --color-primary-action-hover:  #D93B41;
  --color-primary-action-active: #91161B;
  --color-primary-action-glow:   rgba(193,39,45,0.14);

  /* Honour accent (things that have been EARNED) */
  --color-honour-accent:      #C9A227;
  --color-honour-accent-soft: rgba(201,162,39,0.22);

  /* Status utility */
  --color-status-success: #2E9E6B;
  --color-status-warning: #D98324;

  /* ---------- §2 TYPOGRAPHY TOKENS ---------- */
  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-arabic:  'Amiri', serif;
  --font-bengali: 'Noto Sans Bengali', sans-serif;

  --fw-display-heavy:   900;
  --fw-display-bold:    700;
  --fw-body-regular:    400;
  --fw-body-medium:     500;
  --fw-body-semibold:   600;
  --fw-arabic-bold:     700;
  --fw-bengali-regular: 400;
  --fw-bengali-bold:    700;

  --lh-hero:   1.02;
  --lh-h1:     1.06;
  --lh-h2:     1.10;
  --lh-h3:     1.25;
  --lh-body:   1.65;
  --lh-lead:   1.55;
  --lh-tight:  1.20;
  --lh-arabic: 1.30;

  --ls-hero:     -0.030em;
  --ls-h1:       -0.025em;
  --ls-h2:       -0.020em;
  --ls-h3:       -0.010em;
  --ls-body:      0em;
  --ls-overline:  0.160em;
  --ls-button:    0.060em;

  --text-hero:      clamp(2.375rem, 1.84rem + 2.68vw, 4.25rem);
  --text-h1-page:   clamp(2.000rem, 1.64rem + 1.79vw, 3.25rem);
  --text-h2:        clamp(1.6875rem, 1.46rem + 1.16vw, 2.5rem);
  --text-h3-card:   clamp(1.1875rem, 1.13rem + 0.27vw, 1.375rem);
  --text-body:      clamp(1.000rem, 0.98rem + 0.09vw, 1.0625rem);
  --text-lead:      clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
  --text-overline:  0.75rem;
  --text-button:    0.875rem;
  --text-arabic-display: clamp(2.75rem, 2.18rem + 2.86vw, 4.75rem);
  --text-arabic-card:    clamp(1.75rem, 1.64rem + 0.54vw, 2.125rem);

  /* ---------- §3 SPACING / LAYOUT / RADIUS / MOTION / Z ---------- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;

  --container: 1200px;
  --measure: 68ch;
  --section-y-d: 112px;  --section-y-m: 72px;
  --section-x-d: 48px;   --section-x-m: 20px;

  --r-btn:   2px;
  --r-card:  4px;
  --r-img:   2px;
  --r-badge: 999px;

  --border-hair: 1px solid var(--color-border-hairline);
  --border-honour: 1px solid var(--color-honour-accent-soft);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  260ms;
  --rise: 16px;

  --z-base:     0;
  --z-nav:      100;
  --z-dropdown: 200;
  --z-drawer:   300;
  --z-overlay:  400;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text-primary-on-dark);
  font-family: var(--font-body);
  font-weight: var(--fw-body-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
:lang(bn) { --font-display: var(--font-bengali); --font-body: var(--font-bengali); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--color-primary-action); outline-offset: 2px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--section-x-d); }
@media (max-width: 768px) { .container { padding-inline: var(--section-x-m); } }

section, .section { padding-block: var(--section-y-d); }
@media (max-width: 768px) { section, .section { padding-block: var(--section-y-m); } }

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

[lang="ar"], .ar { direction: rtl; }

/* ============================================================
   COMPOSED TYPE STYLES (§2.6)
   ============================================================ */
.h-hero { font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); }
.h-page { font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: var(--text-h1-page); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h-section { font-family: var(--font-display); font-weight: var(--fw-display-bold); font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h-card { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h3-card); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.body-text { font-family: var(--font-body); font-weight: var(--fw-body-regular); font-size: var(--text-body); line-height: var(--lh-body); }
.lead-text { font-family: var(--font-body); font-weight: var(--fw-body-regular); font-size: var(--text-lead); line-height: var(--lh-lead); }
.overline {
  font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-overline);
  line-height: var(--lh-tight); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--color-honour-accent);
}
.btn-label { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-button); line-height: var(--lh-tight); letter-spacing: var(--ls-button); text-transform: uppercase; }
.arabic-display { font-family: var(--font-arabic); font-weight: var(--fw-arabic-bold); font-size: var(--text-arabic-display); line-height: var(--lh-arabic); color: var(--color-honour-accent); direction: rtl; }
.arabic-card { font-family: var(--font-arabic); font-weight: var(--fw-arabic-bold); font-size: var(--text-arabic-card); line-height: var(--lh-arabic); color: var(--color-honour-accent); direction: rtl; }

/* ============================================================
   §5 / §6 COMPONENTS
   ============================================================ */

/* 5.1 .btn-primary */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--color-primary-action); color: var(--color-text-primary-on-dark);
  border-radius: var(--r-btn); padding: 15px 32px; min-height: 48px;
  font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-button);
  letter-spacing: var(--ls-button); text-transform: uppercase; text-align: center;
  transition: background var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--color-primary-action-hover); }
.btn-primary:active { background: var(--color-primary-action-active); }
.btn-primary:focus-visible { outline: 2px solid var(--color-primary-action-glow); outline-offset: 2px; }
.btn-primary[disabled], .btn-primary.is-disabled { opacity: 0.5; background: var(--color-border-muted); pointer-events: none; }
@media (max-width: 480px) { .cta-band .btn-primary, form .btn-primary { width: 100%; } }

/* 5.2 .btn-outline */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: transparent; color: var(--color-text-primary-on-dark);
  border: 1px solid var(--color-border-hairline); border-radius: var(--r-btn);
  padding: 15px 32px; min-height: 48px;
  font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-button);
  letter-spacing: var(--ls-button); text-transform: uppercase; text-align: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--color-primary-action); color: var(--color-primary-action); }

/* 5.3 .card__link */
.card__link { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-text-primary-on-dark); }
.card__link::after { content: '→'; color: var(--color-primary-action); }
.card__link:hover { text-decoration: underline; }

/* 5.4 .nav--dark */
.nav--dark {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--section-x-d); background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--dark--solid { background: var(--color-ground); border-bottom: 1px solid var(--color-border-hairline); }
.uruj-logo { font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: 1.25rem; color: var(--color-text-primary-on-dark); }
.uruj-logo span { color: var(--color-honour-accent); }
.nav__links { display: flex; align-items: center; gap: var(--sp-4); }
.nav__item { position: relative; }
.nav__item > a { font-size: var(--text-button); letter-spacing: var(--ls-button); }
.nav__item--dropdown { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nav__dropdown {
  position: absolute; top: 100%; left: 0; margin-top: var(--sp-2);
  background: var(--color-surface-overlay); border: var(--border-hair); border-radius: var(--r-card);
  padding: var(--sp-2); min-width: 200px; z-index: var(--z-dropdown);
  display: none; flex-direction: column; gap: var(--sp-1);
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown { display: flex; }
.nav__dropdown-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1); border-radius: var(--r-card); }
.nav__dropdown-item:hover { background: var(--color-surface-raised); }
.nav__dropdown-item .arabic-card { font-size: 1.1rem; }
.nav__cta { margin-left: var(--sp-3); }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; width: 32px; height: 32px; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
.nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text-primary-on-dark); }
.nav__drawer {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); height: 100vh;
  background: var(--color-ground); z-index: var(--z-drawer);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  display: flex; flex-direction: column; padding: var(--sp-4); gap: var(--sp-3); overflow-y: auto;
}
.nav__drawer.is-open { transform: translateX(0); }
.nav__drawer-links { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.nav__drawer-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

/* 5.20a .language-switcher (new — §4.4) */
.language-switcher { display: flex; align-items: center; gap: 2px; border: var(--border-hair); border-radius: var(--r-btn); padding: 4px; }
.language-switcher a {
  padding: 6px 10px; font-family: var(--font-body); font-weight: var(--fw-body-semibold);
  font-size: var(--text-button); letter-spacing: var(--ls-button); color: var(--color-text-secondary-on-dark);
  border-radius: 1px; min-height: 32px; display: flex; align-items: center;
}
.language-switcher a[aria-current="true"] { background: var(--color-surface-raised); color: var(--color-text-primary-on-dark); }
.language-switcher a:hover { color: var(--color-text-primary-on-dark); }

/* 5.5 .hero + .hero__grid-bg */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-7) var(--sp-8); background: var(--color-ground); }
.hero__grid-bg { position: absolute; inset: -10%; z-index: var(--z-base); opacity: 0.09; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--section-x-d); text-align: center; }
@media (max-width: 768px) { .hero__inner { padding-inline: var(--section-x-m); } }
.hero__eyebrow { display: block; margin-bottom: var(--sp-2); }
.hero__arabic { display: block; margin-bottom: var(--sp-3); }
.hero__title { margin-bottom: var(--sp-3); }
.hero__sub { max-width: var(--measure); margin: 0 auto var(--sp-4); color: var(--color-text-secondary-on-dark); }
.hero__cta-group { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .hero__cta-group { flex-direction: column; } }

/* page hero (non-homepage) */
.page-hero { padding-block: var(--sp-6) var(--sp-5); text-align: center; background: var(--color-ground); }
.page-hero .practice-badge { margin-bottom: var(--sp-3); }
.page-hero .arabic-display { margin: var(--sp-2) auto; }
.page-hero__sub { max-width: var(--measure); margin: var(--sp-2) auto 0; color: var(--color-text-secondary-on-dark); }

/* 5.6 .hero__eyebrow + __line */
.hero__eyebrow__line { display: inline-block; width: 32px; height: 2px; background: var(--color-primary-action); margin-top: var(--sp-1); }

/* 5.7 .card in .cards--2/.cards--3 */
.cards--2, .cards--3 { display: grid; gap: var(--sp-3); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .cards--2, .cards--3 { grid-template-columns: 1fr; } }
.card {
  background: var(--color-surface-raised); border: var(--border-hair); border-left: 2px solid transparent;
  border-radius: var(--r-card); padding: var(--sp-4); transition: border-color var(--dur) var(--ease);
}
.card:hover { border-left-color: var(--color-primary-action); }
.card--earned { border: var(--border-honour); border-left: var(--border-honour); }
.card--earned:hover { border-left: 2px solid var(--color-honour-accent); }
.card .arabic-card { display: block; margin-bottom: var(--sp-2); }
.card h3 { margin-top: var(--sp-2); }

/* 5.8 .practice-badge */
.practice-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface-raised);
  color: var(--color-honour-accent); border: var(--border-hair); border-radius: var(--r-badge);
  padding: 6px 14px; font-size: var(--text-overline); letter-spacing: var(--ls-overline); text-transform: uppercase;
}

/* 5.9 .philosophy-block */
.philosophy-block { max-width: var(--measure); margin-inline: auto; border-left: 2px solid var(--color-honour-accent); padding-left: var(--sp-3); }
.philosophy-block > p:first-child { font-family: var(--font-body); font-size: var(--text-lead); line-height: var(--lh-lead); }
.philosophy-block p + p { margin-top: var(--sp-2); }

/* 5.10 .card__number */
.card__number { display: block; margin-bottom: var(--sp-1); }

/* 5.11 .outcomes-list / .outcome-item */
.outcomes-list { max-width: var(--measure); margin-inline: auto; }
.outcome-item { border-bottom: var(--border-hair); padding: var(--sp-2) 0 var(--sp-2) var(--sp-2); border-left: 2px solid var(--color-primary-action); }
.outcome-item:last-child { border-bottom: none; }

/* 5.12 .two-col--start */
.two-col--start { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.two-col--start ul li { border-bottom: var(--border-hair); padding-block: var(--sp-1); }
@media (max-width: 768px) { .two-col--start { grid-template-columns: 1fr; } }

/* 5.13 .testimonial-card */
.testimonial-card { position: relative; background: var(--color-surface-raised); border-radius: var(--r-card); padding: var(--sp-4); }
.testimonial-card__mark { display: block; font-family: var(--font-display); font-size: 72px; color: var(--color-primary-action); line-height: 1; }
.testimonial-card__quote { font-size: var(--text-lead); font-style: italic; line-height: var(--lh-lead); }
.testimonial-card__attribution { display: block; margin-top: var(--sp-2); color: var(--color-text-tertiary-on-dark); }

/* 6.7 .freedom-story (dormant) */
.freedom-story__stopped { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h3-card); margin-bottom: var(--sp-2); }

/* 5.14 .pricing-card */
.pricing-card {
  background: var(--color-surface-raised); border: var(--border-hair); border-radius: var(--r-card);
  padding: var(--sp-4); position: relative;
}
.pricing-card--active { border: 2px solid var(--color-primary-action); }
.pricing-card__badge { position: absolute; top: -12px; left: var(--sp-3); }
.pricing-card__price { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h3-card); }
.pricing-card__anchor { color: var(--color-text-tertiary-on-dark); text-decoration: line-through; }

/* 5.15 .badge--urgent */
.badge--urgent {
  display: inline-block; background: var(--color-primary-action); color: var(--color-text-primary-on-dark);
  border-radius: var(--r-badge); padding: 6px 14px; font-size: var(--text-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; animation: badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .badge--urgent { animation: none; } }

/* 5.16 .cta-band */
.cta-band { background: var(--color-primary-action); text-align: center; padding-block: var(--sp-6); }
.cta-band h2 { color: var(--color-text-primary-on-dark); margin-bottom: var(--sp-2); }
.cta-band p { max-width: var(--measure); margin: 0 auto var(--sp-3); color: var(--color-text-primary-on-dark); opacity: 0.9; }
.cta-band .btn-primary { background: var(--color-surface-light); color: var(--color-ground); }
.cta-band .btn-primary:hover { background: var(--color-surface-light-deep); }

/* 5.17 .divider */
.divider { width: 64px; height: 1px; background: var(--color-honour-accent); margin: var(--sp-4) auto; border: none; }

/* 5.18 .faq-item */
.faq-item { border-bottom: var(--border-hair); }
.faq-item__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) 0; text-align: left; font-family: var(--font-body); font-weight: var(--fw-body-semibold);
  font-size: var(--text-lead); min-height: 48px;
}
.faq-item__chevron { color: var(--color-primary-action); transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq-item__panel[data-open="true"] { max-height: 800px; }
.faq-item__panel-inner { padding-bottom: var(--sp-3); color: var(--color-text-secondary-on-dark); max-width: var(--measure); }

/* 5.19 .footer */
.footer { background: var(--color-ground); border-top: var(--border-hair); padding-block: var(--sp-6) var(--sp-4); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; gap: var(--sp-3); } }
.footer__col h4 { font-size: var(--text-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--color-honour-accent); margin-bottom: var(--sp-2); }
.footer__col ul li { margin-bottom: var(--sp-1); color: var(--color-text-secondary-on-dark); }
.footer__col ul li a:hover { color: var(--color-text-primary-on-dark); }
.footer__lockup { font-family: var(--font-arabic); color: var(--color-honour-accent); font-size: 1.5rem; }
.footer__bottom { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--border-hair); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); color: var(--color-text-tertiary-on-dark); font-size: var(--text-overline); }

/* 5.20 .field */
.field { margin-bottom: var(--sp-3); }
.field label { display: block; margin-bottom: 6px; font-size: var(--text-button); color: var(--color-text-secondary-on-dark); }
.field input, .field textarea {
  width: 100%; background: var(--color-surface-raised); border: var(--border-hair); border-radius: var(--r-card);
  color: var(--color-text-primary-on-dark); padding: 12px 14px; font-family: var(--font-body); font-size: var(--text-body);
  min-height: 48px;
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--color-primary-action); box-shadow: 0 0 0 3px var(--color-primary-action-glow); outline: none; }
.field--checkbox { display: flex; align-items: flex-start; gap: var(--sp-1); }
.field--checkbox input { width: 20px; height: 20px; min-height: unset; flex-shrink: 0; margin-top: 2px; }
.field--checkbox label { margin: 0; color: var(--color-text-primary-on-dark); }
.field__error { display: none; color: var(--color-status-warning); font-size: var(--text-overline); margin-top: 6px; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--color-status-warning); }
.field[data-invalid="true"] .field__error { display: block; }

/* ============================================================
   §6 NEW BRAND COMPONENTS
   ============================================================ */

/* 6.1 .enemy-block */
.enemy-block { background: var(--color-ground); text-align: center; }
.enemy-block__eyebrow { margin-bottom: var(--sp-2); }
.enemy-block h2 { max-width: var(--measure); margin: 0 auto var(--sp-4); }
.enemy-block__nodes { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.enemy-block__node { border: var(--border-hair); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.enemy-block__node-label { font-weight: var(--fw-body-semibold); }
.enemy-block__node-cost { color: var(--color-text-tertiary-on-dark); font-size: var(--text-overline); }
.enemy-block__return { color: var(--color-primary-action); margin-bottom: var(--sp-4); }
.enemy-block__body { max-width: var(--measure); margin: 0 auto var(--sp-4); text-align: left; color: var(--color-text-secondary-on-dark); }
.enemy-block__reasons { max-width: var(--measure); margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: var(--sp-2); }
.enemy-block__reasons li { padding-left: var(--sp-2); border-left: 2px solid var(--color-primary-action); }
.enemy-block__closer { max-width: var(--measure); margin: var(--sp-4) auto 0; font-weight: var(--fw-body-semibold); }
@media (max-width: 768px) { .enemy-block__nodes { flex-direction: column; align-items: center; } }

/* 6.2 .cage-diagram */
.cage-diagram { width: 100%; max-width: 240px; margin-inline: auto; }
.cage-diagram svg { width: 100%; height: auto; }
.cage-diagram__caption { text-align: center; margin-top: var(--sp-2); color: var(--color-honour-accent); font-size: var(--text-button); text-transform: uppercase; letter-spacing: var(--ls-button); }

/* 6.3 .assumption-breaker */
.assumption-breaker { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: center; max-width: var(--container); margin-inline: auto; }
.assumption-breaker__arrow { color: var(--color-primary-action); font-size: 1.5rem; }
.assumption-breaker__inherited { color: var(--color-text-tertiary-on-dark); text-decoration: line-through; }
.assumption-breaker__counter { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h3-card); color: var(--color-text-primary-on-dark); }
@media (max-width: 768px) { .assumption-breaker { grid-template-columns: 1fr; text-align: center; } .assumption-breaker__arrow { transform: rotate(90deg); } }

/* 6.4 .ayah-block */
.ayah-block { border-left: 2px solid var(--color-honour-accent); padding-left: var(--sp-3); max-width: var(--measure); margin: var(--sp-4) auto; }
.ayah-block__overline { margin-bottom: var(--sp-1); }
.ayah-block__arabic { margin-bottom: var(--sp-2); }
.ayah-block__translation { font-style: italic; color: var(--color-text-secondary-on-dark); font-size: var(--text-lead); }

/* 6.5 .proof-strip */
.proof-strip { text-align: center; }
.proof-strip__row { display: flex; justify-content: center; gap: var(--sp-6); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.proof-strip__figure { display: flex; flex-direction: column; align-items: center; }
.proof-strip__number { font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h2); font-variant-numeric: tabular-nums; }
.proof-strip__label { font-size: var(--text-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--color-text-tertiary-on-dark); }
.proof-strip__honesty { max-width: var(--measure); margin: 0 auto; color: var(--color-text-secondary-on-dark); }
@media (max-width: 768px) { .proof-strip__row { flex-direction: column; gap: var(--sp-3); } }

/* 6.6 .brotherhood-grid */
.brotherhood-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--color-border-hairline); }
.brotherhood-grid__face { aspect-ratio: 1; background-color: var(--color-surface-raised); background-size: cover; background-position: center; min-height: 64px; }
@media (max-width: 1024px) { .brotherhood-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .brotherhood-grid { grid-template-columns: repeat(3, 1fr); } }

/* 6.8 .track-record-block */
.track-record-block { background: var(--color-surface-raised); border-radius: var(--r-card); padding: var(--sp-4); max-width: var(--container); margin-inline: auto; }
.track-record-block__rule { width: 100%; height: 2px; background: var(--color-honour-accent); margin-bottom: var(--sp-3); }
.track-record-block__body { max-width: var(--measure); }

/* 6.9 .video-facade */
.video-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9; background: var(--color-surface-raised);
  border-radius: var(--r-card); overflow: hidden; text-align: left;
}
.video-facade__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-action-glow);
  border: 2px solid var(--color-primary-action);
}
.video-facade__play::before {
  content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--color-primary-action);
}
.video-facade:hover .video-facade__play, .video-facade:focus-visible .video-facade__play { border-color: var(--color-primary-action-hover); }
.video-facade__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-2);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: var(--color-text-primary-on-dark);
  font-size: var(--text-button);
}
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.lecture-preview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 768px) { .lecture-preview__grid { grid-template-columns: 1fr; } }
.lecture-preview__label { margin-top: var(--sp-2); font-weight: var(--fw-body-semibold); }
.lecture-preview__caption { color: var(--color-text-tertiary-on-dark); font-size: var(--text-overline); }

/* 6.10 .essay-card */
.essay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 1024px) { .essay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .essay-grid { grid-template-columns: 1fr; } }
.essay-card { display: flex; flex-direction: column; background: var(--color-surface-raised); border-radius: var(--r-card); overflow: hidden; border: var(--border-hair); }
.essay-card__movement { display: block; padding: var(--sp-2) var(--sp-2) 0; }
.essay-card__image { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.essay-card__title { padding: var(--sp-2); font-family: var(--font-body); font-weight: var(--fw-body-semibold); font-size: var(--text-h3-card); }
.essay-card__logline { padding: 0 var(--sp-2); color: var(--color-text-secondary-on-dark); flex-grow: 1; }
.essay-card__cta { padding: var(--sp-2); color: var(--color-primary-action); font-weight: var(--fw-body-semibold); margin-top: auto; }
.essay-card--upcoming { opacity: 0.6; }
.essay-card--upcoming .essay-card__title { padding-top: var(--sp-3); }
.essay-card__status { padding: 0 var(--sp-2) var(--sp-3); color: var(--color-text-tertiary-on-dark); font-size: var(--text-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); }

/* 6.11 Utility page layout */
.utility-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6) var(--section-x-d); }
.utility-page__body { max-width: var(--measure); color: var(--color-text-secondary-on-dark); margin-block: var(--sp-3) var(--sp-4); }
.utility-page__eyebrow { margin-bottom: var(--sp-2); }
.utility-footer { border-top: var(--border-hair); padding: var(--sp-3); text-align: center; color: var(--color-text-tertiary-on-dark); font-size: var(--text-overline); }

/* Legal / prose pages */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 { font-size: var(--text-h2); font-family: var(--font-display); font-weight: var(--fw-display-bold); margin-block: var(--sp-4) var(--sp-2); }
.prose p { margin-bottom: var(--sp-2); color: var(--color-text-secondary-on-dark); }
.prose ul { margin-bottom: var(--sp-2); }
.prose li { color: var(--color-text-secondary-on-dark); padding-left: var(--sp-2); border-left: 2px solid var(--color-border-hairline); margin-bottom: var(--sp-1); }

.todo-banner {
  background: var(--color-status-warning); color: var(--color-ground); padding: var(--sp-2) var(--section-x-d);
  text-align: center; font-weight: var(--fw-body-semibold);
}

/* Persona list */
.persona-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: var(--container); margin-inline: auto; }
.persona-item { border-bottom: var(--border-hair); padding-bottom: var(--sp-3); }
.persona-item__num { color: var(--color-honour-accent); font-family: var(--font-display); }

/* Table (About comparison) */
.compare-table { width: 100%; border-collapse: collapse; max-width: var(--container); margin-inline: auto; }
.compare-table th, .compare-table td { border-bottom: var(--border-hair); padding: var(--sp-2); text-align: left; }
.compare-table th { color: var(--color-honour-accent); font-size: var(--text-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); }
.compare-table td:last-child, .compare-table th:last-child { color: var(--color-text-primary-on-dark); }
.compare-table td:nth-child(2) { color: var(--color-text-tertiary-on-dark); }
@media (max-width: 768px) { .compare-table { display: block; overflow-x: auto; } }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Light surface section (max 2/page) */
.section--light { background: var(--color-surface-light); color: var(--color-text-primary-on-light); }
.section--light .overline { color: var(--color-primary-action); }