/* GENERATED - DO NOT EDIT. The accepted OraCleid front-door composition,
   copied verbatim from the-return-system @ oracleid-frozen-hero-v1 (cacdbb3).
   This is the FROZEN Hero. Responsive integration belongs in site.css;
   the composition itself must not be creatively modified. */

/* OraCleid front door (Splash / EntryHero) — approved art direction -------
   Asymmetric premium hero: the canonical mark is the central intelligent object
   on a glowing stage, ringed by capability + channel signals; the hook and the
   actions sit on the reading side. Purple/silver atmosphere, both themes. */
.ora-entry {
  --ora-entry-display: "Cairo", var(--ora-font-sans);
  --ora-entry-latin: "Sora", var(--ora-font-sans);
  position: relative;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ora-surface-canvas);
  color: var(--ora-text-primary);
  font-family: var(--ora-entry-display);
  overflow: hidden;
  isolation: isolate;
}

/* Two soft fields of purple/silver light — atmosphere, not decoration. */
.ora-entry::before,
.ora-entry::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--ora-radius-full);
  pointer-events: none;
}
.ora-entry::before {
  inset-block-start: -20%;
  inset-inline-start: -6%;
  inline-size: 62vw;
  block-size: 62vw;
  max-inline-size: 780px;
  max-block-size: 780px;
  background: radial-gradient(circle, var(--ora-accent-wash) 0%, transparent 66%);
  opacity: 0.85;
}
.ora-entry::after {
  inset-block-end: -24%;
  inset-inline-end: -10%;
  inline-size: 50vw;
  block-size: 50vw;
  max-inline-size: 620px;
  max-block-size: 620px;
  background: radial-gradient(circle, var(--ora-surface-accent-subtle) 0%, transparent 70%);
  opacity: 0.7;
}

.ora-entry__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ora-space-4);
  padding: var(--ora-space-5) clamp(var(--ora-space-5), 5vw, var(--ora-space-9));
}
.ora-entry__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ora-space-2);
  font-family: var(--ora-entry-latin);
  font-weight: var(--ora-weight-bold);
  font-size: var(--ora-text-lg);
  letter-spacing: -0.01em;
  color: var(--ora-text-primary);
  text-decoration: none;
}
.ora-entry__bar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ora-space-4);
}
.ora-entry__signin {
  display: inline-flex;
  align-items: center;
  gap: var(--ora-space-2);
  font-size: var(--ora-text-sm);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-text-secondary);
  text-decoration: none;
}
.ora-entry__signin:hover { color: var(--ora-accent-text); }

/* Asymmetric hero. Copy is column 1 → the right in RTL; stage is larger, left. */
.ora-entry__hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(var(--ora-space-6), 4vw, var(--ora-space-11));
  inline-size: 100%;
  max-inline-size: 1240px;
  margin: 0 auto;
  padding: clamp(var(--ora-space-5), 4vw, var(--ora-space-10)) clamp(var(--ora-space-5), 5vw, var(--ora-space-9));
}

/* --- Copy ---------------------------------------------------------------- */
.ora-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ora-space-5);
}
.ora-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ora-space-2);
  margin: 0;
  padding: var(--ora-space-2) var(--ora-space-4);
  border: 1px solid var(--ora-border-accent);
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-accent-subtle);
  font-size: var(--ora-text-sm);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-accent-text);
}
.ora-hero__eyebrow-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--ora-radius-full);
  background: var(--ora-accent-solid);
}
/* Two-beat hook: a smaller ink setup line, then a larger purple payoff the eye keeps. */
.ora-hero__headline {
  margin: 0;
  font-family: var(--ora-entry-display);
  font-size: clamp(2.9rem, 5.6vw, 5.4rem); /* the payoff size */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ora-text-primary);
}
.ora-hero__headline-setup {
  display: block;
  font-size: 0.72em;
  font-weight: var(--ora-weight-bold);
  line-height: 1.12;
  color: var(--ora-text-primary);
  margin-block-end: var(--ora-space-1);
}
.ora-hero__headline-accent {
  display: block;
  color: var(--ora-accent-text);
}
.ora-hero__support {
  max-inline-size: 44ch;
  margin: 0;
  font-size: clamp(var(--ora-text-base), 1.35vw, var(--ora-text-lg));
  line-height: 1.85;
  color: var(--ora-text-secondary);
}
.ora-hero__verbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ora-space-3);
  margin: 0;
  font-family: var(--ora-entry-latin);
  font-size: var(--ora-text-sm);
  font-weight: var(--ora-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--ora-text-muted);
}
.ora-hero__verb-sep { color: var(--ora-accent-text); }
.ora-hero__cta {
  display: flex;
  gap: var(--ora-space-3);
  flex-wrap: wrap;
  margin-block-start: var(--ora-space-2);
}
.ora-hero__login {
  margin: 0;
  font-size: var(--ora-text-sm);
  color: var(--ora-text-muted);
}
.ora-hero__login a {
  color: var(--ora-accent-text);
  font-weight: var(--ora-weight-semibold);
  text-decoration: none;
}
.ora-hero__login a:hover { text-decoration: underline; }

