/*
 * Systmatk marketing site — Control Field components
 * ---------------------------------------------------------------------------
 * Consumes design tokens from tokens.css exclusively via var(--*). No raw
 * hex, px-color, or hand-picked size/spacing/radius/duration values below —
 * see design-tokens/README.md consumption rules.
 *
 * Written with logical properties throughout (inset-inline/margin-inline/
 * padding-inline/border-inline/text-align: start|end) so the ar/ mirror
 * pages need only a handful of direction-specific overrides at the bottom
 * of this file, per styles.css:1892-1936 RTL precedent.
 * ---------------------------------------------------------------------------
 */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-body);
  letter-spacing: var(--font-body-tracking);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, var(--space-9));
}

/* =================================================================
 * SKIP LINK
 * ================================================================= */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  transform: translateY(-160%);
  background: var(--raw-forest-950);
  color: var(--raw-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-small);
  font: var(--font-ui-sm);
  text-decoration: none;
  transition: transform var(--motion-duration-segment) var(--motion-ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

/* =================================================================
 * TOP NAV — sits on the dark Control Field stage
 * ================================================================= */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--raw-forest-950) 88%, transparent);
  border-block-end: 1px solid var(--color-border);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--raw-white);
  font: var(--font-display-4);
  letter-spacing: var(--font-display-4-tracking);
}

.brand-mark {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-avatar);
  background: var(--raw-accent);
  color: var(--color-accent-on);
  font: var(--font-ui-label);
  letter-spacing: 0;
  text-transform: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
  font: var(--font-ui-sm);
  transition: color var(--motion-duration-segment) var(--motion-ease-standard);
}

.nav-links a:hover {
  color: var(--raw-white);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--raw-white) 6%, transparent);
}

.lang-switch a {
  min-height: 36px;
  padding-inline: var(--space-3);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
  font: var(--font-ui-sm);
}

.lang-switch a.is-current {
  background: var(--raw-white);
  color: var(--raw-forest-950);
}

/* =================================================================
 * BUTTONS
 * ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: var(--font-button);
  letter-spacing: var(--font-button-tracking);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-duration-segment) var(--motion-ease-curve),
              opacity var(--motion-duration-segment) var(--motion-ease-standard);
}

.btn:hover {
  opacity: 0.92;
}

.btn:active {
  transform: scale(0.98);
}

.btn-accent {
  background: var(--raw-accent);
  color: var(--color-accent-on);
}

.btn-ghost-dark {
  background: transparent;
  border-color: var(--color-border);
  color: var(--raw-white);
}

.btn-ghost-dark:hover {
  background: color-mix(in srgb, var(--raw-white) 8%, transparent);
}

.btn-solid-light {
  background: var(--raw-paper);
  color: var(--raw-forest-950);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-outline:hover {
  background: var(--color-surface-sunken);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* =================================================================
 * HERO — dark control stage, orbit ring, staged campaign module
 * ================================================================= */
.hero {
  position: relative;
  background: var(--raw-forest-950);
  color: var(--raw-white);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  align-items: center;
  padding-block: clamp(var(--space-8), 10vw, 140px);
}

.hero-kicker {
  display: inline-block;
  margin-block-end: var(--space-4);
  color: var(--raw-accent);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
}

.hero-copy h1 {
  margin: 0;
  font: var(--font-display-1);
  letter-spacing: var(--font-display-1-tracking);
  max-width: 14ch;
}

.hero-copy p.hero-lede {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
  font: var(--font-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.hero-note {
  margin: var(--space-4) 0 0;
  color: color-mix(in srgb, var(--raw-white) 50%, transparent);
  font: var(--font-ui-caption);
}

/* -- Orbit stage: circular ring behind the staged campaign module -- */
.hero-stage {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-module);
  background: var(--raw-forest-800);
  border: 1px solid var(--color-border);
  overflow: hidden;
  padding: var(--space-6);
}

.hero-stage::before {
  content: "";
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(231, 240, 90, 0.34);
}

.hero-stage::after {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* =================================================================
 * CAMPAIGN MODULE — the one real product module, staged in the hero.
 * Built from real markup (progress arc, queue row, metrics), no
 * screenshots. Content: GCC Legal Partners campaign truth.
 * ================================================================= */
.campaign-module {
  position: relative;
  z-index: 2;
  width: min(400px, 100%);
  padding: var(--space-6);
  border-radius: var(--radius-module);
  background: var(--raw-paper);
  color: var(--raw-ink);
  box-shadow: var(--color-surface-raised-shadow);
}

.campaign-module.is-arriving {
  animation: module-arrive var(--motion-duration-module-arrive) var(--motion-ease-overshoot) both;
}

@keyframes module-arrive {
  0% { transform: translateY(34px) rotate(1.5deg) scale(0.96); }
  58% { transform: translateY(-5px) rotate(-0.4deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-module.is-arriving {
    animation: none;
  }
}

.module-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-kicker);
}

.module-head .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--raw-accent);
  box-shadow: 0 0 0 4px rgba(231, 240, 90, 0.25);
}

