/*
 * Ruya Website V2 — Inner Page Styles
 * pages.css
 *
 * Section-specific layouts for inner pages only:
 *   services.html · process.html · demos.html · contact.html
 *
 * Depends on main.css for design tokens and primitives.
 * Depends on components.css for mobile-nav, footer, CTA, and shared classes.
 * Does not duplicate anything defined in main.css or components.css.
 *
 * Sections:
 *   1.  Page hero
 *   2.  Services page
 *   3.  Process page
 *   4.  Demos page
 *   5.  Contact page
 *   6.  About page
 *   7.  Responsive refinements
 *   8.  Print additions
 */


/* ==========================================================================
   1. Page hero — narrow, single-column
   ========================================================================== */

.page-hero {
  padding-block: clamp(2.25rem, 5vw, 4.25rem);
  background-color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* Subtle champagne gradient — matches home hero at reduced intensity */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 50% 100%,
    color-mix(in srgb, var(--color-champagne) 5%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
}

.page-hero .eyebrow {
  margin-block-end: var(--space-4);
}

.page-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-5);
}

.page-hero .text-lead {
  max-width: 58ch;
}


/* ==========================================================================
   2. Services page
   ========================================================================== */

/* Intro paragraph before catalogue */
.services-page-intro {
  font-size: var(--text-md);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  max-width: 68ch;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}

html[lang="en"] .services-page-intro {
  line-height: var(--leading-relaxed);
}

/* Catalogue container */
.services-catalogue {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

/* One service group (Presence / Operations / Intelligence / Continuity) */
.service-group {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* Group heading + description */
.service-group-header {
  display: grid;
  gap: var(--space-3);
  padding-block-end: clamp(1rem, 2vw, 1.5rem);
  border-block-end: 2px solid var(--color-champagne);
  max-width: 40ch;
}

.service-group-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-champagne-soft);
  line-height: var(--leading-snug);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 60%, transparent);
}

.service-group-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .service-group-desc {
  line-height: var(--leading-relaxed);
}

/* Grid of expanded service entries within a group */
.service-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Individual expanded service entry — catalogue mode (always expanded).
   Flex column so the action area (expand button + CTA) can be pushed to the
   card bottom, aligning "تفاصيل الخدمة" / "جهّز مشروعك" across a row
   regardless of body length (CW-2L card alignment fix). */
.service-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  align-items: stretch;
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.service-entry:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

.service-entry-meta {
  display: flex;
  align-items: center;
}

.service-output-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  padding: 0.2rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-border-accent) 70%, transparent);
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html[lang="ar"] .service-output-tag {
  letter-spacing: 0;
}

.service-entry-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.service-entry-summary {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-champagne-soft);
  line-height: var(--leading-snug);
}

/* ---- Service entry fit line (card face) — surfaces existing svc.bestFor ---- */
.service-entry-fit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.service-entry-fit__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  opacity: 0.7;
  white-space: nowrap;
}

html[lang="ar"] .service-entry-fit__label {
  letter-spacing: 0.02em;
  text-transform: none;
}

.service-entry-fit__text {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
}

html[lang="en"] .service-entry-fit__text {
  line-height: var(--leading-relaxed);
}


.service-entry-cta {
  align-self: flex-start;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

/* ---- Service entry problem (card face) ---- */
.service-entry-problem {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: color-mix(in srgb, var(--color-graphite) 40%, transparent);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 25%, transparent);
  border-radius: var(--radius-md);
}

.service-entry-problem__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

html[lang="ar"] .service-entry-problem__label {
  letter-spacing: 0.02em;
  text-transform: none;
}

.service-entry-problem__text {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin: 0;
}

html[lang="en"] .service-entry-problem__text {
  line-height: var(--leading-relaxed);
}

/* ---- Service entry build preview (card face) ---- */
.service-entry-build {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: color-mix(in srgb, var(--color-champagne) 6%, transparent);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 40%, transparent);
  border-radius: var(--radius-md);
}

.service-entry-build__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  opacity: 0.7;
}

html[lang="ar"] .service-entry-build__label {
  letter-spacing: 0.02em;
  text-transform: none;
}

.service-entry-build__text {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
}

html[lang="en"] .service-entry-build__text {
  line-height: var(--leading-relaxed);
}

/* ---- Service entry demo link (card face) ---- */
.service-entry-demo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-champagne);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.service-entry-demo-link::after {
  content: "→";
  font-size: var(--text-xs);
}

html[dir="rtl"] .service-entry-demo-link::after {
  content: "←";
}

.service-entry-demo-link:hover {
  color: var(--color-champagne-soft);
}

.service-entry-demo-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Service expand button ---- */
.service-expand-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--color-border-accent) 55%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  align-self: flex-start;
  margin-block-start: auto;
}

.service-expand-btn::after {
  content: "↓";
  font-size: var(--text-xs);
  transition: transform 0.2s ease;
  display: inline-block;
}

.service-expand-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.service-expand-btn:hover,
.service-expand-btn:focus-visible {
  border-color: var(--color-border-accent);
  color: var(--color-champagne-soft);
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  outline: none;
}

.service-expand-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Service detail panel ---- */
@keyframes panelReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.service-detail-panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: color-mix(in srgb, var(--color-graphite) 60%, var(--color-ink));
  border: 1px solid color-mix(in srgb, var(--color-border-accent) 70%, transparent);
  border-block-start: 2px solid color-mix(in srgb, var(--color-champagne) 30%, transparent);
  border-radius: var(--radius-lg);
}

.service-detail-panel:not([hidden]) {
  animation: panelReveal 220ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-panel:not([hidden]) { animation: none; }
}

.service-detail-panel[hidden] {
  display: none;
}

.service-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-detail-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 40%, transparent);
}

html[lang="ar"] .service-detail-section-title {
  letter-spacing: 0.02em;
  text-transform: none;
}

.service-detail-best-for {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-champagne-soft);
  font-style: italic;
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 50%, transparent);
  padding-inline-start: var(--space-3);
  margin: 0;
}

html[lang="en"] .service-detail-best-for {
  line-height: var(--leading-relaxed);
}

.service-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-detail-list li {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text);
  padding-inline-start: var(--space-4);
  position: relative;
}

.service-detail-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-champagne) 60%, transparent);
}

html[lang="en"] .service-detail-list li {
  line-height: var(--leading-relaxed);
}

.service-detail-list--muted li {
  color: var(--color-text-muted);
}

.service-detail-list--muted li::before {
  background: color-mix(in srgb, var(--color-stone-2) 40%, transparent);
}

.service-detail-concept-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-champagne-soft);
  text-decoration: none;
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  padding-block-start: var(--space-3);
  transition: color 0.15s ease;
}

.service-detail-concept-link::after {
  content: "→";
  font-size: var(--text-xs);
}

html[dir="rtl"] .service-detail-concept-link::after {
  content: "←";
}

.service-detail-concept-link:hover {
  color: var(--color-champagne);
}

.service-detail-concept-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Service detail deliverable (expanded panel) ---- */
.service-detail-deliverable {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 45%, transparent);
  border-radius: var(--radius-md);
}

.service-detail-deliverable__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne-soft);
  margin: 0;
}

html[lang="ar"] .service-detail-deliverable__label {
  letter-spacing: 0.02em;
  text-transform: none;
}

.service-detail-deliverable__text {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-champagne-soft);
  margin: 0;
}

html[lang="en"] .service-detail-deliverable__text {
  line-height: var(--leading-relaxed);
}

/* ---- Service detail points (moved into panel) ---- */
.service-detail-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-detail-points li {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text);
  padding-inline-start: var(--space-4);
  position: relative;
}

.service-detail-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-champagne) 50%, transparent);
}

html[lang="en"] .service-detail-points li {
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   3. Process page
   ========================================================================== */

/* Full step list — expanded vs home preview variant */
.process-full-steps {
  display: grid;
  gap: 0;
  counter-reset: step-counter;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* Full-page step title — elevated from shared base */
.process-full-steps .process-step-title {
  font-size: var(--text-xl);
  margin-block-start: var(--space-1);
}

/* Step description — muted, clearly below the title in hierarchy */
.process-step-text {
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin: 0;
  margin-block-start: var(--space-3);
}

html[lang="en"] .process-step-text {
  line-height: var(--leading-relaxed);
}

/* Phase tag — small champagne pill above step title */
.process-step-phase {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: fit-content;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  padding: 0.2rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-border-accent) 70%, transparent);
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html[lang="ar"] .process-step-phase {
  letter-spacing: 0;
}

/* Step deliverable points */
.process-step-points {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  margin-block-start: var(--space-3);
}

.process-step-points li {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  align-items: baseline;
}

.process-step-points li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-champagne) 65%, transparent);
  align-self: center;
}

html[lang="en"] .process-step-points li {
  line-height: var(--leading-relaxed);
}

.process-full-steps > li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: start;
  counter-increment: step-counter;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block-end: 1px solid var(--color-border);
}

.process-full-steps > li:last-child {
  border-block-end: none;
}

/* All direct content children go in column 2 — prevents auto-placement
   from alternating phase/title/text into column 1 alongside the number */
.process-full-steps > li > .process-step-phase,
.process-full-steps > li > .process-step-title,
.process-full-steps > li > .process-step-text,
.process-full-steps > li > .process-step-points {
  grid-column: 2;
}

/* Full-page step counter — spans all content rows so it anchors at the top.
   Scoped to direct stage items only so nested deliverable points keep their
   small dotted-bullet treatment (CW-2L timeline readability fix). */
.process-full-steps > li::before {
  content: counter(step-counter, decimal-leading-zero);
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  line-height: 1.4;
  direction: ltr;
  unicode-bidi: isolate;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
}

/* Commitments section */
.process-commitments-section {
  background-color: color-mix(in srgb, var(--color-graphite) 40%, var(--color-ink));
}

.process-commitments {
  display: grid;
  gap: var(--space-4);
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
  list-style: none;
}

.process-commitments li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  align-items: baseline;
}

html[lang="en"] .process-commitments li {
  line-height: var(--leading-relaxed);
}

