/* ============================================================
   OraCleid website layer.

   Everything the public site needs that the canonical system does
   not already provide: the skip link, the header navigation, the
   icon sprite's stroke rules, and the OraCleid-wide story sections
   below the accepted front door.

   RULES THIS FILE OBEYS
   - It defines NO colour, size, radius or font of its own. Every
     value resolves from assets/css/ora-tokens.css, which is
     generated from design/tokens/oracleid-core.tokens.json.
   - It never restyles the accepted Hero composition. Selectors here
     may add website chrome around it; they must not re-author it.

   Load order: ora-tokens -> ora-base -> ora-entry -> ora-web
   ============================================================ */

/* --- Shell plumbing -------------------------------------------------------
   The SPA gets these from src/index.css, which is app-shell specific and not
   worth importing wholesale. They are not design decisions: without
   border-box sizing the frozen composition's percentage widths overflow their
   own padding, which is exactly what made the ecosystem band 408px wide in a
   390px viewport. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Components set their own `display`, which would otherwise out-specify the
   user-agent [hidden] rule and paint a state block that is meant to be off. */
[hidden] { display: none !important; }
img, svg, video, canvas { max-width: 100%; height: auto; }
/* A grid/flex child refuses to shrink below its content unless told to; this
   is the cheapest cure for a page that scrolls sideways. */
.ora-entry *, .ora-entry *::before, .ora-entry *::after { min-width: 0; }

/* Lucide glyphs are stroked, and the sprite carries geometry only. */
.ora-i {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ora-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--ora-space-4) var(--ora-space-6);
  background: var(--ora-accent-cta);
  color: var(--ora-text-on-cta);
  border-radius: 0 0 var(--ora-radius-md) var(--ora-radius-md);
  font-weight: var(--ora-weight-semibold);
  text-decoration: none;
}
.ora-skip:focus {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* --- Header navigation --------------------------------------------------
   The accepted bar carries brand + controls. These links sit between them
   and inherit the bar's own rhythm; nothing about the bar itself changes. */
.ora-entry__nav {
  display: flex;
  align-items: center;
  gap: var(--ora-space-7);
  margin-inline: auto;
}
.ora-entry__nav a {
  color: var(--ora-text-secondary);
  font-size: var(--ora-text-sm);
  font-weight: var(--ora-weight-medium);
  text-decoration: none;
  padding-block: var(--ora-space-3);
  white-space: nowrap;
}
.ora-entry__nav a:hover {
  color: var(--ora-text-primary);
}
@media (max-width: 900px) {
  /* Below the accepted bar's comfortable width the links would crowd the
     brand and the controls; the same destinations remain reachable from
     the sections themselves. */
  .ora-entry__nav { display: none; }
}

.ora-langctl__opt {
  text-decoration: none;
}

/* --- OraCleid-wide story sections --------------------------------------- */
.ora-w {
  background: var(--ora-surface-canvas);
  color: var(--ora-text-primary);
  padding-block: clamp(56px, 7vw, 96px);
  font-family: var(--ora-font-sans);
}
.ora-w--alt {
  background: var(--ora-surface-sunken);
}
.ora-w__inner {
  inline-size: 100%;
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.ora-w__eyebrow {
  margin: 0 0 var(--ora-space-4);
  font-family: "Sora", var(--ora-font-sans);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ora-accent-text);
}
.ora-w__h {
  margin: 0;
  font-family: "Cairo", var(--ora-font-sans);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: var(--ora-weight-bold);
  line-height: var(--ora-leading-tight);
  color: var(--ora-text-primary);
  text-wrap: balance;
}
:root:not([lang="ar"]) .ora-w__h { font-family: "Sora", var(--ora-font-sans); }

.ora-w__lede {
  margin: var(--ora-space-5) 0 0;
  max-inline-size: 46rem;
  font-size: var(--ora-text-md);
  line-height: var(--ora-leading-relaxed);
  color: var(--ora-text-secondary);
}

/* Capability grid — the same six the Hero orbits, read as a list. */
.ora-w__grid {
  margin-block-start: var(--ora-space-9);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ora-space-5);
}
@media (max-width: 860px) { .ora-w__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ora-w__grid { grid-template-columns: 1fr; } }

.ora-w__cap {
  display: flex;
  align-items: center;
  gap: var(--ora-space-4);
  padding: var(--ora-space-5);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-lg);
  box-shadow: var(--ora-elevation-sm);
}
.ora-w__capicon {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--ora-radius-md);
  background: var(--ora-accent-wash);
  color: var(--ora-accent-text);
}
.ora-w__capname {
  font-size: var(--ora-text-base);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-text-primary);
}