/* --- Stage (the mark as the central object) ------------------------------ */
.ora-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  inline-size: 100%;
  max-inline-size: 540px;
  margin-inline: auto;
}
.ora-hero__glow {
  position: absolute;
  inset: 6%;
  border-radius: var(--ora-radius-full);
  background: radial-gradient(circle, var(--ora-accent-wash) 0%, transparent 62%);
  filter: blur(6px);
}
/* The Core + capability crown move as one system, forward of the Director (physical right +
   slightly down) and above it in depth, so the Core floats in front of the palm — never over
   the head/face — and the crown always hugs the Core wherever it sits. */
.ora-hero__coregroup {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate(4%, 9%);
  z-index: 4;
}
.ora-hero__markwrap {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 58%;
  aspect-ratio: 1;
}
.ora-hero__mark {
  inline-size: 100%;
  block-size: 100%;
  filter: drop-shadow(0 24px 60px var(--ora-accent-wash));
  animation: ora-mark-float 7s ease-in-out infinite;
}
/* The luminous energy base beneath the Core, aligned with the palm — a premium pedestal,
   not a cheap hologram. */
.ora-hero__podium {
  position: absolute;
  inset-block-end: -13%;
  inline-size: 104%;
  block-size: 22%;
  border-radius: var(--ora-radius-full);
  background:
    radial-gradient(ellipse at center, var(--ora-accent-solid) 0%, transparent 58%),
    radial-gradient(ellipse at center, var(--ora-accent-wash) 0%, transparent 72%);
  opacity: 0.85;
  filter: blur(4px);
}
/* A faint vertical energy column rising from the base into the Core. */
.ora-hero__podium::after {
  content: "";
  position: absolute;
  inset-block-end: 40%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 14%;
  block-size: 220%;
  background: linear-gradient(to top, var(--ora-accent-wash), transparent 70%);
  filter: blur(6px);
}

/* Capability nodes — glass chips orbiting the mark (evidence, secondary). */
/* Capability symbols — a coherent radial system, not floating UI pills. Each is a
   luminous glass disc carrying the symbol, with a subtle label beneath. */
.ora-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ora-space-2);
  inline-size: max-content;
  max-inline-size: 92px;
  text-align: center;
  animation: ora-node-float 6s ease-in-out infinite;
}
.ora-node__symbol {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-accent);
  box-shadow: var(--ora-elevation-md), 0 0 0 6px var(--ora-accent-wash);
  color: var(--ora-accent-text);
}
.ora-node__label {
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-semibold);
  line-height: 1.2;
  color: var(--ora-text-secondary);
}
.ora-node svg { color: var(--ora-accent-text); }
/* Capability CROWN — a compact arc over the Core's top and right (≈11 → 12 → 3 o'clock),
   PHYSICALLY biased away from the Director on the Core's left in both directions, so it
   never collides with the character and the lower half stays clear for the presenting hand. */
.ora-node--c4 { top: -3%; right: 33%; animation-delay: 0s; }   /* ~12:30 (top) — Selects the tools */
.ora-node--c3 { top: 9%; right: 14%; animation-delay: 0.3s; }  /* ~1:30 — Coordinates the work */
.ora-node--c2 { top: 29%; right: 1%; animation-delay: 0.6s; }  /* ~2:30 — Decides */
.ora-node--c1 { top: 50%; right: -3%; animation-delay: 0.9s; } /* ~3:30 — Understands the goal */
.ora-node--c5 { top: 70%; right: 5%; animation-delay: 1.2s; }  /* ~4:30 — Executes */
.ora-node--c6 { top: 85%; right: 20%; animation-delay: 1.5s; } /* ~5 o'clock — Tracks & measures */