.process-commitments li::before {
  content: "✓";
  color: var(--color-champagne);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* Client section — what we need from you */
.process-client-section {
  background-color: var(--color-paper);
  color: var(--color-text-dark);
  border-block-start: 1px solid var(--color-border);
}

.process-client-section h2,
.process-client-section h3 {
  color: var(--color-ink);
}

.process-client-section .check-list li {
  color: var(--color-muted);
}

/* Honest note block */
.process-note-block {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent);
  border-radius: var(--radius-xl);
}

.process-note-text {
  font-size: var(--text-sm);
  color: var(--color-champagne-soft);
  line-height: var(--leading-arabic);
}

html[lang="en"] .process-note-text {
  line-height: var(--leading-relaxed);
}

/* Delivery Standards section */
.process-standards-header {
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.process-standards-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block-start: var(--space-4);
  max-width: 64ch;
}

html[lang="en"] .process-standards-intro {
  line-height: var(--leading-normal);
}

.process-standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.process-standard-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-block-start: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.process-standard-index {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  letter-spacing: 0.06em;
  direction: ltr;
  unicode-bidi: isolate;
}

.process-standard-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.process-standard-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .process-standard-body {
  line-height: var(--leading-relaxed);
}

@media (max-width: 40em) {
  .process-standards-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   4. Demos page
   ========================================================================== */

/* Honest framing note — hidden per owner request */
.demos-note-card {
  display: none;
}


html[lang="en"] .demos-note-card {
  line-height: var(--leading-relaxed);
}

/* Demos category grid */
.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Individual demo category card.
   Flex column so the service line + CTA link-row (which already declare
   margin-block-start:auto) are pinned to the card bottom, aligning the
   "تجربة عاملة / افتح التجربة" rows across a grid row (CW-2L card alignment). */
.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.demo-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

/* Tags row — badge + secondary output-type tag */
.demo-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.demo-tag {
  /* inherits badge layout from .badge — no override needed */
}

.demo-output-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html[lang="ar"] .demo-output-tag {
  letter-spacing: 0;
}

.demo-card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.demo-card-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
}

html[lang="en"] .demo-card-desc {
  line-height: var(--leading-relaxed);
}

/* Concept image — card-level visual mockup */
.demo-concept-image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-accent);
  background-color: var(--color-bg-surface);
  aspect-ratio: 4 / 3;
  order: -1; /* appears above title */
}

.demo-concept-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* De-emphasize the static section heading — reduce to kicker weight */
#demos-heading {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4) !important;
}

html[lang="ar"] #demos-heading {
  letter-spacing: 0.02em;
  text-transform: none;
}



/* ---- Demo expand button ---- */
.demo-expand-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--color-champagne) 35%, transparent);
  border-radius: var(--radius-lg);
  color: color-mix(in srgb, var(--color-champagne) 80%, var(--color-stone));
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  text-align: center;
}

.demo-expand-btn:hover,
.demo-expand-btn:focus-visible {
  border-color: color-mix(in srgb, var(--color-champagne) 70%, transparent);
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 6%, transparent);
  outline: none;
}

.demo-expand-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Demo expand dialog ---- */
.demo-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 760px);
  max-height: min(90vh, 820px);
  background-color: var(--color-graphite);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  flex-direction: column;
}

/* display: flex scoped to [open] so UA dialog:not([open]){display:none} is not overridden */
.demo-dialog[open] {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}

/*
 * @starting-style defines the from-state for the [open] transition.
 * Browsers without support (pre-Chrome 117, pre-FF 129, pre-Safari 17.4)
 * ignore this block — dialog opens instantly (existing behavior). Progressive only.
 */
@starting-style {
  .demo-dialog[open] {
    opacity: 0;
    transform: translateY(8px);
  }
}

.demo-dialog::backdrop {
  background-color: var(--color-overlay);
  backdrop-filter: blur(2px);
  transition: opacity 220ms var(--ease-out);
}

@starting-style {
  .demo-dialog::backdrop {
    opacity: 0;
  }
}

.demo-dialog-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 4vw, 2rem);
  gap: var(--space-5);
}

.demo-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.demo-dialog-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.demo-dialog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.demo-dialog-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0;
}

.demo-dialog-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.demo-dialog-close:hover {
  border-color: var(--color-border-accent);
  color: var(--color-text);
}

.demo-dialog-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.demo-dialog-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin: 0;
}

html[lang="en"] .demo-dialog-desc {
  line-height: var(--leading-relaxed);
}

/* Modal concept image — primary visual */
.demo-dialog-image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-accent);
  background-color: var(--color-surface-alt, #242019);
  position: relative;
}

.demo-dialog-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 380px;
  object-fit: cover;
  object-position: top left;
}

.demo-dialog-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
}

/* Dynamic concept sections — details, includes, outcome */
.demo-dialog-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-dialog-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.demo-dialog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.demo-dialog-list li {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-inline-start: var(--space-4);
  position: relative;
}

.demo-dialog-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.demo-dialog-outcome {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-style: italic;
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-4);
  margin: 0;
}

/* Mobile sizing for dialog */
@media (max-width: 30em) {
  .demo-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    inset: auto 0 0 0;
    margin: 0;
  }

  .demo-dialog-inner {
    padding: clamp(1rem, 5vw, 1.5rem);
  }

  .demo-dialog-title {
    font-size: var(--text-lg);
  }
}


/* ---- Blueprint card — replaces SVG image in each demo card ---- */

.demo-blueprint-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: color-mix(in srgb, var(--color-graphite) 70%, var(--color-ink));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-block-start: 2px solid color-mix(in srgb, var(--color-champagne) 38%, transparent);
  order: -1; /* appears above title and desc in the card */
}

.demo-blueprint-cues {
  display: grid;
  gap: 0;
}

.demo-blueprint-cue {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  transition: background-color 150ms var(--ease-out);
}

.demo-blueprint-cue:hover {
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
}

html[lang="ar"] .demo-blueprint-cue {
  grid-template-columns: 6rem 1fr;
}

.demo-blueprint-cue:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.demo-blueprint-cue:first-child {
  padding-block-start: 0;
}

.demo-blueprint-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--leading-snug);
}

html[lang="ar"] .demo-blueprint-label {
  letter-spacing: 0.01em;
  text-transform: none;
}

.demo-blueprint-value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* ---- Blueprint modal ---- */

.demo-dialog-blueprint {
  display: grid;
  gap: var(--space-3);
}

.demo-dialog-blueprint-section {
  display: grid;
  gap: var(--space-3);
  padding: clamp(0.875rem, 2.5vw, 1.25rem);
  background-color: color-mix(in srgb, var(--color-graphite) 55%, var(--color-ink));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 42%, transparent);
}

.demo-dialog-blueprint-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0;
}

html[lang="ar"] .demo-dialog-blueprint-title {
  letter-spacing: 0.02em;
  text-transform: none;
}

.demo-dialog-blueprint-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.demo-dialog-blueprint-list li {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-arabic);
  padding-inline-start: var(--space-4);
  position: relative;
}

html[lang="en"] .demo-dialog-blueprint-list li {
  line-height: var(--leading-relaxed);
}

.demo-dialog-blueprint-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-champagne) 60%, transparent);
}

.demo-dialog-blueprint-list--muted li {
  color: var(--color-text-muted);
}

.demo-dialog-blueprint-list--muted li::before {
  background: color-mix(in srgb, var(--color-stone-2) 35%, transparent);
}

/* PDF note — disabled, no link */
.demo-dialog-pdf-note {
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
  text-align: center;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  margin: 0;
}

/* Dialog CTA footer — internal next-step navigation */
.demo-dialog-cta-footer {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.demo-dialog-cta-heading {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.demo-dialog-cta-body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-block-end: var(--space-4);
}

.demo-dialog-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Service reverse-link inside demo modal */
.demo-dialog-service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-champagne-soft);
  text-decoration: none;
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.demo-dialog-service-link::after {
  content: "→";
  font-size: var(--text-xs);
}

html[dir="rtl"] .demo-dialog-service-link::after {
  content: "←";
}

.demo-dialog-service-link:hover {
  color: var(--color-champagne);
}

.demo-dialog-service-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Reduced motion — dialog and cue transitions explicitly disabled (belt-and-suspenders
   alongside the global Section 16 kill in main.css) */
@media (prefers-reduced-motion: reduce) {
  .demo-dialog[open] {
    transition: none;
    transform: none;
  }
  .demo-dialog::backdrop {
    transition: none;
  }
  .demo-blueprint-cue {
    transition: none;
  }
}

/* Mobile — blueprint card cue column */
@media (max-width: 30em) {
  .demo-blueprint-cue {
    grid-template-columns: 5rem 1fr;
    gap: var(--space-2);
  }

  html[lang="ar"] .demo-blueprint-cue {
    grid-template-columns: 5.5rem 1fr;
  }

  .demo-dialog-blueprint-section {
    padding: var(--space-3);
  }
}


/* ==========================================================================
   5. Contact page
   ========================================================================== */

/* Channels deferred note */
.contact-channels-note {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block-start: var(--space-4);
  max-width: 68ch;
}

html[lang="en"] .contact-channels-note {
  line-height: var(--leading-relaxed);
}

/* Checklist intro */
.contact-checklist-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block: var(--space-4) var(--space-8);
  max-width: 68ch;
}

html[lang="en"] .contact-checklist-intro {
  line-height: var(--leading-relaxed);
}

/* Channel cards — pre-launch icon grid */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: var(--space-6);
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
}

.contact-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
}

.contact-channel-glyph {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-latin);
  color: var(--color-text-muted);
  line-height: 1;
  flex-shrink: 0;
}

.contact-channel-card--pending {
  opacity: 0.6;
}

/* Activated official page — the whole card is a clickable external link.
   Full opacity (unlike --pending) and no underline; a subtle accent on hover
   signals it is interactive. */
