/* ============================================================
   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 {
  /* Visually hidden without leaving the flow at a negative offset: an
     off-canvas -9999px element grows the scrollable width in RTL, which is
     a real horizontal-overflow bug and not just a measurement artefact. */
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  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 {
  inline-size: auto; block-size: auto; min-block-size: 44px;
  display: inline-flex; align-items: center;
  overflow: visible; clip-path: none;
  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);
}
/* Burger + mobile sheet chrome — inert while the inline nav fits (>900px). */
.ora-entry__burger { display: none; }
.ora-entry__sheet-foot { display: none; }

@media (max-width: 900px) {
  /* Below the accepted bar's comfortable width the inline links would crowd
     the brand and controls, so the header simplifies to brand + burger and
     the destinations — plus language, appearance and account — collapse into
     an accessible full-screen sheet. Every action stays reachable. */
  .ora-entry__bar-actions > .ora-langctl,
  .ora-entry__bar-actions > .ora-iconbtn,
  .ora-entry__bar-actions > .ora-entry__signin { display: none; }

  .ora-entry__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ora-border-subtle);
    border-radius: var(--ora-radius-md);
    color: var(--ora-text-primary);
    cursor: pointer;
    position: relative;
    z-index: 60;
  }
  .ora-entry__burger:focus-visible {
    outline: 2px solid var(--ora-border-focus);
    outline-offset: 2px;
  }
  .ora-entry__burger span,
  .ora-entry__burger span::before,
  .ora-entry__burger span::after {
    content: "";
    display: block;
    position: absolute;
    inline-size: 18px;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
  }
  .ora-entry__burger span { position: relative; }
  .ora-entry__burger span::before { top: -6px; }
  .ora-entry__burger span::after  { top: 6px; }
  .ora-entry__burger[aria-expanded="true"] span { background: transparent; }
  .ora-entry__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .ora-entry__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

  /* The nav becomes an opaque full-screen sheet: destinations at the top,
     language / appearance / account pinned to the foot. */
  .ora-entry__nav {
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: clamp(76px, 13vh, 128px) clamp(24px, 7vw, 56px) max(var(--ora-space-7), env(safe-area-inset-bottom));
    background-color: var(--ora-surface-canvas);
    background-image: radial-gradient(120% 55% at 50% 0%, var(--ora-surface-accent-subtle) 0%, rgba(0, 0, 0, 0) 70%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ora-entry__nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .ora-entry__nav > a {
    font-size: var(--ora-text-2xl);
    font-weight: var(--ora-weight-semibold);
    color: var(--ora-text-primary);
    padding-block: var(--ora-space-5);
    padding-inline: var(--ora-space-2);
    min-block-size: 56px;
    display: flex;
    align-items: center;
    white-space: normal;
    border-block-end: 1px solid var(--ora-border-subtle);
    border-radius: var(--ora-radius-sm);
    transition: color .16s ease, padding-inline-start .16s ease, background-color .16s ease;
  }
  .ora-entry__nav > a:last-of-type { border-block-end: 0; }
  .ora-entry__nav > a:hover,
  .ora-entry__nav > a:focus-visible {
    color: var(--ora-accent-text);
    background-color: var(--ora-surface-accent-subtle);
    padding-inline-start: var(--ora-space-4);
    outline: none;
  }

  /* Foot: language + appearance on one row, then the primary action + sign-in. */
  .ora-entry__sheet-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--ora-space-4);
    margin-block-start: auto;
    padding-block-start: var(--ora-space-6);
    border-block-start: 1px solid var(--ora-border-subtle);
  }
  .ora-langctl--sheet {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ora-border-subtle);
    border-radius: var(--ora-radius-full);
  }
  .ora-langctl--sheet .ora-langctl__opt {
    min-block-size: 40px;
    display: inline-flex;
    align-items: center;
    padding-inline: var(--ora-space-4);
    border-radius: var(--ora-radius-full);
    font-size: var(--ora-text-sm);
    font-weight: var(--ora-weight-semibold);
    color: var(--ora-text-secondary);
  }
  .ora-langctl--sheet .ora-langctl__opt[aria-current="true"] {
    background: var(--ora-surface-raised);
    color: var(--ora-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  }
  .ora-iconbtn--sheet {
    grid-column: 2;
    justify-self: end;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--ora-space-2);
    padding-inline: var(--ora-space-5);
    background: transparent;
    border: 1px solid var(--ora-border-subtle);
    border-radius: var(--ora-radius-full);
    color: var(--ora-text-secondary);
    font-size: var(--ora-text-sm);
    font-weight: var(--ora-weight-semibold);
    cursor: pointer;
  }
  .ora-iconbtn--sheet:focus-visible { outline: 2px solid var(--ora-border-focus); outline-offset: 2px; }
  .ora-entry__sheet-cta {
    grid-column: 1 / -1;
    inline-size: 100%;
    justify-content: center;
    min-block-size: 52px;
    font-size: var(--ora-text-md);
  }
  .ora-entry__signin--sheet {
    grid-column: 1 / -1;
    justify-self: center;
    min-block-size: 44px;
    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--sheet:hover { color: var(--ora-accent-text); }

  /* Lift the header (which owns the sheet) above later page sections. */
  body[data-nav-open="true"] .ora-entry__bar { z-index: 60; }
  body[data-nav-open="true"] { overflow: hidden; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .ora-entry__nav { transition: opacity .001s, visibility .001s; transform: none; }
  .ora-entry__nav > a { transition: none; }
  .ora-entry__burger span,
  .ora-entry__burger span::before,
  .ora-entry__burger span::after { transition: 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: var(--ora-text-on-cta);
  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 select,
.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 select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ora-text-secondary) 50%), linear-gradient(135deg, var(--ora-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-inline-end: var(--ora-space-8); }
[dir="rtl"] .ora-field select { background-position: 22px 50%, 17px 50%; padding-inline-end: var(--ora-space-5); padding-inline-start: var(--ora-space-8); }
.ora-field input:hover, .ora-field select:hover, .ora-field textarea:hover { border-color: var(--ora-border-accent); }
.ora-field input:focus, .ora-field select: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;
  /* brand block + three link columns */
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
}
@media (max-width: 980px) {
  .ora-foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ora-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ora-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A new website control, so it gets a comfortable hit area rather than the
   frozen bar's tighter one. */
.ora-foot__brand .ora-brand,
.ora-foot__brand .ora-lockup__id { padding-block: var(--ora-space-2); min-block-size: 44px; }
.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; }

/* ==========================================================================
   V1.1 REFINEMENT
   Type scale, density, and compositions that break the
   label → heading → paragraph → three-cards rhythm.
   The frozen Hero is refined from here, never by editing ora-entry.css.
   ========================================================================== */

/* --- Hero: same composition, calmer type ---------------------------------- */
.ora-hero__headline { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.24; }
.ora-hero__support  { font-size: clamp(0.98rem, 1.15vw, 1.08rem); max-inline-size: 34rem; }
.ora-hero__verbs    { font-size: var(--ora-text-sm); opacity: 0.82; }
.ora-entry__hero    { padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3.5vw, 48px); }