/* Channel signals — supporting ecosystem, always secondary to the mark. */
.ora-hero__channels {
  position: absolute;
  inset-block-end: -6%;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ora-space-2);
}
.ora-channel {
  display: inline-flex;
  align-items: center;
  padding: var(--ora-space-1) var(--ora-space-3);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-overlay);
  font-family: var(--ora-entry-latin);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-medium);
  color: var(--ora-text-muted);
}

.ora-entry__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ora-space-3);
  padding: var(--ora-space-5);
  border-top: 1px solid var(--ora-border-subtle);
  color: var(--ora-text-muted);
  font-size: var(--ora-text-sm);
}
.ora-entry__foot-engine { opacity: 0.85; }

@keyframes ora-mark-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes ora-node-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* --- Responsive: mobile is a designed experience, not a squeezed desktop -- */
@media (max-width: 900px) {
  .ora-entry__hero {
    grid-template-columns: 1fr;
    gap: var(--ora-space-7);
  }
  .ora-hero__copy { align-items: flex-start; order: 1; }
  .ora-hero__stage { order: 2; max-inline-size: 360px; margin-block-end: var(--ora-space-6); }
  /* One capability node only on small screens — keep the mark, drop the clutter. */
  /* Keep only the mobile-flagged nodes (ora-node--m). */
  .ora-node:not(.ora-node--m) { display: none; }
  .ora-hero__channels { position: static; margin-block-start: var(--ora-space-6); }
}

@media (max-width: 480px) {
  .ora-hero__stage { max-inline-size: 280px; }
  .ora-node { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ora-hero__mark,
  .ora-node { animation: none; }
}

/* The canonical OraCleid mark. Transparent asset, so it floats free on any
   surface — no coin, no plate. */
.ora-brandmark {
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
}

/* Official social marks — monochrome via mask, subtle secondary ecosystem
   signals. Never OraCleid identity; always subordinate to the mark. */
.ora-channel--glyph {
  padding: var(--ora-space-2);
  color: var(--ora-text-muted);
}
.ora-channel__glyph {
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ora-channel--glyph:hover { color: var(--ora-accent-text); }

/* A slightly stronger header lockup — the mark + wordmark read as one system. */
.ora-entry__brand { font-size: var(--ora-text-xl); }

/* OraCleid ecosystem — REACH, two clearly-separate groups (domains + channels).
   Secondary to the hero; OraCleid stays the dominant identity. */
.ora-ecosystem {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.18fr 1.02fr;
  gap: clamp(var(--ora-space-5), 4vw, var(--ora-space-9));
  align-items: start;
  inline-size: 100%;
  max-inline-size: 1240px;
  margin: 0 auto;
  padding: var(--ora-space-6) clamp(var(--ora-space-5), 5vw, var(--ora-space-9));
  border-top: 1px solid var(--ora-border-subtle);
}
.ora-ecogroup--channels {
  border-inline-start: 1px solid var(--ora-border-subtle);
  padding-inline-start: clamp(var(--ora-space-5), 3vw, var(--ora-space-7));
}
.ora-ecogroup__label {
  margin: 0 0 var(--ora-space-4);
  font-family: var(--ora-entry-latin);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-bold);
  letter-spacing: 0.06em;
  color: var(--ora-text-muted);
}
.ora-ecogroup__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ora-space-2);
}
.ora-eco {
  display: inline-flex;
  align-items: center;
  gap: var(--ora-space-2);
  padding: var(--ora-space-2) var(--ora-space-3) var(--ora-space-2) var(--ora-space-4);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-raised);
  font-size: var(--ora-text-sm);
  font-weight: var(--ora-weight-medium);
  color: var(--ora-text-secondary);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ora-eco:hover {
  border-color: var(--ora-border-accent);
  color: var(--ora-text-primary);
}
.ora-eco__glyph {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-accent-subtle);
  color: var(--ora-accent-text);
}
.ora-eco--channel .ora-eco__glyph {
  background: var(--ora-surface-sunken);
  color: var(--ora-text-muted);
}
/* Channel items are a touch wider so the platform name fits on one line, keeping the
   whole group a single compact row. */
.ora-eco--channel { inline-size: 82px; }

@media (max-width: 900px) {
  .ora-ecosystem { grid-template-columns: 1fr; gap: var(--ora-space-6); }
  .ora-ecogroup--channels {
    border-inline-start: 0;
    border-top: 1px solid var(--ora-border-subtle);
    padding-inline-start: 0;
    padding-block-start: var(--ora-space-6);
  }
  /* Curated + horizontally scrollable on small screens — never a squeezed grid. */
  .ora-ecogroup__items {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--ora-space-2);
    scrollbar-width: none;
  }
  .ora-ecogroup__items::-webkit-scrollbar { display: none; }
  .ora-eco { flex: 0 0 auto; }
}