.contact-channel-card--active {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.contact-channel-card--active:hover,
.contact-channel-card--active:focus-visible {
  border-color: var(--color-accent);
}

.contact-channel-card--active:hover .contact-channel-glyph,
.contact-channel-card--active:focus-visible .contact-channel-glyph {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Primary (direct) channel — the email card. Spans the full row above the
   social placeholders and uses an accent border + elevated surface so it
   reads as the one real contact channel. */
.contact-channel-card--primary {
  grid-column: 1 / -1;
  border-color: var(--color-accent);
  background-color: var(--color-bg-elevated);
}

.contact-channel-card--primary .contact-channel-glyph {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.contact-channel-copy {
  margin-block-start: var(--space-1);
}

.contact-channel-value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .contact-channel-value {
  line-height: var(--leading-relaxed);
}

.contact-channel-value a {
  color: inherit;
  text-underline-offset: 2px;
}

/* Checklist section — on paper background */
.contact-checklist-section {
  background-color: var(--color-paper);
  color: var(--color-text-dark);
}

.contact-checklist-section h2 {
  color: var(--color-ink);
}

.contact-checklist-section .check-list li {
  color: var(--color-muted);
}

/* Next steps section */
.contact-next-section {
  background-color: color-mix(in srgb, var(--color-graphite) 35%, var(--color-ink));
}

.contact-next-list {
  display: grid;
  gap: var(--space-5);
  counter-reset: step-counter;
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
  list-style: none;
}

.contact-next-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  counter-increment: step-counter;
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  align-items: start;
}

html[lang="en"] .contact-next-list li {
  line-height: var(--leading-relaxed);
}

.contact-next-list li::before {
  content: counter(step-counter, decimal-leading-zero);
  font-family: var(--font-latin);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  line-height: 1.6;
  direction: ltr;
  unicode-bidi: isolate;
}

/* No-form notice */
.contact-no-form-note {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: color-mix(in srgb, var(--color-graphite) 40%, var(--color-ink));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

.contact-no-form-note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  max-width: 52ch;
  margin-inline: auto;
}

html[lang="en"] .contact-no-form-note p {
  line-height: var(--leading-relaxed);
}

/* Contact explore block — internal navigation while contact is deferred */
.contact-explore-block {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background-color: color-mix(in srgb, var(--color-graphite) 50%, var(--color-ink));
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
}

.contact-explore-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
  line-height: var(--leading-arabic);
}

html[lang="en"] .contact-explore-title {
  line-height: var(--leading-relaxed);
}

.contact-explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-explore-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-champagne-soft);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 35%, transparent);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.contact-explore-link:hover,
.contact-explore-link:focus-visible {
  color: var(--color-warm-white);
  border-color: color-mix(in srgb, var(--color-champagne) 65%, transparent);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
}


/* ==========================================================================
   6. About page
   ========================================================================== */

/* About page section kickers — bump eyebrow size for readability in dark sections */
.about-origin-section .eyebrow,
.about-vision-section .eyebrow,
.about-beliefs-section .eyebrow,
.about-not-section .eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-champagne);
}

html[lang="ar"] .about-origin-section .eyebrow,
html[lang="ar"] .about-vision-section .eyebrow,
html[lang="ar"] .about-beliefs-section .eyebrow,
html[lang="ar"] .about-not-section .eyebrow {
  letter-spacing: 0;
}

/* Section h2 titles — fluid scale uplift and breathing room above for about sections */
.about-origin-section .text-h2,
.about-vision-section .text-h2,
.about-beliefs-section .text-h2,
.about-not-section .text-h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  margin-block-start: var(--space-5);
}


/* Origin / Problem section */
.about-origin-section {
  background-color: color-mix(in srgb, var(--color-graphite) 40%, var(--color-ink));
}

.about-origin-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.about-origin-body {
  font-size: var(--text-md);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin-block-start: var(--space-6);
  max-width: 56ch;
}

html[lang="en"] .about-origin-body {
  line-height: var(--leading-relaxed);
}

.about-origin-bridge {
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  max-width: 56ch;
}

html[lang="en"] .about-origin-bridge {
  line-height: var(--leading-relaxed);
}

/* Vision section */
.about-vision-section {
  background-color: var(--color-graphite);
}

.about-vision-section .container {
  max-width: var(--max-width-content);
}

.about-vision-body {
  font-size: var(--text-md);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin-block-start: var(--space-6);
  max-width: 68ch;
}

html[lang="en"] .about-vision-body {
  line-height: var(--leading-relaxed);
}

/* Beliefs section */
.about-beliefs-section {
  /* default dark bg */
}

.about-beliefs-intro {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  max-width: 68ch;
  margin-block-start: var(--space-6);
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

html[lang="en"] .about-beliefs-intro {
  line-height: var(--leading-relaxed);
}

.about-beliefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.about-belief-card {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  border-block-start: 3px solid var(--color-champagne);
  align-content: start;
}

/* What not to do section — light break */
.about-not-section {
  background-color: var(--color-paper);
  color: var(--color-text-dark);
}

.about-not-section h2,
.about-not-section .eyebrow {
  color: var(--color-ink);
}

.about-not-intro {
  font-size: var(--text-md);
  line-height: var(--leading-arabic);
  color: var(--color-muted);
  max-width: 68ch;
  margin-block: var(--space-5) clamp(1.5rem, 3vw, 2rem);
}

html[lang="en"] .about-not-intro {
  line-height: var(--leading-relaxed);
}

.about-not-list {
  display: grid;
  gap: var(--space-4);
  max-width: var(--max-width-content);
  list-style: none;
}

.about-not-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-arabic);
  color: var(--color-muted);
  align-items: baseline;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border-accent);
}

html[lang="en"] .about-not-list li {
  line-height: var(--leading-relaxed);
}

.about-not-list li::before {
  content: "—";
  color: var(--color-champagne);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}


/* ==========================================================================
   6b. V2U-9: Trust Architecture section (process page)
   ========================================================================== */

.trust-header {
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.trust-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block-start: var(--space-4);
  max-width: 68ch;
}

html[lang="en"] .trust-intro {
  line-height: var(--leading-relaxed);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.trust-card {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-inline-start: 2px solid color-mix(in srgb, var(--color-champagne) 45%, transparent);
  align-content: start;
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}

@media (prefers-reduced-motion: reduce) {
  .trust-card,
  .trust-card:hover {
    transition: none;
    transform: none;
  }
}

.trust-card-index {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  letter-spacing: 0.06em;
  direction: ltr;
  unicode-bidi: isolate;
}

.trust-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.trust-card-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .trust-card-body {
  line-height: var(--leading-relaxed);
}

@media (max-width: 30em) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   6c. V2U-8: Visual Depth System
   ========================================================================== */

/* --- Page hero: side ambient glow (start-edge radial) --- */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 150% at 0% 50%,
    color-mix(in srgb, var(--color-champagne) 4%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

html[lang="ar"] .page-hero::after {
  background: radial-gradient(
    ellipse 50% 150% at 100% 50%,
    color-mix(in srgb, var(--color-champagne) 4%, transparent),
    transparent 65%
  );
}

/* --- Service group: premium title glow --- */
.service-group-title {
  text-shadow: 0 0 28px color-mix(in srgb, var(--color-champagne) 18%, transparent);
}

/* Service entry: inset champagne accent on hover for depth cue */
.service-entry:hover {
  box-shadow: var(--shadow-md), inset 2px 0 0 color-mix(in srgb, var(--color-champagne) 22%, transparent);
}

html[dir="rtl"] .service-entry:hover {
  box-shadow: var(--shadow-md), inset -2px 0 0 color-mix(in srgb, var(--color-champagne) 22%, transparent);
}

/* --- Process timeline: vertical connector rail --- */
.process-full-steps {
  position: relative;
}

/* CW-2M: the vertical connector rail read as a messy line intersecting the
   numbers and stage dividers. Removed decisively — the numbered stages (01–04)
   with their dotted points and horizontal dividers now stand as a clean,
   arranged stacked layout. Element rule kept disabled for clarity. */
.process-full-steps::before {
  content: none;
}

/* --- Blueprint card: stronger top accent line + ambient glow --- */
.demo-blueprint-card {
  border-block-start-width: 3px;
  border-block-start-color: color-mix(in srgb, var(--color-champagne) 55%, transparent);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-champagne) 4%, transparent);
}

/* Blueprint modal sections: stepped visual hierarchy by position */
.demo-dialog-blueprint-section:nth-child(1) {
  border-inline-start-color: color-mix(in srgb, var(--color-champagne) 58%, transparent);
}
.demo-dialog-blueprint-section:nth-child(2) {
  border-inline-start-color: color-mix(in srgb, var(--color-champagne) 38%, transparent);
}
.demo-dialog-blueprint-section:nth-child(3) {
  border-inline-start-color: color-mix(in srgb, var(--color-champagne) 25%, transparent);
}

/* --- About pages: ambient depth anchors --- */
.about-origin-section {
  position: relative;
  overflow: hidden;
}