.module-head span {
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
  color: var(--tone-success-fg);
}

.module-head b {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-weight: 700;
}

.campaign-module h4 {
  margin: var(--space-4) 0 var(--space-1);
  font: var(--font-display-3);
  letter-spacing: var(--font-display-3-tracking);
}

.campaign-module > p {
  margin: 0;
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

.campaign-progress {
  height: 6px;
  margin: var(--space-5) 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--raw-mist-100);
  overflow: hidden;
}

.campaign-progress span {
  display: block;
  width: var(--progress, 52%);
  height: 100%;
  background: var(--raw-forest-800);
  transform-origin: left;
  border-radius: inherit;
  animation: progress-in var(--motion-duration-progress) var(--motion-ease-curve) both;
}

[dir="rtl"] .campaign-progress span {
  transform-origin: right;
}

@keyframes progress-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-progress span {
    animation: none;
  }
}

.campaign-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--color-border);
}

.metric {
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-inline-end: 1px solid var(--color-border);
}

.metric:last-child {
  border-inline-end: 0;
  padding-inline-end: 0;
}

.metric strong {
  display: block;
  font: var(--font-display-metric);
  letter-spacing: var(--font-display-metric-tracking);
}

.metric span {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
}

.metric.metric-accent strong {
  color: var(--tone-success-fg);
}

.queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--space-4);
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

.queue-row strong {
  color: var(--color-text);
}

/* Dark variant: campaign module hosted directly on a dark surface (used in
   pricing/showcase excerpts) instead of on top of paper. */
.campaign-module.on-dark {
  background: var(--raw-forest-800);
  color: var(--raw-white);
}

.campaign-module.on-dark .module-head b,
.campaign-module.on-dark > p,
.campaign-module.on-dark .metric span,
.campaign-module.on-dark .queue-row {
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
}

.campaign-module.on-dark .metric strong,
.campaign-module.on-dark .queue-row strong {
  color: var(--raw-white);
}

.campaign-module.on-dark .campaign-counts,
.campaign-module.on-dark .metric {
  border-color: var(--color-border);
}

.campaign-module.on-dark .campaign-progress {
  background: rgba(255, 255, 255, 0.14);
}

/* =================================================================
 * SECTION SCAFFOLDING
 * ================================================================= */
section {
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}

.section-light {
  background: var(--color-bg);
  color: var(--color-text);
  border-block-start: 1px solid var(--raw-line);
}

.section-dark {
  background: var(--raw-forest-950);
  color: var(--raw-white);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-5);
  margin-block-end: var(--space-6);
  flex-wrap: wrap;
}

.section-kicker {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-text-kicker);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
}

.section-dark .section-kicker {
  color: var(--raw-accent);
}

h2.section-title {
  margin: 0;
  font: var(--font-display-2);
  letter-spacing: var(--font-display-2-tracking);
  max-width: 18ch;
}

.section-sub {
  margin: 0;
  max-width: 60ch;
  color: var(--color-text-muted);
  font: var(--font-body);
}

.section-dark .section-sub {
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
}

/* =================================================================
 * STEPS (how it works)
 * ================================================================= */
.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-block-start: 1px solid var(--raw-line);
  padding-block-start: var(--space-6);
}

.step .step-num {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--tone-success-fg);
  font: var(--font-display-4);
}

.step h3 {
  margin: 0 0 var(--space-2);
  font: var(--font-display-4);
  letter-spacing: var(--font-display-4-tracking);
}

.step p {
  margin: 0;
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

/* =================================================================
 * PRICING TABLE — 5 plans
 * ================================================================= */
.pricing-scroll {
  overflow-x: auto;
  border-radius: var(--radius-inner);
  border: 1px solid var(--raw-line);
}

table.pricing-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface);
}