/* The four verbs, as the connected loop the platform actually runs. */
.ora-w__verbs {
  margin: var(--ora-space-9) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ora-space-5);
  counter-reset: verb;
}
@media (max-width: 760px) { .ora-w__verbs { grid-template-columns: repeat(2, 1fr); } }

.ora-w__verb {
  display: grid;
  gap: var(--ora-space-2);
  padding-block-start: var(--ora-space-5);
  border-block-start: 2px solid var(--ora-border-accent);
}
.ora-w__verbn {
  font-family: "Sora", var(--ora-font-sans);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-accent-text);
}
.ora-w__verbname {
  font-family: "Cairo", var(--ora-font-sans);
  font-size: var(--ora-text-lg);
  font-weight: var(--ora-weight-bold);
  color: var(--ora-text-primary);
}
.ora-w__verblat {
  font-family: "Sora", var(--ora-font-sans);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-medium);
  letter-spacing: 0.16em;
  color: var(--ora-text-muted);
  direction: ltr;
  unicode-bidi: isolate;
}

/* An honest note about what is not built yet, not a teaser. */
.ora-w__note {
  margin: var(--ora-space-9) 0 0;
  padding: var(--ora-space-5) var(--ora-space-6);
  background: var(--ora-status-pending-bg);
  color: var(--ora-status-pending-text);
  border-radius: var(--ora-radius-md);
  font-size: var(--ora-text-sm);
  line-height: var(--ora-leading-relaxed);
}

/* --- Inner pages ---------------------------------------------------------- */
.ora-entry--inner { min-block-size: 0; }
.ora-w--head { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.ora-w__h--page { font-size: clamp(1.9rem, 4vw, 2.9rem); }

/* --- Reach: a typographic list, deliberately not another card grid -------- */
.ora-w__domains {
  margin: var(--ora-space-9) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--ora-border-subtle);
}
.ora-w__domain {
  display: grid;
  grid-template-columns: auto minmax(9rem, 14rem) 1fr;
  align-items: baseline;
  gap: var(--ora-space-5);
  padding-block: var(--ora-space-5);
  border-block-end: 1px solid var(--ora-border-subtle);
}
.ora-w__domainicon { color: var(--ora-accent-text); align-self: center; }
.ora-w__domainname {
  font-family: "Cairo", var(--ora-font-sans);
  font-size: var(--ora-text-lg);
  font-weight: var(--ora-weight-semibold);
  color: var(--ora-text-primary);
}
.ora-w__domainhint { color: var(--ora-text-secondary); font-size: var(--ora-text-base); }
@media (max-width: 700px) {
  .ora-w__domain { grid-template-columns: auto 1fr; }
  .ora-w__domainhint { grid-column: 2; }
}

/* --- Split section (the Director) ---------------------------------------- */
.ora-w__split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ora-w__splitart { display: grid; place-items: center; }
.ora-w__splitart img {
  inline-size: min(360px, 100%);
  filter: drop-shadow(0 26px 60px color-mix(in srgb, var(--ora-accent-solid) 30%, transparent));
}
@media (max-width: 860px) {
  .ora-w__split { grid-template-columns: 1fr; }
  .ora-w__splitart img { inline-size: min(240px, 62%); }
}
.ora-w__checks { margin: var(--ora-space-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--ora-space-4); }
.ora-w__checks li { display: flex; gap: var(--ora-space-4); align-items: flex-start; color: var(--ora-text-secondary); }
.ora-w__checks svg { color: var(--ora-accent-text); margin-block-start: 3px; }

/* --- Catalogue (Core-driven; empty until Core publishes) ------------------ */
.ora-w__catalogue {
  margin-block-start: var(--ora-space-9);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--ora-space-5);
}
.ora-w__item {
  padding: var(--ora-space-6);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-lg);
  box-shadow: var(--ora-elevation-sm);
  display: grid;
  gap: var(--ora-space-3);
  align-content: start;
}
.ora-w__itemname { margin: 0; font-size: var(--ora-text-lg); font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-w__itemp { margin: 0; color: var(--ora-text-secondary); font-size: var(--ora-text-base); line-height: var(--ora-leading-relaxed); }
.ora-w__itemprice { margin: 0; font-weight: var(--ora-weight-semibold); color: var(--ora-accent-text); }
/* Development data must be unmistakable wherever it appears. */
.ora-w__mock {
  justify-self: start;
  padding: 2px var(--ora-space-3);
  border-radius: var(--ora-radius-full);
  background: var(--ora-status-warning-bg);
  color: var(--ora-status-warning-text);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-bold);
  letter-spacing: 0.06em;
}