/* --- Section rhythm: shorter, denser, still calm --------------------------- */
.ora-w { padding-block: clamp(44px, 5.2vw, 78px); }
.ora-w--head { padding-block: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.ora-w__h { font-size: clamp(1.35rem, 2.35vw, 1.95rem); line-height: 1.3; }
.ora-w__h--page { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.ora-w__lede { font-size: var(--ora-text-md); max-inline-size: 42rem; margin-block-start: var(--ora-space-4); }
.ora-w__p {
  margin: 0 0 var(--ora-space-5);
  color: var(--ora-text-secondary);
  font-size: var(--ora-text-md);
  line-height: var(--ora-leading-relaxed);
  max-inline-size: 40rem;
}
.ora-w__fineprint {
  margin-block-start: var(--ora-space-5);
  color: var(--ora-text-muted);
  font-size: var(--ora-text-sm);
  line-height: var(--ora-leading-relaxed);
  max-inline-size: 40rem;
}
.ora-ecogroup__note { margin: var(--ora-space-4) 0 0; color: var(--ora-text-muted); font-size: var(--ora-text-xs); }

/* --- Asymmetric split: lead column + body column --------------------------- */
.ora-w__two {
  display: grid;
  grid-template-columns: minmax(15rem, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 68px);
  align-items: start;
}
@media (max-width: 860px) { .ora-w__two { grid-template-columns: 1fr; gap: var(--ora-space-7); } }
.ora-w__two-lead .ora-w__h { margin-block-end: var(--ora-space-4); }

/* Outcome list — text-led, no card chrome. */
.ora-w__outcomes { margin: var(--ora-space-6) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ora-w__outcomes li {
  display: grid; gap: var(--ora-space-2);
  padding-block: var(--ora-space-5);
  border-block-start: 1px solid var(--ora-border-subtle);
}
.ora-w__outcome-h { font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-w__outcome-p { color: var(--ora-text-secondary); font-size: var(--ora-text-base); line-height: var(--ora-leading-relaxed); }

/* --- The intelligence flow ------------------------------------------------- */
.ora-flow {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
@media (max-width: 1080px) { .ora-flow { grid-template-columns: repeat(4, 1fr); row-gap: var(--ora-space-8); } }
@media (max-width: 680px)  { .ora-flow { grid-template-columns: 1fr; row-gap: 0; } }

.ora-flow__step {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: var(--ora-space-4);
  padding-inline: var(--ora-space-3);
  padding-block-start: var(--ora-space-6);
  text-align: center;
  outline-offset: 6px;
}
/* the connecting rail */
.ora-flow__rail {
  position: absolute;
  inset-block-start: calc(var(--ora-space-6) + 19px);
  inset-inline: 50% -50%;
  block-size: 1px;
  background: var(--ora-border-subtle);
}
.ora-flow__step:last-child .ora-flow__rail { display: none; }
/* The rail reaches toward the next node, so it must be suppressed at the end
   of every row — not only on the last step. Without this it extends half a
   column past the grid and the page scrolls sideways. */
@media (max-width: 1080px) {
  .ora-flow__step:nth-child(4n) .ora-flow__rail { display: none; }
}
@media (max-width: 680px) {
  /* Single column: the path reads vertically, so a horizontal rail is wrong. */
  .ora-flow__rail { display: none; }
  .ora-flow__step {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    justify-items: start;
    text-align: start;
    gap: var(--ora-space-4);
    padding-block: var(--ora-space-5);
    border-block-start: 1px solid var(--ora-border-subtle);
  }
  .ora-flow__step:first-child { border-block-start: 0; }
}

.ora-flow__node {
  position: relative;
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border-radius: var(--ora-radius-full);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  color: var(--ora-text-muted);
  transition: color var(--ora-duration-normal) var(--ora-easing-standard),
              border-color var(--ora-duration-normal) var(--ora-easing-standard),
              box-shadow var(--ora-duration-normal) var(--ora-easing-standard);
}
.ora-flow__body { display: grid; gap: var(--ora-space-2); }
.ora-flow__label { font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); font-size: var(--ora-text-base); }
.ora-flow__note { color: var(--ora-text-muted); font-size: var(--ora-text-sm); line-height: var(--ora-leading-relaxed); }

/* Lit state: the path illuminates once as it is read. */
.ora-flow__step[data-flow-lit="true"] .ora-flow__node,
.ora-flow[data-flow-run="done"] .ora-flow__step .ora-flow__node {
  color: var(--ora-accent-text);
  border-color: var(--ora-border-accent);
}
.ora-flow__step[data-flow-lit="true"] .ora-flow__rail,
.ora-flow[data-flow-run="done"] .ora-flow__rail {
  background: linear-gradient(to right, var(--ora-border-accent), var(--ora-border-subtle));
}
/* Before the reveal runs, the steps are legible but quiet. */
.ora-flow[data-flow-run="idle"] .ora-flow__step:not([data-flow-lit="true"]) .ora-flow__node { opacity: 0.55; }

/* Inspecting one state dims the rest — relationship, not decoration. */
.ora-flow[data-flow-active] .ora-flow__step { opacity: 0.45; transition: opacity var(--ora-duration-fast) var(--ora-easing-standard); }
.ora-flow[data-flow-active="0"] .ora-flow__step[data-flow-step="0"],
.ora-flow[data-flow-active="1"] .ora-flow__step[data-flow-step="1"],
.ora-flow[data-flow-active="2"] .ora-flow__step[data-flow-step="2"],
.ora-flow[data-flow-active="3"] .ora-flow__step[data-flow-step="3"],
.ora-flow[data-flow-active="4"] .ora-flow__step[data-flow-step="4"],
.ora-flow[data-flow-active="5"] .ora-flow__step[data-flow-step="5"],
.ora-flow[data-flow-active="6"] .ora-flow__step[data-flow-step="6"] { opacity: 1; }
.ora-flow[data-flow-active] .ora-flow__step:hover .ora-flow__node,
.ora-flow__step:focus-visible .ora-flow__node {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ora-accent-solid) 18%, transparent);
}

/* --- Director relay -------------------------------------------------------- */
.ora-w__director {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .ora-w__director { grid-template-columns: 1fr; } }
.ora-w__director-art { display: grid; place-items: center; }
.ora-w__director-art img {
  inline-size: min(300px, 100%);
  filter: drop-shadow(0 24px 56px color-mix(in srgb, var(--ora-accent-solid) 26%, transparent));
}
@media (max-width: 860px) { .ora-w__director-art img { inline-size: min(210px, 55%); } }

.ora-relay {
  margin: var(--ora-space-7) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ora-space-4);
}
@media (max-width: 620px) { .ora-relay { grid-template-columns: 1fr; } }
.ora-relay__item {
  position: relative;
  display: grid; gap: var(--ora-space-2);
  padding: var(--ora-space-5);
  border-radius: var(--ora-radius-lg);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
}
.ora-relay__item[data-relay-center] {
  border-color: var(--ora-border-accent);
  background: var(--ora-accent-wash);
}
.ora-relay__h { font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-relay__p { color: var(--ora-text-secondary); font-size: var(--ora-text-sm); }

/* --- Product showcase ------------------------------------------------------ */
.ora-showcase {
  margin-block-start: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--ora-radius-xl);
  background: var(--ora-surface-raised);
  border: 1px solid var(--ora-border-subtle);
  box-shadow: var(--ora-elevation-md);
}
@media (max-width: 760px) { .ora-showcase { grid-template-columns: 1fr; } }
.ora-showcase__cover {
  aspect-ratio: 3 / 4;
  max-inline-size: 236px;
  inline-size: 100%;
  margin-inline: auto;
  border-radius: var(--ora-radius-lg);
  padding: var(--ora-space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--ora-accent-cta-hover) 88%, var(--ora-text-primary)) 0%,
    var(--ora-accent-cta) 52%, var(--ora-accent-solid) 100%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ora-accent-cta-hover) 34%, transparent);
}
.ora-showcase__covertitle {
  margin: 0; font-family: "Cairo", var(--ora-font-sans);
  font-size: var(--ora-text-xl); font-weight: var(--ora-weight-bold); color: var(--ora-text-on-cta); line-height: 1.3;
}
.ora-showcase__covermeta {
  margin: var(--ora-space-2) 0 0; font-family: "Sora", var(--ora-font-sans);
  font-size: var(--ora-text-xs); letter-spacing: 0.18em; color: color-mix(in srgb, var(--ora-text-on-cta) 74%, transparent); direction: ltr;
}
.ora-showcase__cat {
  margin: 0 0 var(--ora-space-3);
  font-size: var(--ora-text-xs); font-weight: var(--ora-weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ora-text-muted);
}
.ora-showcase__name { margin: 0; font-family: "Cairo", var(--ora-font-sans); font-size: var(--ora-text-xl); font-weight: var(--ora-weight-bold); color: var(--ora-text-primary); }
.ora-showcase__line { margin: var(--ora-space-2) 0 var(--ora-space-4); color: var(--ora-accent-text); font-weight: var(--ora-weight-medium); }
.ora-showcase__p { margin: 0 0 var(--ora-space-5); color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }
.ora-showcase__points { margin: 0 0 var(--ora-space-6); padding: 0; list-style: none; display: grid; gap: var(--ora-space-3); }
.ora-showcase__points li { display: flex; gap: var(--ora-space-3); align-items: flex-start; color: var(--ora-text-secondary); font-size: var(--ora-text-base); }
.ora-showcase__points svg { color: var(--ora-accent-text); margin-block-start: 2px; }