table.pricing-table caption {
  text-align: start;
  padding: var(--space-4) var(--space-4) 0;
  color: var(--color-text-muted);
  font: var(--font-ui-caption);
}

table.pricing-table th,
table.pricing-table td {
  text-align: start;
  padding: var(--space-4);
  border-block-start: 1px solid var(--raw-line);
  vertical-align: top;
  font: var(--font-ui-md);
}

table.pricing-table thead th {
  border-block-start: none;
  border-block-end: 1px solid var(--raw-ink);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
  color: var(--color-text-muted);
}

table.pricing-table td.plan-name {
  font: var(--font-display-4);
  letter-spacing: var(--font-display-4-tracking);
}

table.pricing-table td.price,
table.pricing-table th.price {
  font-variant-numeric: tabular-nums;
}

table.pricing-table tr.featured td {
  background: color-mix(in srgb, var(--raw-accent) 14%, var(--color-surface));
}

.plan-foot {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  font: var(--font-ui-caption);
}

.plan-foot a {
  color: var(--tone-success-fg);
  font-weight: 700;
  text-decoration: underline;
}

/* =================================================================
 * FEATURE MATRIX — 14 x 5, horizontally scrollable in own container
 * ================================================================= */
.matrix-scroll {
  overflow-x: auto;
  border-radius: var(--radius-inner);
  border: 1px solid var(--raw-line);
}

table.feature-matrix {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  background: var(--color-surface);
}

table.feature-matrix th,
table.feature-matrix td {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--raw-line);
  vertical-align: top;
  font: var(--font-ui-md);
}

table.feature-matrix thead th {
  border-block-start: none;
  border-block-end: 1px solid var(--raw-ink);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
  color: var(--color-text-muted);
}

table.feature-matrix th[scope="row"] {
  color: var(--color-text-muted);
  font: var(--font-ui-sm);
  text-transform: var(--font-ui-label-transform);
  letter-spacing: 0.04em;
  font-weight: 700;
}

table.feature-matrix th.plan-col {
  font: var(--font-display-4);
  letter-spacing: var(--font-display-4-tracking);
  color: var(--color-text);
  text-transform: none;
}

table.feature-matrix td.featured,
table.feature-matrix th.featured {
  background: color-mix(in srgb, var(--raw-accent) 14%, var(--color-surface));
}

table.feature-matrix .yes {
  color: var(--tone-success-fg);
  font-weight: 700;
}

table.feature-matrix .no {
  color: var(--color-text-muted);
}

.note-box {
  margin-block-start: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-inner);
  border: 1px solid var(--raw-line);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

/* =================================================================
 * FAQ — rule-separated
 * ================================================================= */
.faq-list {
  border-block-start: 1px solid var(--raw-line);
}

.faq-item {
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--raw-line);
}

.faq-item h3 {
  margin: 0 0 var(--space-2);
  font: var(--font-display-4);
  letter-spacing: var(--font-display-4-tracking);
}

.faq-item p {
  margin: 0;
  color: var(--color-text-muted);
  font: var(--font-body);
}

.faq-item a {
  color: var(--tone-success-fg);
  font-weight: 700;
  text-decoration: underline;
}

.section-dark .faq-list,
.section-dark .faq-item {
  border-color: var(--color-border);
}

.section-dark .faq-item p {
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
}

/* =================================================================
 * SHOWCASE — feature rows built from real module components
 * ================================================================= */
.showcase-feature {
  padding-block: clamp(var(--space-7), 6vw, var(--space-8));
  border-block-start: 1px solid var(--raw-line);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) {
  .showcase-feature {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .showcase-feature.is-reverse .showcase-fig {
    order: 2;
  }
}

.showcase-fig {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: var(--space-6);
  border-radius: var(--radius-module);
  background: var(--raw-forest-950);
  color: var(--raw-white);
  overflow: hidden;
}

.showcase-num {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--tone-success-fg);
  font: var(--font-display-4);
}

.showcase-copy h2 {
  margin: 0 0 var(--space-3);
  font: var(--font-display-3);
  letter-spacing: var(--font-display-3-tracking);
}

.showcase-copy p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font: var(--font-body);
}

.showcase-copy ul {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-4);
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

.showcase-copy li {
  margin-block-end: var(--space-2);
}

/* -- Report module used in the "reports" showcase state -- */
.report-module {
  width: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-module);
  background: var(--raw-paper);
  color: var(--raw-ink);
  box-shadow: var(--color-surface-raised-shadow);
}