.about-origin-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 100% 25%,
    color-mix(in srgb, var(--color-champagne) 4%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.about-vision-section {
  position: relative;
  overflow: hidden;
}

.about-vision-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 0% 100%,
    color-mix(in srgb, var(--color-champagne) 5%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

/* About belief cards: hover depth — follows service-entry / demo-card pattern */
.about-belief-card {
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.about-belief-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}

/* Reduced motion — disable V2U-8 motion additions */
@media (prefers-reduced-motion: reduce) {
  .about-belief-card,
  .about-belief-card:hover {
    transition: none;
    transform: none;
  }
  .process-full-steps::before {
    display: none;
  }
}


/* ==========================================================================
   7. Responsive refinements
   ========================================================================== */

@media (max-width: 48em) {
  .service-entries {
    grid-template-columns: 1fr;
  }

  .about-origin-inner {
    grid-template-columns: 1fr;
  }

  .demos-grid {
    grid-template-columns: 1fr;
  }

  .contact-channels {
    grid-template-columns: 1fr;
  }

  .process-full-steps > li {
    grid-template-columns: 2.5rem 1fr;
  }

  .service-group-header {
    max-width: 100%;
  }

  .page-hero h1 {
    font-size: var(--text-3xl);
  }

  /* V2U-8: Adjust timeline rail to match narrower step column */
  .process-full-steps::before {
    inset-inline-start: 1.25rem; /* midpoint of 2.5rem column */
  }
}

@media (max-width: 30em) {
  .process-full-steps > li {
    grid-template-columns: 2rem 1fr;
    column-gap: var(--space-3);
    padding-block: clamp(1.5rem, 4vw, 2rem);
  }

  .process-full-steps > li::before {
    font-size: var(--text-base);
  }

  /* V2U-8: Adjust timeline rail to match narrowest step column */
  .process-full-steps::before {
    inset-inline-start: 1rem; /* midpoint of 2rem column */
  }

  .service-expand-btn {
    align-self: stretch;
    justify-content: center;
    text-align: center;
  }

  .service-detail-panel {
    padding: var(--space-4);
  }
}


/* ==========================================================================
   7b. Demo Lab Hub — bilingual static sections (Phase 2)
   ========================================================================== */

/*
 * Hard-coded bilingual content pattern.
 * .dl-ar shows in Arabic (RTL default), .dl-en shows in English.
 * JS sets html[lang] at the very start of init() before rendering —
 * so the CSS switches on language toggle with no layout flash.
 */
html[lang="ar"] .dl-en { display: none; }
html[lang="en"] .dl-ar { display: none; }

/* Demo Lab disclaimer banner */
.dl-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background-color: color-mix(in srgb, var(--color-champagne) 7%, transparent);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: var(--max-width-content);
}

/* Mini-labels inside Demo Lab cards ("Problem", "What you'll see") */
.dl-demo-card-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-block-end: var(--space-2);
}

html[lang="ar"] .dl-demo-card-section-label {
  letter-spacing: 0.02em;
}

/* Related service line — sits at bottom of card */
.dl-demo-card-service {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  margin-block-start: auto;
}

/* Active demo link row — status tag + view button side by side */
.dl-demo-card-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* "Demo page coming next" / "Planned demo" status line */
.dl-demo-card-coming {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

html[lang="ar"] .dl-demo-card-coming {
  letter-spacing: 0;
}

/* Explanatory 3-column grid — "What are these demos for?" */
.dl-explainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-block-start: var(--space-10);
}

.dl-explainer-item {
  padding: var(--space-6);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.dl-explainer-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.dl-explainer-body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Responsive — mobile adjustments for dl- elements */
@media (max-width: 40em) {
  .dl-disclaimer {
    flex-direction: column;
  }

  .dl-explainer {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   7b-B. Phase B — Demo Lab Hub Visual Upgrade
   New classes for demos.html only: hero strip, category headers, card chips.
   Appended to 7b. No existing selector modified.
   ========================================================================== */

/* Hero status strip — stat + divider + category chips */
.dl-hero-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.dl-hero-stat {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  white-space: nowrap;
  flex-shrink: 0;
}

.dl-hero-divider {
  width: 1px;
  height: 1.2rem;
  background-color: var(--color-border-strong);
  flex-shrink: 0;
}

.dl-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.dl-hero-chip {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding: 0.2rem 0.65rem;
  background-color: color-mix(in srgb, var(--color-stone-2) 7%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}


/* Category chip inside each demo card's tag row */
.dl-card-category {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0.15rem 0.6rem;
  background-color: color-mix(in srgb, var(--color-stone-2) 7%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Responsive — Phase B mobile */
@media (max-width: 40em) {
  .dl-hero-strip {
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    margin-block-start: var(--space-6);
  }

  .dl-hero-divider {
    display: none;
  }
}


/* ==========================================================================
   7b-C. Choose-by-Problem Guide (.dl-problem-*)
   Namespaced to demos.html only. No existing selectors modified.
   ========================================================================== */

.dl-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.dl-problem-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.dl-problem-row:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-sm);
}

.dl-problem-row__problem {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
}

html[lang="en"] .dl-problem-row__problem {
  line-height: var(--leading-relaxed);
}

.dl-problem-row__demo {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
}

.dl-problem-row__demo::after {
  content: " →";
  font-size: var(--text-xs);
}

html[dir="rtl"] .dl-problem-row__demo::after {
  content: " ←";
}


/* ==========================================================================
   7c. Lead Tracking Demo Page (.lt-*)
   Namespaced classes for demo-lead-tracking.html only.
   No existing selector is redefined.
   ========================================================================== */

/* KPI summary grid — 4-column, collapses to 2x2 on mobile */
.lt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.lt-kpi-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.lt-kpi-num {
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
}

.lt-kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* Sample data ribbon — compact inline marker near data sections */
.lt-sample-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  letter-spacing: 0.04em;
}

html[lang="ar"] .lt-sample-ribbon {
  letter-spacing: 0;
}

/* Section row: label + ribbon on same baseline */
.lt-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.lt-section-head h2 {
  flex: 1 1 auto;
}

/* Pipeline board */
.lt-pipeline-wrap {
  overflow-x: auto;
  padding-block-end: var(--space-4);
}

.lt-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  min-width: 580px;
}

.lt-pipeline-col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.lt-pipeline-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-border);
  margin-block-end: var(--space-1);
}

.lt-pipeline-col-header--qualified { border-block-end-color: color-mix(in srgb, var(--color-champagne) 50%, transparent); }
.lt-pipeline-col-header--proposal  { border-block-end-color: var(--color-champagne); }

.lt-pipeline-stage-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  flex: 1;
}

.lt-pipeline-count {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem;
  direction: ltr;
  unicode-bidi: isolate;
}