/* --- A standing product surface (a real page, not catalogue data) --------- */
.ora-w__standing { margin-block-start: var(--ora-space-9); }
.ora-w__standinglabel {
  margin: 0 0 var(--ora-space-4);
  font-size: var(--ora-text-xs);
  font-weight: var(--ora-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ora-text-muted);
}
.ora-w__product {
  display: grid;
  gap: var(--ora-space-3);
  max-inline-size: 34rem;
  padding: var(--ora-space-6);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-lg);
  box-shadow: var(--ora-elevation-sm);
  text-decoration: none;
  transition: border-color var(--ora-duration-normal) var(--ora-easing-standard),
              box-shadow var(--ora-duration-normal) var(--ora-easing-standard);
}
.ora-w__product:hover { border-color: var(--ora-border-accent); box-shadow: var(--ora-elevation-md); }
.ora-w__productname { font-family: "Cairo", var(--ora-font-sans); font-size: var(--ora-text-lg); font-weight: var(--ora-weight-bold); color: var(--ora-text-primary); }
.ora-w__productp { color: var(--ora-text-secondary); font-size: var(--ora-text-base); line-height: var(--ora-leading-relaxed); }
.ora-w__productcta { display: inline-flex; align-items: center; gap: var(--ora-space-3); color: var(--ora-accent-text); font-weight: var(--ora-weight-semibold); font-size: var(--ora-text-sm); }
[dir="rtl"] .ora-w__productcta svg { transform: scaleX(-1); }

/* --- Actions, bands, principles, model ----------------------------------- */
.ora-w__actions { margin-block-start: var(--ora-space-8); display: flex; flex-wrap: wrap; gap: var(--ora-space-4); }
/* New website controls target a comfortable mobile hit area. */
.ora-w__actions .ora-btn { min-block-size: 44px; }