/* Entry CTA hierarchy. Primary must read as clickable instantly — a rich accent
   fill (identical in both themes) with a near-white label, never disabled-looking. */
.ora-hero__cta .ora-btn {
  height: auto;
  min-block-size: 48px;
  padding-inline: var(--ora-space-6);
  border-radius: var(--ora-radius-lg);
  font-size: var(--ora-text-base);
}
.ora-hero__cta .ora-btn--primary {
  background: var(--ora-accent-cta);
  color: var(--ora-text-on-cta);
  font-weight: var(--ora-weight-bold);
  border-color: transparent;
  box-shadow: 0 8px 24px var(--ora-accent-wash);
  transition:
    background-color var(--ora-duration-fast) var(--ora-easing-standard),
    box-shadow var(--ora-duration-fast) var(--ora-easing-standard),
    transform var(--ora-duration-fast) var(--ora-easing-standard);
}
.ora-hero__cta .ora-btn--primary:hover:not(:disabled) {
  background: var(--ora-accent-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px var(--ora-accent-wash);
}
.ora-hero__cta .ora-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 6px 18px var(--ora-accent-wash);
}
.ora-hero__cta .ora-btn--primary .ora-icon,
.ora-hero__cta .ora-btn--primary svg { color: var(--ora-text-on-cta); }

/* Secondary is a restrained glass/outline — clearly interactive, clearly lower. */
.ora-hero__cta .ora-btn--secondary {
  background: color-mix(in srgb, var(--ora-surface-raised) 70%, transparent);
  border-color: var(--ora-border-strong);
  color: var(--ora-text-primary);
  font-weight: var(--ora-weight-semibold);
}
.ora-hero__cta .ora-btn--secondary:hover:not(:disabled) {
  border-color: var(--ora-border-accent);
  background: var(--ora-surface-raised);
}

@media (prefers-reduced-motion: reduce) {
  .ora-hero__cta .ora-btn--primary { transition: background-color 0.1s; }
  .ora-hero__cta .ora-btn--primary:hover:not(:disabled) { transform: none; }
}

/* One restrained energy curve connecting the capability crown — an upper arc that hugs
   the Core and fades before the lower half, keeping the presenting hand's space clean. */
.ora-hero__orbit {
  position: absolute;
  border-radius: var(--ora-radius-full);
  pointer-events: none;
}
.ora-hero__orbit--outer { display: none; }
.ora-hero__orbit--inner {
  inset: 4%;
  border: 1px dashed var(--ora-border-accent);
  opacity: 0.5;
  /* Show the right arc only — it threads the capability crown and fades before the
     character on the Core's left. */
  -webkit-mask: linear-gradient(to right, transparent 44%, black 62%);
  mask: linear-gradient(to right, transparent 44%, black 62%);
}

/* Channel marks in authentic brand colour, on a light plate so they read in both
   themes — small flashes of real-world colour against the purple/silver world. */
.ora-eco__glyph--brand {
  background: #ffffff;
  border: 1px solid var(--ora-border-subtle);
}

/* Ecosystem as one soft glass panel with two zones — scale, not a filter bar. */
.ora-ecosystem {
  max-inline-size: 1160px;
  margin: 0 auto var(--ora-space-7);
  padding: clamp(var(--ora-space-5), 3vw, var(--ora-space-7));
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-xl);
  background: color-mix(in srgb, var(--ora-surface-raised) 55%, transparent);
  box-shadow: var(--ora-elevation-sm);
}
/* Items are icon + label, not heavy pills. */
.ora-eco {
  padding: var(--ora-space-1) var(--ora-space-2);
  border: 0;
  background: transparent;
}
.ora-eco:hover { background: transparent; color: var(--ora-text-primary); }
.ora-eco:hover .ora-eco__glyph { border-color: var(--ora-border-accent); }
.ora-eco__glyph { border: 1px solid transparent; }

/* The legacy shell rule `html[data-surface="oracleid"] a` colours every anchor with
   the accent — it leaks into the public entry (readable by luck in dark, invisible in
   light). These scoped overrides outrank it so entry links carry their intended colour. */