/* --- Free discovery: give / read / receive --------------------------------- */
.ora-give {
  margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px);
}
@media (max-width: 760px) { .ora-give { grid-template-columns: 1fr; } }
.ora-give__item {
  display: grid; gap: var(--ora-space-2);
  padding-block-start: var(--ora-space-5);
  border-block-start: 2px solid var(--ora-border-accent);
}
.ora-give__n { 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-give__h { font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-give__p { color: var(--ora-text-secondary); font-size: var(--ora-text-base); line-height: var(--ora-leading-relaxed); }

/* --- Trust ----------------------------------------------------------------- */
.ora-trust {
  margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 36px);
}
@media (max-width: 760px) { .ora-trust { grid-template-columns: 1fr; } }
.ora-trust__item { display: grid; gap: var(--ora-space-3); padding-inline-start: var(--ora-space-5); border-inline-start: 2px solid var(--ora-border-accent); }
.ora-trust__item h3 { margin: 0; font-size: var(--ora-text-md); font-weight: var(--ora-weight-semibold); color: var(--ora-text-primary); }
.ora-trust__item p { margin: 0; color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }

/* --- Vision / mission ------------------------------------------------------ */
.ora-w__vm { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 36px); margin-block-start: var(--ora-space-7); }
@media (max-width: 700px) { .ora-w__vm { grid-template-columns: 1fr; } }
.ora-w__vm h3 { margin: 0 0 var(--ora-space-3); font-size: var(--ora-text-md); font-weight: var(--ora-weight-semibold); color: var(--ora-accent-text); }
.ora-w__vm p { margin: 0; color: var(--ora-text-secondary); line-height: var(--ora-leading-relaxed); }
.ora-w__attrib { margin-block-start: var(--ora-space-7); }