.lt-pipeline-card {
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.lt-pipeline-company {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.lt-pipeline-service {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.lt-pipeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-1);
}

.lt-pipeline-last {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Priority badges — brand palette only, no red/green */
.lt-priority {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .lt-priority { letter-spacing: 0; }

.lt-priority--high {
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 28%, transparent);
}

.lt-priority--med {
  color: var(--color-text-dim);
  background-color: color-mix(in srgb, var(--color-stone-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent);
}

.lt-priority--low {
  color: var(--color-text-muted);
  background-color: color-mix(in srgb, var(--color-muted) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-muted) 16%, transparent);
}

/* Stage chips */
.lt-stage {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .lt-stage { letter-spacing: 0; }

.lt-stage--new       { color: var(--color-text-muted); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.lt-stage--contacted { color: var(--color-text-dim); background-color: color-mix(in srgb, var(--color-stone-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent); }
.lt-stage--qualified { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.lt-stage--proposal  { color: var(--color-champagne-soft); background-color: color-mix(in srgb, var(--color-champagne-soft) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne-soft) 28%, transparent); }

/* Lead table */
.lt-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.lt-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.lt-table thead {
  background-color: var(--color-bg-elevated);
}

.lt-table th {
  text-align: start;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

html[lang="ar"] .lt-table th { letter-spacing: 0; }

.lt-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: var(--leading-snug);
  vertical-align: top;
}

.lt-table tbody tr:last-child td {
  border-block-end: none;
}

.lt-table-company {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.lt-table-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

.lt-missing {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
  display: inline-block;
}

/* Next actions panel */
.lt-next-actions {
  display: grid;
  gap: var(--space-3);
}

.lt-next-action-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.lt-next-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-block-start: 0.3em;
  flex-shrink: 0;
}

.lt-next-action-dot--high { background-color: var(--color-champagne); }
.lt-next-action-dot--med  { background-color: var(--color-stone-2); }
.lt-next-action-dot--low  { background-color: var(--color-muted); }

.lt-next-action-body {
  display: grid;
  gap: var(--space-1);
}

.lt-next-action-company {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.lt-next-action-task {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Customize section */
.lt-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.lt-customize-item {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.lt-customize-icon {
  font-size: var(--text-xl);
  line-height: 1;
  margin-block-end: var(--space-1);
}

.lt-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.lt-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .lt-customize-body {
  line-height: var(--leading-relaxed);
}

/* Back link */
.lt-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  padding-block: var(--space-2);
}

.lt-back-link:hover {
  color: var(--color-accent);
}

/* Demo hero badge row */
.lt-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* Responsive */
@media (max-width: 56em) {
  .lt-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30em) {
  .lt-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lt-next-action-item {
    grid-template-columns: 8px 1fr;
  }

  .lt-next-action-item .lt-priority {
    display: none;
  }
}


/* ==========================================================================
   7d. Internal Business System Demo Page (.ibs-*)
   Namespaced classes for demo-internal-system.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.ibs-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* KPI summary grid — 4-column, collapses to 2×2 on mobile */
.ibs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.ibs-kpi-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.ibs-kpi-num {
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
}

.ibs-kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* Stage board — 5 columns, horizontally scrollable on mobile */
.ibs-board-wrap {
  overflow-x: auto;
  padding-block-end: var(--space-4);
}

.ibs-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  min-width: 800px;
}

.ibs-board-col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.ibs-board-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-border);
  margin-block-end: var(--space-1);
}

.ibs-board-col-header--progress { border-block-end-color: color-mix(in srgb, var(--color-stone-2) 55%, transparent); }
.ibs-board-col-header--awaiting { border-block-end-color: color-mix(in srgb, var(--color-champagne) 35%, transparent); }
.ibs-board-col-header--review   { border-block-end-color: color-mix(in srgb, var(--color-champagne) 65%, transparent); }
.ibs-board-col-header--done     { border-block-end-color: color-mix(in srgb, var(--color-stone-2) 30%, transparent); }

.ibs-board-stage-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  flex: 1;
}

.ibs-board-count {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Request cards in board columns */
.ibs-request-card {
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.ibs-request-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.ibs-request-dept {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ibs-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-1);
}

.ibs-request-action {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

/* Empty state for columns with no requests */
.ibs-board-empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Stage chips — same token palette as .lt-stage--* */
.ibs-stage {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .ibs-stage { letter-spacing: 0; }

.ibs-stage--incoming { color: var(--color-text-muted); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.ibs-stage--progress { color: var(--color-text-dim); background-color: color-mix(in srgb, var(--color-stone-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent); }
.ibs-stage--awaiting { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.ibs-stage--review   { color: var(--color-champagne-soft); background-color: color-mix(in srgb, var(--color-champagne-soft) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne-soft) 28%, transparent); }
.ibs-stage--done     { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 14%, transparent); }

/* Active requests table */
.ibs-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.ibs-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ibs-table thead {
  background-color: var(--color-bg-elevated);
}

.ibs-table th {
  text-align: start;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

html[lang="ar"] .ibs-table th { letter-spacing: 0; }

.ibs-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: var(--leading-snug);
  vertical-align: top;
}

.ibs-table tbody tr:last-child td {
  border-block-end: none;
}

.ibs-table-req-name {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.ibs-table-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* Missing information panel */
.ibs-missing-panel {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.ibs-missing-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ibs-missing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-block-start: 0.35em;
  flex-shrink: 0;
}

.ibs-missing-dot--high { background-color: var(--color-champagne); }
.ibs-missing-dot--med  { background-color: var(--color-stone-2); }

.ibs-missing-body { display: grid; gap: var(--space-1); }

.ibs-missing-request {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.ibs-missing-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Owner decision queue */
.ibs-decision-queue {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.ibs-decision-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background-color: color-mix(in srgb, var(--color-champagne) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 20%, transparent);
  border-radius: var(--radius-lg);
}

.ibs-decision-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-champagne);
  margin-block-start: 0.35em;
  flex-shrink: 0;
}

.ibs-decision-body { display: grid; gap: var(--space-1); }

.ibs-decision-request {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.ibs-decision-action {
  font-size: var(--text-sm);
  color: var(--color-champagne-soft);
}

.ibs-decision-context {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* Task checklist — static visual only, no JS */
.ibs-task-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.ibs-task-item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  align-items: start;
}

/* Visual-only checkbox decoration — no interactive state */
.ibs-task-item::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--color-champagne) 40%, transparent);
  border-radius: 3px;
  margin-block-start: 0.15em;
  flex-shrink: 0;
}

.ibs-task-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-block-start: var(--space-1);
}

/* Decision log preview */
.ibs-log-list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.ibs-log-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ibs-log-date {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.ibs-log-body { display: grid; gap: var(--space-1); }

.ibs-log-decision {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.ibs-log-link {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Customize section */
.ibs-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.ibs-customize-item {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.ibs-customize-icon {
  font-size: var(--text-xl);
  line-height: 1;
  margin-block-end: var(--space-1);
}

.ibs-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.ibs-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .ibs-customize-body {
  line-height: var(--leading-relaxed);
}

/* Responsive */
@media (max-width: 56em) {
  .ibs-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30em) {
  .ibs-log-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}


/* ==========================================================================
   7e. Data Analysis Report Demo Page (.dar-*)
   Namespaced classes for demo-data-report.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.dar-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* KPI summary grid */
.dar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.dar-kpi-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.dar-kpi-num {
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
}

.dar-kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.dar-kpi-cue {
  font-size: var(--text-xs);
  margin-block-start: var(--space-1);
}

/* Report table */
.dar-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.dar-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dar-table thead {
  background-color: var(--color-bg-elevated);
}

.dar-table th {
  text-align: start;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

html[lang="ar"] .dar-table th { letter-spacing: 0; }

.dar-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: var(--leading-snug);
  vertical-align: top;
}

.dar-table tbody tr:last-child td { border-block-end: none; }

.dar-table-cat { font-weight: var(--weight-bold); }

.dar-table-means {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* Neutral status chip */
.dar-status {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

html[lang="ar"] .dar-status { letter-spacing: 0; }

/* Insight cards */
.dar-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-6);
}

.dar-insight-card {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.dar-insight-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.dar-insight-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .dar-insight-body { line-height: var(--leading-relaxed); }

/* Recommendation list */
.dar-reco-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.dar-reco-item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  align-items: start;
}

.dar-reco-item::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--color-champagne) 40%, transparent);
  border-radius: 3px;
  margin-block-start: 0.15em;
  flex-shrink: 0;
}

.dar-reco-title {
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.dar-reco-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* Risk / opportunity note cards */
.dar-notes-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin-block-start: var(--space-6);
}

.dar-note-group {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.dar-note-group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
  text-transform: uppercase;
}

html[lang="ar"] .dar-note-group-label { letter-spacing: 0; text-transform: none; }

.dar-note-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.dar-note-card--risk {
  background-color: color-mix(in srgb, var(--color-stone-2) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent);
}

.dar-note-card--opportunity {
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 18%, transparent);
}

.dar-note-body {
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Data quality checklist */
.dar-quality-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-2);
}

.dar-quality-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.dar-quality-check {
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.dar-quality-state {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}

.dar-quality-note {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  text-align: start;
}

/* Customize grid */
.dar-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.dar-customize-item {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.dar-customize-icon {
  font-size: var(--text-xl);
  line-height: 1;
  margin-block-end: var(--space-1);
}

.dar-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.dar-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .dar-customize-body { line-height: var(--leading-relaxed); }

/* Responsive */
@media (max-width: 56em) {
  .dar-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dar-insight-grid { grid-template-columns: 1fr; }
  .dar-notes-section { grid-template-columns: 1fr; }
}

@media (max-width: 30em) {
  .dar-quality-item { grid-template-columns: 1fr; gap: var(--space-2); }
}


/* ==========================================================================
   7f. Document Automation Demo Page (.doa-*)
   Namespaced classes for demo-document-automation.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.doa-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* KPI summary grid — 4-column, collapses to 2×2 on mobile */
.doa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.doa-kpi-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.doa-kpi-num {
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
}

.doa-kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.doa-kpi-cue {
  font-size: var(--text-xs);
  margin-block-start: var(--space-1);
}

/* Document request board — responsive card grid */
.doa-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-6);
}

.doa-doc-card {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.doa-doc-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.doa-doc-type {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.doa-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.doa-doc-action {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-block-start: var(--space-1);
}

/* Stage chips — token-based tints only; no red/green traffic lights */
.doa-stage {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .doa-stage { letter-spacing: 0; }

.doa-stage--inputs   { color: var(--color-text-muted); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.doa-stage--drafting { color: var(--color-text-dim); background-color: color-mix(in srgb, var(--color-stone-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 20%, transparent); }
.doa-stage--review   { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.doa-stage--approval { color: var(--color-champagne-soft); background-color: color-mix(in srgb, var(--color-champagne-soft) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne-soft) 25%, transparent); }
.doa-stage--ready    { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 7%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 14%, transparent); }

/* Sample document outline preview — section-heading skeleton only */
.doa-outline-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: color-mix(in srgb, var(--color-stone-2) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
  line-height: var(--leading-relaxed);
}

.doa-outline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  counter-reset: outline-counter;
}

.doa-outline-item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-items: start;
  counter-increment: outline-counter;
}

.doa-outline-item::before {
  content: counter(outline-counter, decimal-leading-zero);
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  padding-block-start: 0.15em;
}

.doa-outline-head {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.doa-outline-placeholder {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  font-style: italic;
  margin-block-start: var(--space-1);
  line-height: var(--leading-relaxed);
}

/* Required inputs checklist */
.doa-inputs-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.doa-input-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.doa-input-state {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .doa-input-state { letter-spacing: 0; }

.doa-input-state--provided {
  color: var(--color-text-muted);
  background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent);
}

.doa-input-state--missing {
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent);
}

/* Review and readiness panel */
.doa-readiness-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.doa-readiness-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.doa-readiness-state {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

html[lang="ar"] .doa-readiness-state { letter-spacing: 0; }

/* Missing information panel — modeled on .ibs-missing-* */
.doa-missing-panel {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.doa-missing-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.doa-missing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-block-start: 0.35em;
  flex-shrink: 0;
}

.doa-missing-dot--high { background-color: var(--color-champagne); }
.doa-missing-dot--med  { background-color: var(--color-stone-2); }

.doa-missing-body { display: grid; gap: var(--space-1); }

.doa-missing-request {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.doa-missing-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Example document timeline */
.doa-timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: 0;
}

.doa-timeline-item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.doa-timeline-item:last-child { border-block-end: none; }

.doa-timeline-marker {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  padding-block-start: 0.15em;
}

.doa-timeline-body { display: grid; gap: var(--space-1); }

.doa-timeline-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.doa-timeline-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .doa-timeline-desc { line-height: var(--leading-relaxed); }

/* Customize grid */
.doa-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.doa-customize-item {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.doa-customize-icon {
  font-size: var(--text-xl);
  line-height: 1;
  margin-block-end: var(--space-1);
}

.doa-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.doa-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .doa-customize-body { line-height: var(--leading-relaxed); }

/* Responsive */
@media (max-width: 56em) {
  .doa-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30em) {
  .doa-readiness-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .doa-input-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .doa-timeline-item { grid-template-columns: 4.5rem 1fr; }
}


/* ==========================================================================
   7g. Company Brain / Knowledge Base Demo Page (.cb-*)
   Namespaced classes for demo-company-brain.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.cb-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* KPI summary grid — 4-column, collapses to 2×2 on mobile */
.cb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-8);
}

.cb-kpi-card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.cb-kpi-num {
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
}

.cb-kpi-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.cb-kpi-cue {
  font-size: var(--text-xs);
  margin-block-start: var(--space-1);
}

/* Knowledge topic board — responsive card grid */
.cb-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-6);
}

.cb-topic-card {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.cb-topic-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.cb-topic-cat {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cb-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.cb-topic-action {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-block-start: var(--space-1);
}

/* Status chips — token-based tints only; no red/green traffic lights */
.cb-status {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .cb-status { letter-spacing: 0; }

.cb-status--draft    { color: var(--color-text-muted); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.cb-status--review   { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.cb-status--update   { color: var(--color-champagne-soft); background-color: color-mix(in srgb, var(--color-champagne-soft) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne-soft) 25%, transparent); }
.cb-status--approved { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent); }

/* Ready-for-use chips — calm token tints only */
.cb-ready {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .cb-ready { letter-spacing: 0; }

.cb-ready--yes  { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent); }
.cb-ready--soon { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.cb-ready--no   { color: var(--color-text-dim); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); }

/* Repeated questions queue */
.cb-queue {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.cb-question-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cb-question-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.cb-question-link {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-block-start: var(--space-1);
}

.cb-answer-status {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

html[lang="ar"] .cb-answer-status { letter-spacing: 0; }

.cb-answer-status--ok     { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent); }
.cb-answer-status--review { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }
.cb-answer-status--update { color: var(--color-champagne-soft); background-color: color-mix(in srgb, var(--color-champagne-soft) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne-soft) 25%, transparent); }

/* Sample answer preview — static, person-approved entry */
.cb-answer-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background-color: color-mix(in srgb, var(--color-stone-2) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 18%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.cb-answer-card {
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-block-start: var(--space-6);
}

.cb-answer-body {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-arabic);
}

html[lang="en"] .cb-answer-body { line-height: var(--leading-relaxed); }

/* Source notes grid */
.cb-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-block-start: var(--space-6);
}

.cb-source-card {
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.cb-source-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.cb-source-count {
  font-family: var(--font-latin);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1;
}

/* Missing knowledge gaps panel */
.cb-gaps-panel {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.cb-gap-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cb-gap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-block-start: 0.35em;
  flex-shrink: 0;
}

.cb-gap-dot--high { background-color: var(--color-champagne); }
.cb-gap-dot--med  { background-color: var(--color-stone-2); }

.cb-gap-body { display: grid; gap: var(--space-1); }

.cb-gap-topic {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.cb-gap-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .cb-gap-info { line-height: var(--leading-relaxed); }

/* Review & approval status list */
.cb-review-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.cb-review-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.cb-review-state {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

html[lang="ar"] .cb-review-state { letter-spacing: 0; }

/* Knowledge freshness checklist */
.cb-fresh-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.cb-fresh-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.cb-fresh-state {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

html[lang="ar"] .cb-fresh-state { letter-spacing: 0; }

.cb-fresh-state--yes { color: var(--color-text-muted); background-color: color-mix(in srgb, var(--color-stone-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent); }
.cb-fresh-state--no  { color: var(--color-champagne); background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent); }

/* Customize grid */
.cb-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-block-start: var(--space-8);
}

.cb-customize-item {
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.cb-customize-icon {
  font-size: var(--text-xl);
  color: var(--color-accent);
  line-height: 1;
}

.cb-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.cb-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .cb-customize-body { line-height: var(--leading-relaxed); }

/* Responsive */
@media (max-width: 56em) {
  .cb-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30em) {
  .cb-review-item   { grid-template-columns: 1fr; gap: var(--space-2); }
  .cb-fresh-item    { grid-template-columns: 1fr; gap: var(--space-2); }
  .cb-question-item { grid-template-columns: 1fr; gap: var(--space-2); }
}


/* ==========================================================================
   7h. Phase A1 Visual Upgrades — Charts (.dar-chart-*) + Stage Strip (.lt-stage-strip)
   ========================================================================== */

/* ---- Data Analysis: static sample chart grid ---- */

.dar-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block-start: var(--space-2);
}

.dar-chart-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dar-chart-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: var(--leading-snug);
}

html[lang="ar"] .dar-chart-title {
  text-transform: none;
  letter-spacing: 0;
}

.dar-chart-watermark {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.6;
  text-align: center;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-3);
  margin-block-start: auto;
}

/* Bar chart */

.dar-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.dar-chart-bar-track {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 100px;
  border-block-end: 1px solid var(--color-border);
  direction: ltr;
}

.dar-chart-bar {
  flex: 1;
  background-color: var(--color-stone-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 4px;
}

.dar-chart-bar--accent {
  background-color: var(--color-champagne-soft);
}

.dar-chart-bar-labels {
  display: flex;
  direction: ltr;
  padding-block-start: var(--space-2);
  gap: var(--space-2);
}

.dar-chart-bar-labels span {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* Trend line */

.dar-chart-line-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  color: var(--color-champagne);
}

.dar-chart-line-svg {
  width: 100%;
  height: 100px;
  display: block;
}

.dar-chart-line-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  direction: ltr;
}

/* Donut chart */

.dar-chart-donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
}

.dar-chart-donut {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: conic-gradient(
    var(--color-stone-2) 0deg 212deg,
    var(--color-champagne-soft) 212deg 288deg,
    var(--color-champagne) 288deg 360deg
  );
  position: relative;
}

.dar-chart-donut::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-surface);
}

.dar-chart-donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.dar-chart-donut-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.dar-chart-donut-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-block-start: 3px;
}

.dar-chart-donut-dot--a { background-color: var(--color-stone-2); }
.dar-chart-donut-dot--b { background-color: var(--color-champagne-soft); }
.dar-chart-donut-dot--c { background-color: var(--color-champagne); }

.dar-chart-donut-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* Chart grid responsive */

@media (max-width: 56em) {
  .dar-chart-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 36em) {
  .dar-chart-grid { grid-template-columns: 1fr; }
}

/* ---- Lead Tracking: Stage funnel summary strip ---- */

.lt-stage-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-5);
  direction: ltr;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.lt-stage-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.lt-stage-strip-count {
  font-family: var(--font-latin);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-text-dim);
  direction: ltr;
  unicode-bidi: isolate;
}