.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.report-head > div > span {
  display: block;
  color: var(--color-text-kicker);
  font: var(--font-ui-label);
  letter-spacing: var(--font-ui-label-tracking);
  text-transform: var(--font-ui-label-transform);
}

.report-head h4 {
  margin: var(--space-1) 0 0;
  font: var(--font-display-3);
  letter-spacing: var(--font-display-3-tracking);
}

.report-head > strong {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background: var(--raw-accent);
  color: var(--color-accent-on);
  font: var(--font-ui-sm);
}

.signal-chart {
  width: 100%;
  height: 160px;
  margin: var(--space-4) 0 var(--space-2);
  overflow: visible;
}

.chart-grid line {
  stroke: var(--chart-gridline-color);
  stroke-width: var(--chart-gridline-width);
}

.chart-area {
  fill: var(--chart-area-fill);
}

.chart-line {
  fill: none;
  stroke: var(--chart-line-color);
  stroke-width: var(--chart-line-width);
  stroke-linecap: var(--chart-line-cap);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line var(--motion-duration-chart) var(--motion-ease-curve) var(--motion-delay-chart) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .chart-line {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.chart-dots circle {
  fill: var(--chart-dot-fill);
  stroke: var(--chart-dot-stroke);
  stroke-width: var(--chart-dot-stroke-width);
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--raw-line);
}

.report-insight {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-3);
  border-inline-start: var(--chart-insight-border-width) solid var(--chart-insight-border-color);
  color: var(--color-text-muted);
  font: var(--font-ui-md);
}

[dir="rtl"] .report-insight {
  padding-inline-start: var(--space-3);
  padding-inline-end: 0;
}

/* =================================================================
 * FOOTER
 * ================================================================= */
.site-footer {
  padding-block: var(--space-7);
  background: var(--raw-forest-950);
  color: color-mix(in srgb, var(--raw-white) 66%, transparent);
  border-block-start: 1px solid var(--color-border);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-block-end: var(--space-4);
}

.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--raw-white) 78%, transparent);
  text-decoration: none;
  font: var(--font-ui-sm);
}

.footer-links a:hover {
  color: var(--raw-white);
  text-decoration: underline;
}

.footer-addr {
  color: color-mix(in srgb, var(--raw-white) 50%, transparent);
  font: var(--font-ui-caption);
  line-height: 1.7;
}

/* =================================================================
 * FOCUS RING — applied globally via .focus-ring utility (see tokens.css)
 * ================================================================= */
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Dark stage always uses the dark-mode-safe accent ring regardless of the
   page's light/dark token state, because the hero/nav/footer are always
   dark by Control Field's D-1 rule. */
.hero a:focus-visible,
.hero button:focus-visible,
.site-nav a:focus-visible,
.site-nav button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.section-dark a:focus-visible,
.section-dark button:focus-visible {
  outline-color: var(--raw-accent);
}

/* =================================================================
 * RESPONSIVE
 * ================================================================= */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    min-height: 360px;
  }

  .nav-links {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-copy h1 {
    max-width: none;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    gap: var(--space-4);
  }
}

/* =================================================================
 * RTL — logical properties above cover most cases automatically.
 * These are the remaining direction-specific rules, mirroring
 * styles.css:1892-1936 and :213-215 precedent (index numerals,
 * orbit alignment).
 * ================================================================= */
[dir="rtl"] body {
  font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] .hero-copy h1,
[dir="rtl"] .section-title,
[dir="rtl"] .campaign-module h4,
[dir="rtl"] .report-head h4,
[dir="rtl"] .showcase-copy h2 {
  font-family: "DG Ghareeb", "Manrope", sans-serif;
  letter-spacing: 0;
  line-height: 1.15;
}

/* Orbit rings are symmetric circles, so no mirroring is needed for the
   stage itself; grid order below handles the copy/stage swap per
   styles.css :213-215 (index numeral) RTL precedent. */
[dir="rtl"] .hero-grid {
  grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1fr);
}

[dir="rtl"] .hero-copy {
  grid-column: 2;
}

[dir="rtl"] .hero-stage {
  grid-column: 1;
}

@media (max-width: 900px) {
  [dir="rtl"] .hero-grid {
    grid-template-columns: 1fr;
  }

  [dir="rtl"] .hero-copy,
  [dir="rtl"] .hero-stage {
    grid-column: 1;
  }
}