/* --- Brand lockup: OraCleid / by Ahmed Alkassar -----------------------------
   A component, not a logo with a caption. Three devices bind the signature to
   the wordmark so the pair reads as one identity:

     1. it starts on the same inline edge as the wordmark, not the mark;
     2. it sits on a tight baseline directly beneath it, with no gutter row;
     3. it is tracked so its measure lands just inside the wordmark's width.

   Set loose - a full gap below, running wider than the word above it - it
   reads as an unrelated line of text, which is what it was doing before.

   The mark is free-standing. The canonical artwork carries its own silver
   edge; dropping it into a coloured tile turns a brand symbol into an app
   icon, so the plate the base layer puts behind it is removed here. */
.ora-lockup {
  display: grid;
  justify-items: start;
  gap: var(--ora-space-4);
}
.ora-lockup__id {
  display: inline-flex;
  align-items: center;
  gap: var(--lockup-gap);
  text-decoration: none;
  color: inherit;
}
.ora-lockup__id:hover .ora-lockup__word { color: var(--ora-accent-text); }

/* No plate, no radius, no border - the mark stands on its own. */
.ora-lockup__mark {
  inline-size: var(--lockup-mark);
  block-size: var(--lockup-mark);
  object-fit: contain;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  flex: 0 0 auto;
}