.lt-stage-strip-item--accent .lt-stage-strip-count {
  color: var(--color-champagne);
}

.lt-stage-strip-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  line-height: var(--leading-snug);
}

.lt-stage-strip-sep {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-inline-start: 7px solid var(--color-border-strong);
  align-self: center;
  opacity: 0.45;
}

@media (max-width: 40em) {
  .lt-stage-strip {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .lt-stage-strip-count {
    font-size: var(--text-xl);
  }
}


/* ==========================================================================
   7i. Phase A2 Visual Upgrade — Workspace Shell (.ibs-workspace-*)
   Namespaced classes for demo-internal-system.html workspace section only.
   ========================================================================== */

/* Intro paragraph above the frame */
.ibs-workspace-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
  margin-block-end: 0;
}

/* Outer frame — bordered container with chrome header */
.ibs-workspace-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-surface);
  margin-block-start: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* Chrome bar */
.ibs-workspace-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-elevated);
  border-block-end: 1px solid var(--color-border);
}

.ibs-workspace-chrome-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.ibs-workspace-chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-border-strong);
  opacity: 0.45;
}

.ibs-workspace-chrome-title {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
}

html[lang="ar"] .ibs-workspace-chrome-title { letter-spacing: 0; }

.ibs-workspace-chrome-badge {
  font-size: var(--text-xs);
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.6rem;
  flex-shrink: 0;
}

/* 3-panel shell layout */
.ibs-workspace-shell {
  display: grid;
  grid-template-columns: 180px 1fr 240px;
  min-height: 380px;
}

/* Nav rail — inline-start side (right in RTL) */
.ibs-workspace-nav {
  border-inline-end: 1px solid var(--color-border);
  padding-block: var(--space-4);
  background-color: var(--color-bg);
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.ibs-workspace-nav-label {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding: 0 var(--space-4) var(--space-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[lang="ar"] .ibs-workspace-nav-label {
  letter-spacing: 0;
  text-transform: none;
}

.ibs-workspace-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: default;
  border-inline-end: 2px solid transparent;
}

.ibs-workspace-nav-item--active {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  background-color: color-mix(in srgb, var(--color-champagne) 6%, transparent);
  border-inline-end-color: var(--color-champagne);
}

.ibs-workspace-nav-count {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  padding: 0.05rem 0.45rem;
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline-start: auto;
  color: var(--color-text-dim);
  flex-shrink: 0;
}

.ibs-workspace-nav-item--active .ibs-workspace-nav-count {
  background-color: color-mix(in srgb, var(--color-champagne) 12%, transparent);
  color: var(--color-champagne);
}

/* Main work queue — center column */
.ibs-workspace-main {
  overflow: hidden;
  display: grid;
  align-content: start;
}

.ibs-workspace-main-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
}

.ibs-workspace-main-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  flex: 1;
}

.ibs-workspace-main-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Work queue rows */
.ibs-workspace-queue {
  display: grid;
}

.ibs-workspace-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  align-items: start;
  cursor: default;
  border-inline-end: 2px solid transparent;
}

.ibs-workspace-row:last-child {
  border-block-end: none;
}

.ibs-workspace-row--selected {
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  border-inline-end-color: var(--color-champagne);
}

.ibs-workspace-row-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.ibs-workspace-row-dept {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

.ibs-workspace-row-action {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-block-start: var(--space-1);
  line-height: var(--leading-snug);
}

.ibs-workspace-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

/* Detail panel — inline-end side (left in RTL) */
.ibs-workspace-detail {
  border-inline-start: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.ibs-workspace-detail-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.ibs-workspace-detail-field {
  display: grid;
  gap: var(--space-1);
}

.ibs-workspace-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[lang="ar"] .ibs-workspace-detail-label {
  letter-spacing: 0;
  text-transform: none;
}

.ibs-workspace-detail-value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.ibs-workspace-detail-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-3);
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 18%, transparent);
  border-radius: var(--radius-md);
  line-height: var(--leading-arabic);
}

html[lang="en"] .ibs-workspace-detail-note {
  line-height: var(--leading-relaxed);
}

/* Watermark footer bar */
.ibs-workspace-footer {
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ibs-workspace-watermark {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.65;
}

/* Responsive — hide detail at tablet, hide nav at mobile */
@media (max-width: 56em) {
  .ibs-workspace-shell {
    grid-template-columns: 140px 1fr;
    min-height: 300px;
  }
  .ibs-workspace-detail {
    display: none;
  }
}

@media (max-width: 36em) {
  .ibs-workspace-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ibs-workspace-nav {
    display: none;
  }
}


/* ==========================================================================
   7j. Phase A3 Visual Upgrade — Document Workflow Preview (.doa-workflow-*)
   Namespaced additions for demo-document-automation.html Phase A3 only.
   ========================================================================== */

/* Intro paragraph above the frame */
.doa-workflow-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
  margin-block-end: 0;
}

/* Outer frame */
.doa-workflow-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-surface);
  margin-block-start: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* Chrome bar */