.ora-w__band { display: grid; grid-template-columns: 1.4fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.ora-w__band .ora-w__actions { margin-block-start: 0; }
@media (max-width: 780px) { .ora-w__band { grid-template-columns: 1fr; } }

.ora-w__principles { margin: var(--ora-space-9) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 860px) { .ora-w__principles { grid-template-columns: 1fr; } }
.ora-w__principles h3 { margin: 0 0 var(--ora-space-3); font-size: var(--ora-text-md); font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-w__principles p { margin: 0; color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }

.ora-w__eyebrow--spaced { margin-block-start: clamp(48px, 6vw, 84px); }
.ora-w__model { margin: var(--ora-space-9) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ora-w__model li {
  display: grid;
  grid-template-columns: auto minmax(8rem, 12rem) 1fr;
  gap: var(--ora-space-5);
  align-items: baseline;
  padding-block: var(--ora-space-6);
  border-block-start: 1px solid var(--ora-border-subtle);
}
.ora-w__modeln { font-family: "Sora", var(--ora-font-sans); font-size: var(--ora-text-xs); font-weight: var(--ora-weight-semibold); color: var(--ora-accent-text); }
.ora-w__modelh { font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-w__modelp { color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }
@media (max-width: 700px) {
  .ora-w__model li { grid-template-columns: auto 1fr; }
  .ora-w__modelp { grid-column: 2; }
}

/* --- Final CTA ------------------------------------------------------------ */
.ora-w--cta { background: var(--ora-surface-accent-subtle); }
.ora-w__ctainner { text-align: center; }
.ora-w__ctainner .ora-w__lede { margin-inline: auto; }
.ora-w__ctainner .ora-w__actions { justify-content: center; }

/* --- Official third-party channel marks -----------------------------------
   Brand colours and mask assets live here rather than in inline style
   attributes, so `style-src 'self'` needs no 'unsafe-inline'. These are the
   platforms' own colours, used as supplied: never recoloured, never redrawn,
   and never mirrored in RTL (a mask has no direction).

   The first production release carried these inline and the strict CSP
   blocked every one of them, so the six tiles rendered without their brand
   identity. This is that fix. */
.ora-eco__tile .ora-channel__glyph {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: currentColor;
  color: #ffffff;
  display: block;
}

.ora-tile--instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }
.ora-tile--facebook  { background: #1877F2; }
.ora-tile--tiktok    { background: #000000; }
.ora-tile--youtube   { background: #FF0000; }
.ora-tile--snapchat  { background: #FFFC00; }
.ora-tile--x         { background: #000000; }

/* Snapchat's mark is black on its yellow tile; the rest are white. */
.ora-tile--snapchat .ora-channel__glyph { color: #000000; }

.ora-tile--instagram .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/instagram.svg"); mask-image: url("/assets/brand/channels/instagram.svg"); }
.ora-tile--facebook  .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/facebook.svg");  mask-image: url("/assets/brand/channels/facebook.svg"); }
.ora-tile--tiktok    .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/tiktok.svg");    mask-image: url("/assets/brand/channels/tiktok.svg"); }
.ora-tile--youtube   .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/youtube.svg");   mask-image: url("/assets/brand/channels/youtube.svg"); }
.ora-tile--snapchat  .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/snapchat.svg");  mask-image: url("/assets/brand/channels/snapchat.svg"); }
.ora-tile--x         .ora-channel__glyph { -webkit-mask-image: url("/assets/brand/channels/x.svg");         mask-image: url("/assets/brand/channels/x.svg"); }

/* --- Pending catalogue: an explanation with a way forward, not a dead end -- */
.ora-w__pending {
  margin-block-start: var(--ora-space-9);
  padding: var(--ora-space-7);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  border-radius: var(--ora-radius-lg);
  display: grid;
  gap: var(--ora-space-6);
  justify-items: start;
  max-inline-size: 46rem;
}
.ora-w__pending p { margin: 0; color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }
.ora-w__pending .ora-btn { min-block-size: 44px; }

/* --- Final CTA artwork ---------------------------------------------------- */
.ora-w__ctaart {
  inline-size: min(190px, 44vw);
  margin-inline: auto;
  margin-block-end: var(--ora-space-6);
  filter: drop-shadow(0 20px 44px color-mix(in srgb, var(--ora-accent-solid) 28%, transparent));
}

/* --- Forms ---------------------------------------------------------------- */
.ora-form { display: grid; gap: var(--ora-space-6); max-inline-size: 34rem; }
.ora-form__hp { position: absolute; inset-inline-start: -9999px; }
.ora-field { display: grid; gap: var(--ora-space-3); }
.ora-field label { font-size: var(--ora-text-base); font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-field__hint { font-size: var(--ora-text-sm); color: var(--ora-text-muted); }
.ora-field input,
.ora-field textarea {
  font-family: inherit;
  font-size: var(--ora-text-md);
  color: var(--ora-text-primary);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-strong);
  border-radius: var(--ora-radius-md);
  padding: var(--ora-space-4) var(--ora-space-5);
  min-block-size: 46px;
  inline-size: 100%;
  transition: border-color var(--ora-duration-fast) var(--ora-easing-standard),
              box-shadow var(--ora-duration-fast) var(--ora-easing-standard);
}
.ora-field textarea { min-block-size: 140px; resize: vertical; line-height: var(--ora-leading-relaxed); }
.ora-field input:hover, .ora-field textarea:hover { border-color: var(--ora-border-accent); }
.ora-field input:focus, .ora-field textarea:focus {
  outline: none;
  border-color: var(--ora-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ora-border-focus) 30%, transparent);
}
.ora-form .ora-btn { min-block-size: 46px; justify-self: start; }

/* --- Footer --------------------------------------------------------------- */
.ora-foot {
  background: var(--ora-surface-sunken);
  border-block-start: 1px solid var(--ora-border-subtle);
  color: var(--ora-text-secondary);
  font-family: var(--ora-font-sans);
  padding-block: clamp(40px, 5vw, 64px) var(--ora-space-6);
}
.ora-foot__inner {
  inline-size: 100%;
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 760px) {
  .ora-foot__inner { grid-template-columns: 1fr 1fr; }
  .ora-foot__brand { grid-column: 1 / -1; }
}
/* A new website control, so it gets a comfortable hit area rather than the
   frozen bar's tighter one. */
.ora-foot__brand .ora-brand { padding-block: var(--ora-space-3); min-block-size: 44px; }
.ora-foot__brand p { margin: var(--ora-space-5) 0 0; max-inline-size: 26rem; font-size: var(--ora-text-base); line-height: var(--ora-leading-relaxed); }
.ora-foot__engine { color: var(--ora-text-muted); font-size: var(--ora-text-sm); }
.ora-foot__col h2 { margin: 0 0 var(--ora-space-5); font-family: "Sora", var(--ora-font-sans); font-size: var(--ora-text-xs); font-weight: var(--ora-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ora-accent-text); }
.ora-foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ora-foot__col a { display: inline-block; padding-block: 10px; color: var(--ora-text-secondary); text-decoration: none; font-size: var(--ora-text-base); }
.ora-foot__col a:hover { color: var(--ora-text-primary); text-decoration: underline; }
.ora-foot__bar {
  inline-size: 100%;
  max-inline-size: 1120px;
  margin: clamp(32px, 4vw, 52px) auto 0;
  padding: var(--ora-space-6) clamp(20px, 5vw, 40px) 0;
  border-block-start: 1px solid var(--ora-border-subtle);
  display: flex; flex-wrap: wrap; gap: var(--ora-space-4);
  justify-content: space-between; align-items: center;
  font-size: var(--ora-text-sm);
  color: var(--ora-text-muted);
}
.ora-foot__tag { font-family: "Sora", var(--ora-font-sans); font-size: var(--ora-text-xs); letter-spacing: 0.16em; color: var(--ora-accent-text); direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}