/* The type block is the lockup. Both lines share one inline-start edge, which
   in RTL is the right edge - flex handles that from `dir` without a mirrored
   rule. */
.ora-lockup__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
}
.ora-lockup__word {
  font-family: "Sora", var(--ora-font-sans);
  font-size: var(--lockup-word);
  font-weight: var(--ora-weight-semibold);
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--ora-text-primary);
  direction: ltr;
}
/* Tracked to sit just inside the wordmark's measure, and never translated. */
.ora-lockup__sig {
  font-family: "Sora", var(--ora-font-sans);
  font-size: var(--lockup-sig);
  font-weight: var(--ora-weight-regular);
  letter-spacing: var(--lockup-track);
  line-height: 1.1;
  margin-block-start: var(--lockup-lead);
  color: var(--ora-text-muted);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* Provenance, outside the identity block so it can never read as a
   continuation of the signature. */
.ora-lockup__engine {
  margin: 0;
  font-size: var(--ora-text-xs);
  color: var(--ora-text-muted);
  opacity: 0.7;
}

/* Two scales. The header must stay quiet next to the navigation; the footer
   is the formal brand area and can breathe. */
.ora-lockup--header {
  --lockup-mark: 52px;
  --lockup-gap: 14px;
  --lockup-word: 1.68rem;
  --lockup-sig: 0.706rem;   /* 0.42x the wordmark */
  --lockup-track: 0.04em;   /* tracked to land just inside the wordmark's measure */
  --lockup-lead: 3px;
}
.ora-lockup--footer {
  --lockup-mark: 52px;
  --lockup-gap: 15px;
  --lockup-word: 1.72rem;
  --lockup-sig: 0.722rem;
  --lockup-track: 0.04em;
  --lockup-lead: 4px;
}

/* Compact form for narrow headers. The attribution is never dropped - it is
   re-proportioned, because a founder signature that vanishes on a phone is
   not a brand identity. */
@media (max-width: 600px) {
  /* Tuned by eye, not scaled: on a phone the mark can stay generous while
     the wordmark gives back a little, because the lockup is competing with
     far less around it. */
  .ora-lockup--header {
    --lockup-mark: 42px;
    --lockup-gap: 11px;
    --lockup-word: 1.32rem;
    --lockup-sig: 0.554rem;
    --lockup-track: 0.04em;
    --lockup-lead: 2px;
  }
  .ora-lockup--footer {
    --lockup-mark: 44px;
    --lockup-word: 1.42rem;
    --lockup-sig: 0.596rem;
  }
}

/* --- Company social profiles (rendered only when verified) ----------------- */
.ora-social { margin-block-start: var(--ora-space-7); }
.ora-social__label {
  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-text-muted);
}
.ora-social__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--ora-space-3); }
.ora-social__link {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: var(--ora-radius-md);
}
.ora-social__link .ora-channel__glyph { inline-size: 20px; block-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  /* the Home world's dev-only motion hatch (?motion=force, evidence capture) is exempt;
     production never sets it and ora-home.css carries its own reduced-motion rules */
  :not(.h-world[data-w-motion="force"] *):not(.n-page[data-n-motion="force"] *), :not(.h-world[data-w-motion="force"] *):not(.n-page[data-n-motion="force"] *)::before, :not(.h-world[data-w-motion="force"] *):not(.n-page[data-n-motion="force"] *)::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------
   Touch target sizing (website layer only)

   WCAG 2.5.5 asks for a 44x44 hit area. Several controls are deliberately
   small so the header stays quiet on desktop, which is right for a mouse
   and wrong for a thumb. Rather than redesign them, the minimum is applied
   only where the pointer is actually coarse, so the desktop composition
   the owner accepted is untouched. Canonical classes are never edited in
   the canonical file - they are only constrained from here.
   --------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 768px) {
  .ora-btn,
  .ora-iconbtn {
    min-height: 44px;
  }

  .ora-iconbtn {
    min-width: 44px;
  }

  .ora-skip,
  .ora-brand,
  .ora-lockup__id,
  .ora-langctl__opt,
  [data-oc-link="login"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   Channel tiles on a dark canvas

   X and TikTok are genuinely black brands, so on the dark theme their
   tiles sit black-on-near-black and read as missing rather than dark.
   Their colour is not ours to change, so the tile keeps its brand fill
   and gains a hairline edge instead. Both dark paths are covered: the
   system preference and the explicit appearance switch.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-ora-appearance="light"]) .ora-eco__tile.ora-tile--x,
  :root:not([data-ora-appearance="light"]) .ora-eco__tile.ora-tile--tiktok {
    border: 1px solid var(--ora-border-strong);
  }
}
:root[data-ora-appearance="dark"] .ora-eco__tile.ora-tile--x,
:root[data-ora-appearance="dark"] .ora-eco__tile.ora-tile--tiktok {
  border: 1px solid var(--ora-border-strong);
}

/* ---------------------------------------------------------------------
   Orbit nodes on a narrow stage

   Below 480px the canonical stage shrinks to 280px but the three
   mobile-flagged nodes keep their desktop arc positions, so the lower
   node's disc lands on the middle node's label and clips it. The arc is
   re-spaced for the smaller stage rather than dropping nodes, so the
   capability story survives on a phone.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .ora-hero__stage .ora-node--c3 { top: 0%; }
  .ora-hero__stage .ora-node--c1 { top: 34%; }
  .ora-hero__stage .ora-node--c5 { top: 64%; }
}

/* The book band on Home: the free review as the lighter first step. */
.ora-w__fineprint--cta { margin-block-start: var(--ora-space-6); }