.doa-workflow-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-elevated);
  border-block-end: 1px solid var(--color-border);
}

.doa-workflow-chrome-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.doa-workflow-chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-border-strong);
  opacity: 0.45;
}

.doa-workflow-chrome-title {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
}

html[lang="ar"] .doa-workflow-chrome-title { letter-spacing: 0; }

.doa-workflow-chrome-badge {
  font-size: var(--text-xs);
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.6rem;
  flex-shrink: 0;
}

/* 3-column grid: source-stack | arrow | paper */
.doa-workflow-grid {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  align-items: center;
}

/* Source notes stack */
.doa-source-stack {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.doa-source-label {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block-end: var(--space-2);
}

html[lang="ar"] .doa-source-label {
  letter-spacing: 0;
  text-transform: none;
}

.doa-source-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.doa-source-card--highlight {
  border-color: color-mix(in srgb, var(--color-champagne) 28%, transparent);
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
}

.doa-source-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.doa-source-card-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.doa-source-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Flow arrow — uses border-inline-start for RTL-correct direction */
.doa-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.doa-flow-arrow-icon {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-inline-start: 11px solid var(--color-champagne);
  opacity: 0.55;
  flex-shrink: 0;
}

.doa-flow-arrow-label {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  text-align: center;
  line-height: var(--leading-snug);
}

/* Paper silhouette — A4 document shape, pure CSS placeholder blocks */
.doa-paper-preview {
  position: relative;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  overflow: hidden;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-height: 300px;
  box-shadow: var(--shadow-md);
}

/* Header accent bar — champagne stripe at top */
.doa-paper-header-block {
  height: 4px;
  background-color: var(--color-champagne);
  border-radius: var(--radius-sm);
  width: 55%;
  opacity: 0.65;
}

/* Title placeholder — wider bar */
.doa-paper-title-line {
  height: 10px;
  background-color: color-mix(in srgb, var(--color-stone-2) 28%, transparent);
  border-radius: var(--radius-sm);
  width: 72%;
}

/* Section container — separator + bars + lines */
.doa-paper-section {
  display: grid;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.doa-paper-section-bar {
  height: 6px;
  background-color: color-mix(in srgb, var(--color-champagne-soft) 22%, transparent);
  border-radius: var(--radius-sm);
  width: 38%;
}

.doa-paper-line {
  height: 4px;
  background-color: color-mix(in srgb, var(--color-stone-2) 15%, transparent);
  border-radius: var(--radius-sm);
  width: 100%;
}

.doa-paper-line--med   { width: 72%; }
.doa-paper-line--short { width: 50%; }

/* Review note box with visible label */
.doa-paper-note {
  margin-block-start: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-champagne) 5%, transparent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  line-height: var(--leading-snug);
}

/* Approval/signature footer — dashed separator */
.doa-paper-footer {
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed color-mix(in srgb, var(--color-border) 75%, transparent);
  display: grid;
  gap: var(--space-2);
}

.doa-paper-footer-line {
  height: 4px;
  background-color: color-mix(in srgb, var(--color-stone-2) 12%, transparent);
  border-radius: var(--radius-sm);
  width: 48%;
}

.doa-paper-footer-line--short { width: 28%; }

/* Diagonal "SAMPLE/تجريبي" watermark overlay */
.doa-paper-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.doa-paper-watermark span {
  font-family: var(--font-latin);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  opacity: 0.08;
  transform: rotate(-25deg);
  letter-spacing: 0.18em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  user-select: none;
}

/* Workflow frame footer watermark bar */
.doa-workflow-footer {
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doa-workflow-watermark {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.65;
}

/* Responsive */
@media (max-width: 56em) {
  .doa-workflow-grid {
    grid-template-columns: 1fr 34px 1fr;
    padding: var(--space-4);
    gap: var(--space-3);
  }
}

@media (max-width: 40em) {
  .doa-workflow-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .doa-flow-arrow {
    flex-direction: row;
    justify-content: center;
  }
  .doa-flow-arrow-icon {
    display: none;
  }
  .doa-paper-preview {
    min-height: 200px;
  }
}


/* ==========================================================================
   7k. Business Website Demo Page (.bws-*)
   Namespaced classes for demo-business-website.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.bws-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* Structure map — anatomy overview of the 6 website blocks */
.bws-map {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-block-start: var(--space-8);
}

.bws-map-item {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.bws-map-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  padding-block-start: 0.2em;
}

.bws-map-body {
  display: grid;
  gap: var(--space-1);
}

.bws-map-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.bws-map-purpose {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .bws-map-purpose { line-height: var(--leading-relaxed); }

/* Preview frame — visibly frames a "sample preview" block */
.bws-preview {
  margin-block-start: var(--space-6);
}

.bws-preview-frame {
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

/* Chrome bar for preview frames */
.bws-preview-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-elevated);
  border-block-end: 1px solid var(--color-border);
}

.bws-preview-chrome-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.bws-preview-chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-border-strong);
  opacity: 0.45;
}

.bws-preview-chrome-label {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
}

html[lang="ar"] .bws-preview-chrome-label { letter-spacing: 0; }

.bws-preview-chrome-badge {
  font-size: var(--text-xs);
  color: var(--color-champagne);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 22%, transparent);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.6rem;
  flex-shrink: 0;
}

/* Annotation chip — explains a preview block's role */
.bws-annotation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: color-mix(in srgb, var(--color-stone-2) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stone-2) 16%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block-start: var(--space-3);
}

html[lang="en"] .bws-annotation { line-height: var(--leading-relaxed); }

/* Hero preview — sample homepage hero block */
.bws-hero-preview {
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}

.bws-hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-dim);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-4);
  text-transform: uppercase;
}

html[lang="ar"] .bws-hero-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

.bws-hero-wordmark {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-6);
}

.bws-hero-promise {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin-block-end: var(--space-3);
  max-width: 38ch;
}

.bws-hero-support {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  max-width: 44ch;
  margin-block-end: var(--space-6);
}

html[lang="en"] .bws-hero-support { line-height: var(--leading-relaxed); }

.bws-hero-action {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}

.bws-hero-action-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-block-start: var(--space-2);
}

/* Services grid */
.bws-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block-start: var(--space-6);
}

.bws-service-card {
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.bws-service-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
}

.bws-service-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.bws-service-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .bws-service-desc { line-height: var(--leading-relaxed); }

/* Trust & clarity grid — labelled structure placeholders */
.bws-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-block-start: var(--space-6);
}

.bws-trust-item {
  padding: var(--space-5);
  border: 1.5px dashed color-mix(in srgb, var(--color-border-strong) 55%, transparent);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.bws-trust-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.bws-trust-caption {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  font-style: italic;
}

/* Process steps */
.bws-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.bws-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-items: start;
}

.bws-step-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-champagne) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bws-step-body {
  display: grid;
  gap: var(--space-1);
}

.bws-step-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.bws-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .bws-step-desc { line-height: var(--leading-relaxed); }

/* Contact path illustration */
.bws-contact-path {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-5);
}

.bws-contact-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  direction: ltr;
}

.bws-contact-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.bws-contact-step-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-champagne) 30%, transparent);
  background-color: color-mix(in srgb, var(--color-champagne) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.bws-contact-step-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bws-contact-arrow {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  flex-shrink: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.bws-contact-action {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  pointer-events: none;
  cursor: default;
}

/* Notes panel — bilingual / structure note */
.bws-notes {
  padding: var(--space-6);
  background-color: color-mix(in srgb, var(--color-champagne) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 18%, transparent);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.bws-notes-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.bws-notes-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .bws-notes-body { line-height: var(--leading-relaxed); }

.bws-notes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bws-notes-tag {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding: 0.2rem 0.65rem;
  background-color: color-mix(in srgb, var(--color-champagne) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-champagne) 20%, transparent);
  border-radius: var(--radius-full);
}

/* Customize grid */
.bws-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-block-start: var(--space-8);
}

.bws-customize-item {
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.bws-customize-num {
  font-family: var(--font-latin);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.bws-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.bws-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
}

html[lang="en"] .bws-customize-body { line-height: var(--leading-relaxed); }

/* Responsive */
@media (max-width: 56em) {
  .bws-map { grid-template-columns: repeat(2, 1fr); }
  .bws-service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 36em) {
  .bws-contact-path { padding: var(--space-4); }
  .bws-contact-steps { gap: var(--space-3); }
}

@media (max-width: 30em) {
  .bws-map { grid-template-columns: 1fr; }
  .bws-trust-grid { grid-template-columns: 1fr; }
  .bws-service-grid { grid-template-columns: 1fr; }
  .bws-step { grid-template-columns: 2rem 1fr; }
}


/* ==========================================================================
   7l. Landing Page Demo Page (.lp-*)
   Namespaced classes for demo-landing-page.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero badge row */
.lp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
}

/* Anatomy map — overview of the 6 landing-page blocks */
.lp-map {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-block-start: var(--space-8);
}

.lp-map-item {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.lp-map-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  padding-block-start: 0.2em;
}

.lp-map-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-snug);
}

.lp-map-purpose {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-map-purpose { line-height: var(--leading-relaxed); }

/* Preview frame — simple bordered container, no browser chrome */
.lp-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-surface);
  margin-block-start: var(--space-6);
}

/* Annotation — explains the block's role, sits below the preview */
.lp-annotation {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin-block-start: var(--space-4);
}

html[lang="en"] .lp-annotation { line-height: var(--leading-relaxed); }

.lp-annotation--note {
  border-color: var(--color-border-accent);
}

.lp-preview-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-block-start: var(--space-3);
  opacity: 0.7;
}

/* Sample hero offer preview */
.lp-hero-preview {
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.lp-hero-offer {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
}

.lp-hero-support {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-hero-support { line-height: var(--leading-relaxed); }

.lp-hero-action {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-champagne);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
  user-select: none;
}

/* Pain block */
.lp-pain {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lp-pain-line {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-arabic);
  margin: 0;
}

html[lang="en"] .lp-pain-line { line-height: var(--leading-relaxed); }

/* How it works */
.lp-how-wrap {
  padding: var(--space-8);
}

.lp-how {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lp-how-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.lp-how-num {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-champagne) 12%, transparent);
  border-radius: var(--radius-full);
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
  flex-shrink: 0;
}