html[data-surface="oracleid"] .ora-hero__cta .ora-btn--primary,
html[data-surface="oracleid"] .ora-hero__cta .ora-btn--primary .ora-icon,
html[data-surface="oracleid"] .ora-hero__cta .ora-btn--primary svg {
  color: var(--ora-text-on-cta);
}
html[data-surface="oracleid"] .ora-hero__cta .ora-btn--secondary,
html[data-surface="oracleid"] .ora-entry__brand {
  color: var(--ora-text-primary);
}
html[data-surface="oracleid"] .ora-entry__signin { color: var(--ora-text-secondary); }
html[data-surface="oracleid"] .ora-entry__signin:hover,
html[data-surface="oracleid"] .ora-hero__login a { color: var(--ora-accent-text); }

/* Language control — restrained العربية | English, no flags. */
.ora-langctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-raised);
}
.ora-langctl__opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--ora-space-1) var(--ora-space-3);
  border-radius: var(--ora-radius-full);
  font: inherit;
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-text-muted);
  cursor: pointer;
}
.ora-langctl__opt[aria-pressed="true"] {
  background: var(--ora-surface-accent-subtle);
  color: var(--ora-accent-text);
}

/* English recomposes to the Latin type system; Arabic keeps Cairo. Direction is
   carried by dir=/lang= on the entry root, so the whole layout flips naturally. */
.ora-entry[lang="en"] { font-family: var(--ora-entry-latin); }
.ora-entry[lang="en"] .ora-hero__headline {
  font-family: var(--ora-entry-latin);
  letter-spacing: -0.03em;
  line-height: 1.03;
}
.ora-entry[lang="en"] .ora-hero__support { line-height: 1.65; }
.ora-entry[lang="en"] .ora-hero__eyebrow { letter-spacing: 0; }

/* Tidy the public header on small screens: the hero already carries a sign-in link,
   so the header keeps brand + language + appearance and lets them wrap if needed. */
@media (max-width: 560px) {
  .ora-entry__bar { flex-wrap: wrap; row-gap: var(--ora-space-3); }
  .ora-entry__bar-actions { gap: var(--ora-space-2); }
  .ora-entry__signin { display: none; }
}

/* Ecosystem grammar v2 — icon ABOVE label, consistent footprint, generous rhythm.
   Business domains in the OraCleid purple family; channels in authentic brand tiles. */
.ora-ecogroup__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ora-space-4) var(--ora-space-2);
  align-items: flex-start;
}
.ora-eco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ora-space-2);
  inline-size: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-medium);
  color: var(--ora-text-secondary);
}
.ora-eco:hover { background: transparent; color: var(--ora-text-primary); }
.ora-eco:hover .ora-eco__glyph { border-color: var(--ora-border-accent); }
.ora-eco__name {
  max-inline-size: 100%;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Reset the v1 pill's nowrap so long labels (English) wrap within their footprint. */
.ora-ecogroup .ora-eco { white-space: normal; }

/* Domain symbol — OraCleid-owned purple tile. */
.ora-eco__glyph {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--ora-radius-lg);
  display: grid;
  place-items: center;
  background: var(--ora-surface-accent-subtle);
  border: 1px solid transparent;
  color: var(--ora-accent-text);
}

/* Channel tile — authentic brand colour, white glyph (dark glyph where the tile is light). */
.ora-eco__tile {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--ora-radius-lg);
  display: grid;
  place-items: center;
  box-shadow: var(--ora-elevation-sm);
}
.ora-eco__tile[data-border] { border: 1px solid var(--ora-border-strong); }
.ora-eco__tile--empty {
  background: var(--ora-surface-sunken);
  border: 1px dashed var(--ora-border-subtle);
  box-shadow: none;
}
.ora-eco__tile .ora-channel__glyph { inline-size: 24px; block-size: 24px; }

/* OraCleid Director character — the AI presence beside the Core. Positioned on the
   reading-opposite side (RTL: left / LTR: right) via logical properties; the image is
   never mirrored — only its side flips. Renders only when the approved asset exists. */
.ora-hero__character {
  position: absolute;
  z-index: 3;
  /* Physical left in BOTH directions: the character always stands to the Core's left with
     its hand toward it (presenting). It is never mirrored — only the whole stage swaps
     page-side between RTL and LTR, carrying the character with it. */
  bottom: -2%;
  left: -16%;
  inline-size: 62%;
  max-inline-size: 430px;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px var(--ora-accent-wash));
}
.ora-character__img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}
.ora-character__emblem {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
@media (max-width: 900px) {
  /* On small screens the character is a smaller supporting presence, never the whole view. */
  .ora-hero__character { inline-size: 48%; left: -8%; bottom: 0; }
}