.lp-how-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-snug);
}

.lp-how-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-how-body { line-height: var(--leading-relaxed); }

/* Trust grid — labelled structure placeholders, dashed borders */
.lp-trust-wrap {
  padding: var(--space-8);
}

.lp-trust-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1rem);
}

.lp-trust-item {
  padding: var(--space-5);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lp-trust-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.lp-trust-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-trust-caption { line-height: var(--leading-relaxed); }

/* CTA preview — single-action centered block */
.lp-cta-preview {
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.lp-cta-ask {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.lp-cta-action {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-champagne);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
  user-select: none;
}

.lp-cta-reassure {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-cta-reassure { line-height: var(--leading-relaxed); }

/* Lead path — annotated 3-node diagram */
.lp-leadpath-wrap {
  padding: var(--space-8);
}

.lp-leadpath {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.lp-leadpath-node {
  flex: 1;
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lp-leadpath-node-num {
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  direction: ltr;
  unicode-bidi: isolate;
}

.lp-leadpath-node-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.lp-leadpath-node-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-arabic);
}

html[lang="en"] .lp-leadpath-node-body { line-height: var(--leading-relaxed); }

/* Directional arrow between nodes — adapts to language direction */
.lp-leadpath-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-lg);
  color: var(--color-champagne);
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  min-width: 1.5rem;
}

html[lang="ar"] .lp-leadpath-arrow::before { content: "←"; }
html[lang="en"] .lp-leadpath-arrow::before { content: "→"; }

/* Mobile-first notes panel */
.lp-notes {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-block-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lp-notes > p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-arabic);
  margin: 0;
}

html[lang="en"] .lp-notes > p { line-height: var(--leading-relaxed); }

.lp-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lp-notes-list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  padding-inline-start: var(--space-5);
  position: relative;
}

.lp-notes-list li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-champagne);
}

html[lang="en"] .lp-notes-list li { line-height: var(--leading-relaxed); }

/* How Ruya would customize — grid of 5 items */
.lp-customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-block-start: var(--space-8);
}

.lp-customize-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.lp-customize-num {
  font-family: var(--font-latin);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.lp-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.lp-customize-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-arabic);
  margin: 0;
}

html[lang="en"] .lp-customize-body { line-height: var(--leading-relaxed); }

/* Responsive */
@media (max-width: 56em) {
  .lp-map { grid-template-columns: repeat(2, 1fr); }
  .lp-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40em) {
  .lp-leadpath { flex-direction: column; }
  html[lang="ar"] .lp-leadpath-arrow::before,
  html[lang="en"] .lp-leadpath-arrow::before { content: "↓"; }
}

@media (max-width: 36em) {
  .lp-hero-preview { padding: var(--space-8) var(--space-5); }
  .lp-pain { padding: var(--space-6) var(--space-5); }
  .lp-how-wrap { padding: var(--space-6) var(--space-5); }
  .lp-trust-wrap { padding: var(--space-6) var(--space-5); }
  .lp-leadpath-wrap { padding: var(--space-6) var(--space-5); }
  .lp-cta-preview { padding: var(--space-8) var(--space-5); }
  .lp-notes { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 30em) {
  .lp-map { grid-template-columns: 1fr; }
  .lp-trust-grid { grid-template-columns: 1fr; }
  .lp-hero-offer { font-size: var(--text-lg); }
}


/* ==========================================================================
   7m. Workflow Design Demo Page (.wfd-*)
   Namespaced classes for demo-workflow-design.html only.
   No existing selector is redefined.
   ========================================================================== */

/* Hero */
.wfd-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Overview list */
.wfd-overview-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wfd-overview-list li {
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.wfd-overview-list li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-champagne);
  font-weight: var(--weight-bold);
}

.wfd-scenario-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Stage map */
.wfd-stage-map {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-8);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.wfd-stage {
  flex: 1 1 0;
  min-width: 9rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wfd-stage-num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  letter-spacing: 0.05em;
}

.wfd-stage-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.wfd-stage-purpose {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.wfd-stage-arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--text-xl);
  color: var(--color-border-strong);
  padding: 0 var(--space-2);
}

html[lang="ar"] .wfd-stage-arrow::before { content: "←"; }
html[lang="en"] .wfd-stage-arrow::before { content: "→"; }

@media (max-width: 40em) {
  .wfd-stage-map {
    flex-direction: column;
    overflow-x: visible;
  }

  .wfd-stage {
    min-width: unset;
    width: 100%;
  }

  .wfd-stage-arrow {
    align-self: center;
    padding: var(--space-1) 0;
    font-size: var(--text-lg);
  }

  html[lang="ar"] .wfd-stage-arrow::before,
  html[lang="en"] .wfd-stage-arrow::before { content: "↓"; }
}

/* Inputs & Outputs table */
.wfd-io-table {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wfd-io-header {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-strong);
}

.wfd-io-row {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
}

.wfd-io-row:last-child {
  border-bottom: none;
}

.wfd-io-cell {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}

.wfd-io-header .wfd-io-cell {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wfd-io-cell--stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-inline-end: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

.wfd-io-cell--input {
  border-inline-end: 1px solid var(--color-border);
}

.wfd-io-stage-num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.wfd-io-stage-label {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

@media (max-width: 48em) {
  .wfd-io-header { display: none; }

  .wfd-io-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wfd-io-cell {
    border-inline-end: none;
    border-bottom: 1px solid var(--color-border);
  }

  .wfd-io-cell:last-child {
    border-bottom: none;
  }

  .wfd-io-cell--stage {
    background: var(--color-bg-surface);
    border-inline-end: none;
    font-weight: var(--weight-bold);
  }

  .wfd-io-cell--input::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
  }

  .wfd-io-cell--output::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
  }
}

/* Roles grid */
.wfd-roles-grid {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.wfd-role-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wfd-role-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.wfd-role-label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.wfd-role-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.wfd-role-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
}

.wfd-role-stage {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
  border: 1px solid transparent;
}

.wfd-role-stage--primary {
  background: color-mix(in srgb, var(--color-champagne) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-champagne) 40%, transparent);
  color: var(--color-text);
}

.wfd-role-stage--support {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.wfd-role-stage--none {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-border-strong);
}

.wfd-roles-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.wfd-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.wfd-legend-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.wfd-legend-dot--primary {
  background: color-mix(in srgb, var(--color-champagne) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-champagne) 40%, transparent);
}

.wfd-legend-dot--support {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.wfd-legend-dot--none {
  background: transparent;
  border-color: var(--color-border);
}

@media (max-width: 40em) {
  .wfd-role-stages {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 30em) {
  .wfd-role-stages {
    grid-template-columns: 1fr 1fr;
  }
}

/* Decision points */
.wfd-decisions {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.wfd-decision-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wfd-decision-context {
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.wfd-decision-stage-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wfd-decision-q {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.wfd-decision-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wfd-decision-branch {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wfd-decision-branch--yes {
  border-inline-end: 1px solid var(--color-border);
}

.wfd-branch-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wfd-branch-action {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

@media (max-width: 30em) {
  .wfd-decision-branches {
    grid-template-columns: 1fr;
  }

  .wfd-decision-branch--yes {
    border-inline-end: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* Risks list */
.wfd-risks {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wfd-risk-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.wfd-risk-level {
  flex-shrink: 0;
  min-width: 4.5rem;
  text-align: center;
}

.wfd-risk-body {
  flex: 1;
}

.wfd-risk-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.wfd-risk-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* Handover rules */
.wfd-handovers {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  counter-reset: none;
}

.wfd-handover-item {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wfd-handover-stages {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.wfd-handover-from,
.wfd-handover-to {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.wfd-handover-arrow {
  color: var(--color-champagne);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

html[lang="ar"] .wfd-handover-arrow::before { content: "←"; }
html[lang="en"] .wfd-handover-arrow::before { content: "→"; }

.wfd-handover-rule {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.6;
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-border);
}

/* Pre-build documentation */
.wfd-predocs {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wfd-predoc-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.wfd-predoc-num {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
}

.wfd-predoc-body {
  flex: 1;
  padding-top: var(--space-1);
}

.wfd-predoc-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.wfd-predoc-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* Customize grid */
.wfd-customize-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.wfd-customize-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.wfd-customize-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-champagne);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wfd-customize-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.wfd-customize-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 40em) {
  .wfd-customize-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   7e. Mid-page CTA — Demo pages shared bridge (.demo-mid-cta)
   Applies to all 8 demo pages. No existing selectors modified.
   ========================================================================== */

.demo-mid-cta__inner {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.demo-mid-cta__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0;
}

.demo-mid-cta__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-arabic);
  color: var(--color-text);
  margin: 0;
}

html[lang="en"] .demo-mid-cta__title {
  line-height: var(--leading-relaxed);
}

.demo-mid-cta__text {
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
  margin: 0;
}

html[lang="en"] .demo-mid-cta__text {
  line-height: var(--leading-relaxed);
}

.demo-mid-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}


/* ==========================================================================
   7f. About trust bridge + Process flow summary
   Additive. No existing selectors modified.
   ========================================================================== */

.about-not-bridge {
  margin-block-start: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-arabic);
  color: var(--color-text-muted);
}

html[lang="en"] .about-not-bridge {
  line-height: var(--leading-relaxed);
}

.about-not-bridge-link {
  display: inline-block;
  margin-block-start: var(--space-2);
}

.process-flow-summary__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 var(--space-4);
}

.process-flow-summary__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-flow-summary__step {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.process-flow-summary__step:not(:last-child)::after {
  content: " \2192";
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

html[dir="rtl"] .process-flow-summary__step:not(:last-child)::after {
  content: " \2190";
}


/* ==========================================================================
   8. Print additions
   ========================================================================== */

@media print {
  .page-hero::before,
  .demos-note-card {
    display: none !important;
  }

  .service-entries {
    grid-template-columns: 1fr !important;
  }

  .service-entry-cta {
    display: none !important;
  }
}