/* OraCleid — AI-NATIVE VISUAL DIRECTION CONCEPT (Owner review 2026-09-18). Scope: .n-page only.
   Three scenes: THE FIELD (spatial hero) · THE RUN (scroll-driven execution graph) · LIVING HOLDS IT
   (companion device + flagship 3D book). Assembled from studied 21st.dev components (see
   tools/home-native.mjs) and unified under the canonical identity. Website-layer CSS: no literal
   colour — identity --ora-*, neutral/scene --w-*. Purple is the intelligence signal (active node,
   lit wire, the Director's light); surfaces stay neutral. Logical properties throughout (AR rtl / EN ltr).
   No inline styles anywhere (CSP style-src 'self'): geometry lives here, motion values arrive by CSSOM. */

.n-page {
  --n-nav: 68px;
  --n-gutter: clamp(16px, 3.2vw, 48px);
  --n-max: 1360px;
  --n-ease: var(--w-ease-actor);
  --n-ease-world: var(--w-ease-world);
  --n-fast: 200ms; --n-move: 520ms; --n-scene: 900ms;
  --n-display: var(--w-font-display-ar);
  /* contrast tokens - LIGHT is a first-class state (defaults); dark overrides below */
  --n-mesh: var(--w-shadow); --n-mesh-k: 2.7;
  --n-ring: color-mix(in srgb, var(--w-text) 24%, transparent);
  --n-ring-2: color-mix(in srgb, var(--w-text) 17%, transparent);
  --n-future: color-mix(in srgb, var(--w-text) 36%, transparent);
  --n-done: color-mix(in srgb, var(--ora-accent-solid) 58%, var(--w-silver));
  --n-edge: color-mix(in srgb, var(--w-text) 26%, transparent);
  --n-soft: var(--w-text-2);
  --n-signal: var(--ora-accent-cta);
  --n-blue: var(--ora-status-info-text);
  --n-halo: .44;
  --n-ground: .26;
  --n-tx: -50%;
  --n-line: 1px solid var(--w-line);
  --n-t-h1: calc(clamp(2.3rem, 1rem + 3.6vw, 4.5rem) * var(--w-ar));
  --n-t-h2: calc(clamp(1.7rem, 1rem + 2vw, 3rem) * var(--w-ar));
  --n-t-h3: calc(clamp(1.6rem, 1rem + 1.8vw, 2.7rem) * var(--w-ar));
  position: relative; isolation: isolate; overflow: clip;
  background: var(--w-base); color: var(--w-text);
  font-family: var(--w-font-body); font-size: var(--w-t-body); line-height: var(--w-lh-body);
}
[dir="ltr"] .n-page { --n-display: var(--w-font-display-en); }
[dir="rtl"] .n-page { --n-tx: 50%; }
@media (prefers-color-scheme: dark) { :root:not([data-ora-appearance="light"]) .n-page { --n-mesh: var(--w-glass-edge); --n-mesh-k: 1; --n-ring: color-mix(in srgb, var(--w-text) 14%, transparent); --n-ring-2: color-mix(in srgb, var(--w-text) 10%, transparent); --n-future: color-mix(in srgb, var(--w-text) 26%, transparent); --n-done: color-mix(in srgb, var(--ora-accent-solid) 55%, var(--w-silver)); --n-edge: color-mix(in srgb, var(--w-text) 20%, transparent); --n-signal: var(--w-silver-bright); --n-blue: color-mix(in oklch, var(--ora-status-info-text) 62%, var(--ora-status-info-bg)); --n-halo: .34; --n-ground: .5; } }
:root[data-ora-appearance="dark"] .n-page { --n-mesh: var(--w-glass-edge); --n-mesh-k: 1; --n-ring: color-mix(in srgb, var(--w-text) 14%, transparent); --n-ring-2: color-mix(in srgb, var(--w-text) 10%, transparent); --n-future: color-mix(in srgb, var(--w-text) 26%, transparent); --n-done: color-mix(in srgb, var(--ora-accent-solid) 55%, var(--w-silver)); --n-edge: color-mix(in srgb, var(--w-text) 20%, transparent); --n-signal: var(--w-silver-bright); --n-blue: color-mix(in oklch, var(--ora-status-info-text) 62%, var(--ora-status-info-bg)); --n-halo: .34; --n-ground: .5; }

.n-page *, .n-page *::before, .n-page *::after { box-sizing: border-box; }
.n-page :is(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--ora-border-focus); outline-offset: 3px; }
.n-page button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.n-page img { max-inline-size: 100%; block-size: auto; }
.n-page .ora-i { display: inline-block; flex: none; }

/* type */
.n-h1, .n-h2, .n-h3 { font-family: var(--n-display); font-weight: 800; margin: 0; color: var(--w-text); text-wrap: balance; letter-spacing: -.015em; }
[dir="rtl"] .n-page :is(.n-h1, .n-h2, .n-h3) { letter-spacing: 0; }
.n-h1 { font-size: var(--n-t-h1); line-height: 1.08; display: grid; gap: .08em; }
.n-h1__b { color: var(--w-text-3); font-weight: 600; font-size: .56em; line-height: 1.25; max-inline-size: 16ch; }
.n-h2 { font-size: var(--n-t-h2); line-height: 1.15; }
.n-h3 { font-size: var(--n-t-h3); line-height: 1.15; }
.n-kicker { margin: 0 0 12px; font-size: var(--w-t-small); font-weight: 600; color: var(--ora-accent-text); }
.n-lede { margin: 12px 0 0; font-size: calc(clamp(1rem, .95rem + .3vw, 1.18rem) * var(--w-ar)); color: var(--w-text-2); line-height: 1.65; max-inline-size: 46ch; }
.n-fine { margin: 8px 0 0; font-size: var(--w-t-small); color: var(--w-text-3); line-height: 1.6; max-inline-size: 64ch; }
.n-fine--preview { color: var(--ora-accent-text); }
.n-link { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 6px; color: var(--w-text-2); font-weight: 600; text-decoration: none; transition: color var(--n-fast); }
.n-link:hover { color: var(--w-text); }
.n-page .ora-btn { min-block-size: 50px; padding-inline: 24px; border-radius: 999px; font-weight: 600; }
.n-page .ora-btn--primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ora-accent-solid) 30%, transparent), 0 14px 44px -14px rgb(var(--w-glow) / .6); }
[dir="rtl"] .n-page :is(.ora-btn, .n-command__send) .ora-i:last-child { transform: scaleX(-1); }
[dir="rtl"] .n-page .ora-btn--primary > .ora-i:first-child { transform: none; }

/* nav: the canonical header, floating over the field */
.n-nav { position: sticky; inset-block-start: 0; z-index: 60; block-size: var(--n-nav); background: color-mix(in srgb, var(--w-base) 70%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-block-end: 1px solid transparent; transition: border-color var(--n-fast); }
.n-nav[data-scrolled="true"] { border-block-end-color: var(--w-line); }
.n-nav .ora-entry__bar { position: relative; background: transparent; border: 0; color: var(--w-text); max-inline-size: var(--n-max); margin-inline: auto; padding-inline: var(--n-gutter); min-block-size: var(--n-nav); }
.n-nav .ora-entry__nav a { color: var(--w-text-2); }
.n-nav .ora-entry__nav a:hover { color: var(--w-text); }
.n-nav :is(.ora-lockup, .ora-entry__signin) { color: var(--w-text); }

/* =========================== SCENE 1 · THE FIELD =========================== */
.n-field { position: relative; min-block-size: calc(100svh - var(--n-nav)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-block-end: clamp(16px, 3vh, 36px); overflow: hidden; }
.n-field::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 22%; background: linear-gradient(to top, var(--w-base), transparent); pointer-events: none; z-index: 2; }
.n-lattice { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; pointer-events: none; }
.n-field__say { position: absolute; z-index: 45; inset-block-start: clamp(20px, 6vh, 72px); inset-inline-start: max(var(--n-gutter), calc((100% - var(--n-max)) / 2 + var(--n-gutter))); max-inline-size: min(36%, 500px); pointer-events: none; }

.n-orbit { position: relative; z-index: 5; min-block-size: clamp(440px, 64vh, 760px); margin-inline-start: 33%; }
.n-orbit__ring { position: absolute; inset-inline-start: 50%; inset-block-start: 62%; inline-size: min(94%, 1000px); aspect-ratio: 1 / .36; translate: var(--n-tx) -50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--w-text) 12%, transparent); box-shadow: 0 0 60px rgb(var(--w-glow) / .08) inset; }
.n-orbit__ring--2 { inline-size: min(62%, 680px); border-style: dashed; border-color: color-mix(in srgb, var(--w-text) 9%, transparent); box-shadow: none; }

/* the Director stands in the field; it is the core, not an illustration in a frame */
.n-director { position: absolute; inset-inline-start: 50%; inset-block-end: 0; translate: var(--n-tx) 0; z-index: 20; inline-size: min(46vh, 430px, 62%); display: grid; justify-items: center; pointer-events: none; }
.n-director img { display: block; inline-size: 100%; -webkit-mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); transition: transform var(--n-scene) var(--n-ease); }
.n-director[data-attend] img { transform: translateY(-6px) scale(1.035); }
.n-director__light { position: absolute; inset: -18% -40% 8%; z-index: -1; background: radial-gradient(46% 46% at 50% 46%, rgb(var(--w-glow) / .34), rgb(var(--w-glow) / .08) 46%, transparent 72%); transition: opacity var(--n-scene), transform var(--n-scene) var(--n-ease); animation: n-breathe 6s ease-in-out infinite; }
.n-director[data-attend] .n-director__light { transform: scale(1.12); }
@keyframes n-breathe { 50% { opacity: .72; } }
.n-director__line { position: absolute; inset-block-start: 4%; inset-inline-start: 74%; z-index: 3; margin: 0; inline-size: max-content; max-inline-size: min(280px, 60vw); padding: 12px 16px; border-radius: 18px; border-end-start-radius: 4px; background: color-mix(in srgb, var(--w-base-2) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 30%, var(--w-line)); color: var(--w-text); font-size: calc(.98rem * var(--w-ar)); font-weight: 600; line-height: 1.5; box-shadow: var(--w-depth-1); }

/* intents orbit the Director; depth comes from the angle (CSSOM sets --nx --ny --ns --no) */
.n-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.n-node { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; margin: 0; transform: translate(-50%, -50%) translate(var(--nx, 0px), var(--ny, 0px)) scale(var(--ns, 1)); opacity: var(--no, 1); will-change: transform, opacity; }
[dir="rtl"] .n-node { transform: translate(50%, -50%) translate(var(--nx, 0px), var(--ny, 0px)) scale(var(--ns, 1)); }
.n-node button { display: grid; justify-items: center; gap: 8px; padding: 6px; border: 0; background: transparent; cursor: pointer; }
.n-node__dot { position: relative; display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: color-mix(in srgb, var(--w-base-2) 86%, transparent); border: 1px solid color-mix(in srgb, var(--w-text) 18%, transparent); color: var(--w-text-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--n-fast), color var(--n-fast), border-color var(--n-fast), box-shadow var(--n-move), transform var(--n-move) var(--n-ease); }
.n-node__dot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--w-glow) / .28), transparent 70%); opacity: 0; transition: opacity var(--n-move); }
.n-node__l { font-size: calc(.92rem * var(--w-ar)); font-weight: 600; color: var(--w-text-2); white-space: nowrap; transition: color var(--n-fast); text-shadow: 0 1px 12px var(--w-base); }
.n-node button:hover .n-node__dot { color: var(--w-text); border-color: color-mix(in srgb, var(--ora-accent-solid) 60%, transparent); transform: scale(1.08); }
.n-node button:hover .n-node__l { color: var(--w-text); }
.n-node.is-kin .n-node__dot::after { opacity: .7; animation: n-breathe 2s ease-in-out infinite; }
.n-node.is-on { opacity: 1; }
.n-node.is-on .n-node__dot { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); border-color: transparent; transform: scale(1.22); box-shadow: 0 0 0 6px rgb(var(--w-glow) / .16), 0 0 50px rgb(var(--w-glow) / .6); }
.n-node.is-on .n-node__dot::after { opacity: 1; }
.n-node.is-on .n-node__l { color: var(--w-text); }

/* the command: docked under the field */
.n-command { position: relative; z-index: 50; inline-size: min(100% - 2 * var(--n-gutter), 780px); margin-inline: auto; }
.n-command__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.n-command__bar { display: flex; align-items: center; gap: 10px; padding: 8px; padding-inline-start: 14px; border-radius: 999px; background: color-mix(in srgb, var(--w-base-2) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--w-line-2); box-shadow: 0 30px 90px -30px rgb(var(--w-shadow) / .6), inset 0 1px 0 color-mix(in srgb, var(--w-silver-bright) 14%, transparent); transition: border-color var(--n-fast), box-shadow var(--n-fast); }
.n-command__bar:focus-within { border-color: color-mix(in srgb, var(--ora-accent-solid) 65%, var(--w-line-2)); box-shadow: 0 0 0 5px rgb(var(--w-glow) / .14), 0 30px 90px -30px rgb(var(--w-shadow) / .6); }
.n-command__orb { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; filter: drop-shadow(0 0 12px rgb(var(--w-glow) / .7)); animation: n-breathe 4s ease-in-out infinite; }
.n-command__orb img { inline-size: 36px; block-size: 36px; }
.n-page .n-command__bar input, .n-page .n-command__bar input:focus { flex: 1 1 auto; min-inline-size: 0; border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; color: var(--w-text); font: inherit; font-size: calc(1.06rem * var(--w-ar)); padding: 10px 4px; }
.n-command__bar input::placeholder { color: var(--w-text-3); }
.n-command__send { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%; background: var(--ora-accent-cta); color: var(--ora-text-on-cta); cursor: pointer; flex: none; transition: background var(--n-fast), transform var(--n-fast) var(--n-ease); }
.n-command__send:hover { background: var(--ora-accent-cta-hover); transform: scale(1.06); }
.n-command__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin-block-start: 14px; }

/* =========================== SCENE 2 · THE RUN =========================== */
.n-run { position: relative; }
.n-run__stick { position: relative; min-block-size: calc(100svh - var(--n-nav)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: clamp(8px, 1.6vh, 18px); inline-size: min(100% - 2 * var(--n-gutter), var(--n-max)); margin-inline: auto; padding-block: clamp(14px, 3vh, 32px); }
.n-run__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }
.n-phases { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-inline-size: 100%; }
.n-phases::-webkit-scrollbar { display: none; }
.n-phases button { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--w-text-3); font-size: var(--w-t-small); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--n-fast), background var(--n-fast); }
.n-phases button i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--w-line-2); transition: background var(--n-fast), box-shadow var(--n-fast); }
.n-phases button.is-done { color: var(--w-text-2); }
.n-phases button.is-done i { background: var(--ora-accent-solid); }
.n-phases button[aria-current="step"] { color: var(--w-text); background: color-mix(in srgb, var(--ora-accent-wash) 70%, transparent); }
.n-phases button[aria-current="step"] i { background: var(--ora-accent-solid); box-shadow: 0 0 0 4px rgb(var(--w-glow) / .2), 0 0 14px rgb(var(--w-glow) / .8); }

.n-stage { position: relative; min-block-size: 0; }
.n-stage::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(40% 55% at 47% 50%, rgb(var(--w-glow) / .13), transparent 70%), radial-gradient(circle, color-mix(in srgb, var(--w-text) 9%, transparent) 1px, transparent 1.4px); background-size: auto, 30px 30px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, rgb(0 0 0) 40%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, rgb(0 0 0) 40%, transparent 100%); pointer-events: none; }
.n-graph { position: absolute; inset-block: 0; inset-inline-start: 0; inset-inline-end: clamp(140px, 19vw, 300px); }
.n-graph__wires { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.n-graph__wires--v { display: none; }
[dir="rtl"] .n-graph__wires { transform: scaleX(-1); }
.n-wire { fill: none; stroke: color-mix(in srgb, var(--w-text) 14%, transparent); stroke-width: 1.5; stroke-dasharray: .012 .018; transition: stroke var(--n-move), stroke-width var(--n-move); }
.n-wire.is-on { stroke: var(--ora-accent-solid); stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgb(var(--w-glow) / .8)); }
.n-spark { fill: var(--w-silver-bright); opacity: 0; filter: drop-shadow(0 0 6px rgb(var(--w-glow) / 1)); transition: opacity var(--n-fast); }
.n-spark.is-on { opacity: 1; }

.n-g { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: var(--n-tx) -50%; display: grid; justify-items: center; gap: 8px; text-align: center; opacity: .2; scale: .9; filter: saturate(.2); transition: opacity var(--n-move) var(--n-ease), scale var(--n-move) var(--n-ease), filter var(--n-move); }
.n-g.is-on { opacity: 1; scale: 1; filter: none; }
.n-g--ask { --x: 9.2%; --y: 50%; } .n-g--read { --x: 27.5%; --y: 32.1%; } .n-g--ctx { --x: 27.5%; --y: 67.9%; } .n-g--plan { --x: 46.7%; --y: 50%; }
.n-g--k0 { --x: 66.7%; --y: 21.4%; } .n-g--k1 { --x: 66.7%; --y: 50%; } .n-g--k2 { --x: 66.7%; --y: 78.6%; } .n-g--gate { --x: 82.1%; --y: 50%; } .n-g--out { --x: 93%; --y: 50%; }
.n-g__i { display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--w-base-2); border: 1px solid var(--w-line-2); color: var(--w-text-2); transition: background var(--n-move), color var(--n-move), box-shadow var(--n-move), border-color var(--n-move); }
.n-g__t { font-size: calc(.9rem * var(--w-ar)); font-weight: 600; color: var(--w-text-2); max-inline-size: 15ch; line-height: 1.35; text-shadow: 0 1px 10px var(--w-base); }
.n-g.is-now .n-g__i { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); border-color: transparent; box-shadow: 0 0 0 7px rgb(var(--w-glow) / .15), 0 0 46px rgb(var(--w-glow) / .7); }
.n-g.is-now .n-g__t { color: var(--w-text); }
.n-g__k { font-size: var(--w-t-micro); font-weight: 600; color: var(--ora-accent-text); }
.n-g__ask { display: block; max-inline-size: 17ch; padding: 12px 14px; border-radius: 16px; border-end-end-radius: 4px; background: var(--ora-accent-wash); border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 35%, transparent); color: var(--w-text); font-size: calc(.95rem * var(--w-ar)); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.n-g__core { display: grid; place-items: center; inline-size: 96px; block-size: 96px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--w-base-2) 90%, transparent) 40%, transparent 72%); filter: drop-shadow(0 0 22px rgb(var(--w-glow) / .5)); transition: filter var(--n-move), transform var(--n-scene) var(--n-ease); }
.n-g__core img { inline-size: 76px; block-size: 76px; }
.n-g--core.is-now .n-g__core { filter: drop-shadow(0 0 44px rgb(var(--w-glow) / .95)); transform: scale(1.12) rotate(12deg); }
.n-g__bar { display: block; inline-size: 64px; block-size: 4px; border-radius: 2px; background: var(--w-line); overflow: hidden; position: relative; }
.n-g__bar::after { content: ""; position: absolute; inset: 0; background: var(--ora-accent-solid); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--n-ease-world); }
[dir="rtl"] .n-g__bar::after { transform-origin: right; }
.n-g--cap.is-on .n-g__bar::after { transform: scaleX(1); }
.n-g--k1 .n-g__bar::after { transition-delay: .25s; } .n-g--k2 .n-g__bar::after { transition-delay: .5s; }
.n-g__gate { display: grid; gap: 6px; }
.n-g__gate b { display: block; padding: 6px 12px; border-radius: 999px; border: var(--n-line); background: var(--w-base-2); font-size: var(--w-t-micro); font-weight: 600; color: var(--w-text-2); white-space: nowrap; transition: border-color var(--n-move), color var(--n-move), background var(--n-move); }
.n-g--gate.is-on b { border-color: color-mix(in srgb, var(--ora-accent-solid) 50%, transparent); color: var(--w-text); }
.n-g--gate.is-on b:nth-child(2) { transition-delay: .35s; } .n-g--gate.is-on b:nth-child(3) { transition-delay: .7s; background: var(--ora-accent-wash); }
.n-g--out .n-g__i { inline-size: 60px; block-size: 60px; }
.n-graph[data-phase="5"] .n-g--out .n-g__i, .n-graph[data-phase="6"] .n-g--out .n-g__i { background: var(--w-ok); color: var(--w-base); border-color: transparent; box-shadow: 0 0 0 7px color-mix(in srgb, var(--w-ok) 18%, transparent), 0 0 40px color-mix(in srgb, var(--w-ok) 55%, transparent); }
.n-graph[data-phase="6"] .n-wire.is-on { stroke: color-mix(in srgb, var(--ora-accent-solid) 55%, var(--w-silver)); filter: none; }

/* the Director stands beside the run and points its light at the working node */
.n-actor { position: absolute; inset-inline-end: 0; inset-block-end: -2%; inline-size: clamp(150px, 21vw, 330px); z-index: 4; pointer-events: none; --beam: 0; }
.n-actor img { display: block; inline-size: 100%; -webkit-mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); transition: transform var(--n-scene) var(--n-ease); }
.n-actor[data-act="think"] img { transform: translateY(-4px); }
.n-actor[data-act="work"] img { transform: translateY(-8px) scale(1.03); }
.n-actor[data-act="work"] .n-actor__light, .n-actor[data-act="think"] .n-actor__light { transform: scale(1.18); }
.n-actor__light { transition: transform var(--n-scene) var(--n-ease); }
.n-actor__light { position: absolute; inset: -10% -30% 10%; z-index: -1; background: radial-gradient(46% 46% at 50% 46%, rgb(var(--w-glow) / .3), transparent 70%); }
.n-actor::after { content: ""; position: absolute; inset-inline-start: auto; left: var(--beam-x, 50%); top: var(--beam-y, 42%); inline-size: var(--beam-len, 0px); block-size: 2px; transform-origin: 0 50%; transform: rotate(var(--beam-rot, 180deg)); background: linear-gradient(90deg, rgb(var(--w-glow) / .85), rgb(var(--w-glow) / .05)); opacity: var(--beam); filter: blur(.4px) drop-shadow(0 0 8px rgb(var(--w-glow) / .9)); transition: opacity var(--n-move), transform var(--n-move) var(--n-ease), inline-size var(--n-move) var(--n-ease); z-index: -1; }

.n-report { display: flex; align-items: baseline; gap: 14px; min-block-size: 3.2em; padding-block-start: 12px; border-block-start: var(--n-line); }
.n-report__who { flex: none; font-size: var(--w-t-small); font-weight: 700; color: var(--ora-accent-text); }
.n-report__line { margin: 0; font-family: var(--n-display); font-weight: 600; font-size: calc(clamp(1.05rem, .9rem + .7vw, 1.5rem) * var(--w-ar)); color: var(--w-text); line-height: 1.4; }
.n-run .n-fine { margin: 0; }

/* =========================== SCENE 3 · LIVING HOLDS IT =========================== */
.n-living { position: relative; padding-block: clamp(72px, 10vw, 140px) clamp(48px, 6vw, 88px); inline-size: min(100% - 2 * var(--n-gutter), var(--n-max)); margin-inline: auto; }
.n-living::before { content: ""; position: absolute; inset-inline: -50vw; inset-block-start: 0; block-size: 1px; background: radial-gradient(40% 200% at 50% 100%, color-mix(in srgb, var(--w-silver) 50%, transparent), transparent); }
.n-living__say { max-inline-size: 640px; }
.n-living__stage { position: relative; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-block-start: clamp(32px, 5vw, 64px); }
.n-living__stage::before { content: ""; position: absolute; inset: 4% 10% -4% 0; background: radial-gradient(34% 50% at 22% 50%, rgb(var(--w-glow) / .18), transparent 70%), radial-gradient(30% 46% at 74% 48%, rgb(var(--w-glow) / .14), transparent 70%); pointer-events: none; z-index: -1; }

/* the companion device */
.n-phone { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; block-size: clamp(560px, 72vh, 680px); padding: 14px; border-radius: 46px; background: var(--w-base-2); border: 1px solid var(--w-line-2); box-shadow: 0 60px 120px -50px rgb(var(--w-shadow) / .75), 0 0 0 8px color-mix(in srgb, var(--w-base-3) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--w-silver-bright) 18%, transparent); overflow: hidden; }
.n-phone__island { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-block-size: 34px; padding: 0 16px; border-radius: 999px; background: var(--w-text); color: var(--w-base); font-size: var(--w-t-small); font-weight: 600; transition: inline-size var(--n-move) var(--n-ease); }
.n-phone__island i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ora-accent-solid); box-shadow: 0 0 10px rgb(var(--w-glow) / 1); animation: n-breathe 1.6s ease-in-out infinite; }
.n-phone__top { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; margin-block-start: 14px; padding: 8px 10px 0; }
.n-phone__top img { inline-size: 84px; block-size: 84px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--w-glow) / .3), transparent 70%); }
.n-phone__top p { margin: 0; font-size: calc(.92rem * var(--w-ar)); color: var(--w-text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.n-phone__screens { position: relative; margin: 14px 4px; padding: 16px; border-radius: 26px; background: var(--w-base); border: var(--n-line); overflow: hidden; }
.n-s { display: grid; gap: 10px; align-content: center; min-block-size: 100%; animation: n-rise var(--n-move) var(--n-ease); }
.n-s[hidden] { display: none; }
@keyframes n-rise { from { opacity: 0; transform: translateY(10px); } }
.n-s p { margin: 0; }
.n-s__you, .n-s__dir { padding: 10px 14px; border-radius: 16px; font-size: calc(.95rem * var(--w-ar)); line-height: 1.55; max-inline-size: 88%; }
.n-s__you { justify-self: end; background: var(--ora-accent-wash); border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 30%, transparent); border-end-end-radius: 4px; color: var(--w-text); font-weight: 600; }
.n-s__dir { justify-self: start; background: var(--w-base-2); border: var(--n-line); border-end-start-radius: 4px; color: var(--w-text-2); }
.n-s__dir--next { border-style: dashed; }
.n-s__list, .n-s__chips, .n-s__path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.n-s__list li { display: grid; gap: 2px; padding-block-end: 8px; border-block-end: var(--n-line); }
.n-s__list li:last-child { border: 0; }
.n-s__list b { font-size: var(--w-t-micro); color: var(--ora-accent-text); }
.n-s__list span { font-size: calc(.95rem * var(--w-ar)); color: var(--w-text); }
.n-s__chips { display: flex; flex-wrap: wrap; }
.n-s__chips li { padding: 8px 14px; border-radius: 999px; border: var(--n-line); background: var(--w-base-2); font-size: calc(.9rem * var(--w-ar)); color: var(--w-text-2); }
.n-s__path { counter-reset: n; }
.n-s__path li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--w-base-2); border: var(--n-line); font-weight: 600; font-size: calc(.95rem * var(--w-ar)); color: var(--w-text); }
.n-s__path li::before { counter-increment: n; content: counter(n); display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--ora-accent-wash); color: var(--ora-accent-text); font-size: var(--w-t-micro); flex: none; }
.n-s__book { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.n-s__book img { border-radius: 8px; box-shadow: var(--w-depth-1); }
.n-s__book div { display: grid; gap: 6px; }
.n-s__book b { font-family: var(--n-display); font-size: calc(1.1rem * var(--w-ar)); }
.n-s__book span { font-size: var(--w-t-small); color: var(--w-text-3); }
.n-s__prog { display: block; block-size: 5px; border-radius: 3px; background: linear-gradient(to right, var(--ora-accent-solid) 68%, var(--w-line) 68%); }
[dir="rtl"] .n-s__prog { background: linear-gradient(to left, var(--ora-accent-solid) 68%, var(--w-line) 68%); }
.n-s__book em { font-style: normal; font-weight: 600; font-size: var(--w-t-small); color: var(--ora-accent-text); }
.n-phone__dock { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-radius: 28px; background: color-mix(in srgb, var(--w-base-3) 80%, transparent); }
.n-phone__dock button { display: grid; justify-items: center; gap: 4px; inline-size: 100%; min-block-size: 54px; padding: 6px 2px; border: 0; border-radius: 18px; background: transparent; color: var(--w-text-3); font-size: 11px; font-weight: 600; cursor: pointer; transition: background var(--n-fast), color var(--n-fast); }
.n-phone__dock button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.n-phone__dock button:hover { color: var(--w-text); }
.n-phone__dock button[aria-selected="true"] { background: var(--w-base); color: var(--ora-accent-text); box-shadow: var(--w-depth-1); }

/* the flagship product: a real 3D book that Living lights up */
.n-flag { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.n-book { position: relative; perspective: 1600px; inline-size: 100%; aspect-ratio: 1 / 1.77; cursor: grab; --tilt: 0deg; --lift: 0deg; --open: 30deg; }
[dir="ltr"] .n-book { --open: 30deg; }
.n-book__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--open) + var(--tilt))) rotateX(var(--lift)); transition: transform var(--n-scene) var(--n-ease); }
.n-book:is(:hover, :focus-visible) .n-book__inner { transform: rotateY(calc(12deg + var(--tilt))) rotateX(var(--lift)) translateZ(20px); }
.n-flag[data-lit] .n-book__inner { transform: rotateY(calc(6deg + var(--tilt))) rotateX(var(--lift)) translateZ(46px) translateY(-10px); }
.n-book__cover, .n-book__back, .n-book__pages { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; }
.n-book__cover { transform: translateZ(24px); overflow: hidden; background: var(--w-base-3); box-shadow: inset -6px 0 12px rgb(var(--w-shadow) / .35); }
.n-book__cover img { display: block; inline-size: 118%; max-inline-size: none; block-size: 100%; object-fit: fill; }
.n-book__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--w-silver-bright) 26%, transparent) 46%, transparent 58%); mix-blend-mode: screen; transform: translateX(-70%); transition: transform 1.2s var(--n-ease-world); }
.n-book:hover .n-book__cover::after, .n-flag[data-lit] .n-book__cover::after { transform: translateX(70%); }
.n-book__back { transform: translateZ(-24px); background: var(--w-base-4); }
.n-book__pages { inset-block: 1.2%; inset-inline: auto; left: 0; inline-size: 48px; transform: translateX(-24px) rotateY(-90deg); border-radius: 0; background: repeating-linear-gradient(to right, var(--w-base-2) 0 1.5px, var(--w-base-4) 1.5px 3px); }
.n-book__shadow { position: absolute; inset-inline: 6%; inset-block-end: -9%; block-size: 12%; border-radius: 50%; background: rgb(var(--w-shadow) / .55); filter: blur(22px); z-index: -1; transition: transform var(--n-scene) var(--n-ease), opacity var(--n-scene); }
.n-flag[data-lit] .n-book__shadow { transform: scale(.82); opacity: .6; }
.n-book::before { content: ""; position: absolute; inset: 6% -12%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--w-glow) / .45), transparent 66%); filter: blur(30px); opacity: .45; transition: opacity var(--n-scene); z-index: -1; }
.n-flag[data-lit] .n-book::before, .n-book:hover::before { opacity: 1; }
.n-price { margin: 18px 0 0; font-family: var(--n-display); font-weight: 800; font-size: calc(2.2rem * var(--w-ar)); color: var(--w-text); }
.n-flag__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block-start: 22px; }
.n-where { margin-block-start: 20px; padding-inline-start: 14px; border-inline-start: 2px solid color-mix(in srgb, var(--ora-accent-solid) 45%, transparent); }
.n-where__k { margin: 0; font-weight: 600; font-size: var(--w-t-small); color: var(--w-text); }
.n-where .n-fine { margin-block-start: 4px; }

.n-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-block-start: clamp(48px, 7vw, 96px); padding-block-start: 24px; border-block-start: var(--n-line); }
.n-channels { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.n-ch { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; transition: transform var(--n-fast) var(--n-ease); }
.n-ch:hover { transform: translateY(-3px); }
.n-page .n-ch .ora-channel__glyph { display: block; inline-size: 22px; block-size: 22px; -webkit-mask-image: none; mask-image: none; background: none; }
.n-close__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* =========================== responsive =========================== */
@media (max-width: 1100px) {
  .n-field__say { max-inline-size: 46%; }
  .n-orbit { margin-inline-start: 10%; }
  .n-flag { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .n-book { inline-size: min(260px, 70%); }
}
@media (max-width: 860px) {
  .n-field { grid-template-rows: auto minmax(0, 1fr) auto; }
  .n-field__say { position: relative; inset: auto; max-inline-size: none; padding: 22px var(--n-gutter) 0; text-align: center; pointer-events: auto; }
  .n-h1 { justify-items: center; }
  .n-orbit { margin-inline-start: 0; min-block-size: clamp(380px, 52vh, 520px); }
  .n-director { inline-size: min(40vh, 300px, 62%); }
  .n-director__line { inset-inline-start: 50%; translate: var(--n-tx) 0; inset-block-start: -26%; text-align: center; border-end-start-radius: 18px; max-inline-size: 78vw; }
  .n-node__dot { inline-size: 46px; block-size: 46px; }
  .n-node__l { font-size: calc(.8rem * var(--w-ar)); }
  .n-node.is-back .n-node__l { opacity: 0; }
  .n-run__head { align-items: start; }
  .n-report { flex-direction: column; gap: 2px; }
  .n-living__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .n-phone { inline-size: min(100%, 360px); }
  .n-flag { justify-items: center; text-align: center; }
  .n-flag .n-lede { margin-inline: auto; }
  .n-flag__act { justify-content: center; }
  .n-where { text-align: start; }
  .n-close { justify-content: center; }
}

/* =========================== motion preferences =========================== */
@media (prefers-reduced-motion: reduce) {
  .n-page:not([data-n-motion="force"]) *, .n-page:not([data-n-motion="force"]) *::before, .n-page:not([data-n-motion="force"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .n-spark { display: none; }
}


/* ==========================================================================================
   REFINEMENT 01 (Owner CONDITIONAL_PASS, 2026-09-18) — interaction · motion · contrast.
   Later rules on purpose: they re-state hierarchy for the three scenes without touching geometry.
   ========================================================================================== */

/* ---- readable secondary text in both themes ---- */
.n-h1__b, .n-node__l, .n-g__t, .n-phases button, .n-link { color: var(--n-soft); }
.n-fine { color: var(--n-soft); opacity: .86; }

/* ---- THE FIELD: alive, spatial, separated ---- */
.n-field { background: radial-gradient(58% 64% at 64% 56%, var(--w-base-2), var(--w-base) 58%, var(--w-base-3) 130%); }
[dir="rtl"] .n-field { background: radial-gradient(58% 64% at 36% 56%, var(--w-base-2), var(--w-base) 58%, var(--w-base-3) 130%); }
.n-orbit__ring { border-color: var(--n-ring); }
.n-orbit__ring--2 { border-color: var(--n-ring-2); }
.n-director__light { background: radial-gradient(46% 46% at 50% 46%, rgb(var(--w-glow) / var(--n-halo)), rgb(var(--w-glow) / .1) 46%, transparent 72%); }
.n-director::after { content: ""; position: absolute; inset-block-end: 1%; inset-inline: 12%; block-size: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--w-shadow) / var(--n-ground)), transparent); z-index: -1; }
.n-director img { animation: n-float 8s ease-in-out infinite; }
@keyframes n-float { 50% { translate: 0 -7px; } }
.n-director[data-attend] img { transform: translateX(calc(var(--lean, 0) * 6px)) rotate(calc(var(--lean, 0) * .8deg)) translateY(-4px) scale(1.03); }
.n-director__line { transition: border-color var(--n-move), box-shadow var(--n-move); }
.n-director[data-attend] .n-director__line { border-color: color-mix(in srgb, var(--ora-accent-solid) 65%, transparent); box-shadow: 0 0 0 4px rgb(var(--w-glow) / .12), var(--w-depth-1); }
.n-node__dot { border-color: var(--n-edge); color: var(--w-text); background: color-mix(in srgb, var(--w-base-2) 92%, transparent); box-shadow: 0 6px 20px -8px rgb(var(--w-shadow) / .35); }
.n-node.is-seen { opacity: 1; }
.n-node.is-seen .n-node__dot { border-color: var(--ora-accent-solid); color: var(--ora-accent-text); box-shadow: 0 0 0 5px rgb(var(--w-glow) / .16), 0 0 34px rgb(var(--w-glow) / .45); transform: scale(1.12); }
.n-node.is-seen .n-node__dot::after { opacity: .9; }
.n-node.is-seen .n-node__l { color: var(--w-text); }
.n-command__bar { border-color: var(--n-edge); }

/* ---- THE RUN: future · completed · active ---- */
.n-stage { min-block-size: clamp(430px, 58vh, 640px); }
.n-wire { stroke: var(--n-future); stroke-width: 1.6; stroke-dasharray: .011 .017; opacity: 1; filter: none; transition: stroke var(--n-move), stroke-width var(--n-move), opacity var(--n-move); }
.n-wire.is-done { stroke: var(--n-done); stroke-dasharray: none; stroke-width: 1.8; opacity: .8; filter: none; }
.n-wire.is-now { stroke: var(--ora-accent-solid); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; filter: drop-shadow(0 0 5px rgb(var(--w-glow) / .75)); }
.n-wire--loop { opacity: 0; }
.n-wire--loop.is-now, .n-wire--loop.is-done { opacity: 1; stroke-dasharray: .008 .014; }
/* the work moving through the system: a comet of light travels every active connection */
.n-flow { fill: none; stroke: var(--n-signal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .14 .86; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgb(var(--w-glow) / .95)); transition: opacity var(--n-fast); }
.n-flow.is-now { opacity: 1; animation: n-flow 1.35s cubic-bezier(.45, .05, .55, .95) infinite; }
.n-flow--loop.is-now { animation-duration: 2.1s; }
@keyframes n-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.n-graph__wires--v .n-wire { stroke-width: 2.8; }
.n-graph__wires--v .n-wire.is-now { stroke-width: 4; }
.n-graph__wires--v .n-flow { stroke-width: 6.5; }
.n-spark { display: none; }

.n-g { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; opacity: .74; scale: .96; filter: none; }
.n-g.is-done { opacity: .92; scale: 1; }
.n-g.is-now { opacity: 1; scale: 1.06; }
.n-g__i { position: relative; border-color: var(--n-edge); color: var(--w-text-2); box-shadow: 0 8px 22px -10px rgb(var(--w-shadow) / .4); }
.n-g.is-done .n-g__i { border-color: var(--n-done); color: var(--ora-accent-text); background: color-mix(in srgb, var(--ora-accent-wash) 70%, var(--w-base-2)); }
.n-g.is-now .n-g__i { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); border-color: transparent; box-shadow: 0 0 0 6px rgb(var(--w-glow) / .16), 0 0 36px rgb(var(--w-glow) / .6); }
.n-g.is-now .n-g__i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--ora-accent-solid); animation: n-ping 1.8s var(--n-ease) infinite; }
@keyframes n-ping { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.55); } }
.n-g.is-now .n-g__t, .n-g.is-done .n-g__t { color: var(--w-text); }
.n-g__n { position: absolute; inset-block-start: -8px; inset-inline-start: calc(50% - 38px); z-index: 2; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--w-base-2); border: 1px solid var(--n-edge); color: var(--n-soft); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; transition: background var(--n-move), color var(--n-move), border-color var(--n-move); }
.n-g.is-done .n-g__n { border-color: var(--n-done); color: var(--ora-accent-text); }
.n-g.is-now .n-g__n { background: var(--ora-accent-solid); border-color: transparent; color: var(--ora-text-on-cta); }
.n-g--wide .n-g__n { inset-inline-start: -6px; inset-block-start: 14px; }
.n-g--core .n-g__n { inset-inline-start: calc(50% - 50px); }
.n-g--gate .n-g__n { inset-inline-start: -8px; inset-block-start: -10px; }
.n-g__ask { border-color: var(--n-edge); transition: border-color var(--n-move), box-shadow var(--n-move); }
.n-g.is-now .n-g__ask { border-color: var(--ora-accent-solid); box-shadow: 0 0 0 5px rgb(var(--w-glow) / .14), 0 0 30px rgb(var(--w-glow) / .35); }
.n-g--core.is-done .n-g__core { filter: drop-shadow(0 0 26px rgb(var(--w-glow) / .6)); }
.n-g__bar { background: var(--n-future); }
.n-g--cap .n-g__bar::after, .n-g--cap.is-on .n-g__bar::after { transform: scaleX(0); transition: transform .4s; }
.n-g--cap.is-work .n-g__bar::after { transform: scaleX(1); transition: transform 2.1s var(--n-ease-world); }
.n-g--k1.is-work .n-g__bar::after { transition-delay: .2s; }
.n-g--k2.is-work .n-g__bar::after { transition-delay: .4s; }
.n-g__gate b { border-color: var(--n-edge); color: var(--n-soft); }
.n-g--gate:is(.is-now, .is-done) b { border-color: color-mix(in srgb, var(--ora-accent-solid) 55%, transparent); color: var(--w-text); }
.n-g--gate:is(.is-now, .is-done) b:nth-child(2) { transition-delay: .45s; }
.n-g--gate:is(.is-now, .is-done) b:nth-child(3) { transition-delay: .9s; background: var(--ora-accent-wash); }
.n-graph .n-g--out:is(.is-now, .is-done) .n-g__i { background: var(--w-ok); color: var(--w-base); border-color: transparent; box-shadow: 0 0 0 6px color-mix(in srgb, var(--w-ok) 18%, transparent), 0 0 34px color-mix(in srgb, var(--w-ok) 50%, transparent); transition-delay: 1.2s; }
.n-graph .n-g--out.is-now .n-g__i::after { border-color: var(--w-ok); animation-delay: 1.2s; }
.n-graph.is-resetting :is(.n-g, .n-wire, .n-flow) { opacity: .3; transition: opacity .6s; }
.n-report__line.is-tick { animation: n-rise .55s var(--n-ease); }
.n-phases button i { background: var(--n-future); }
.n-actor { translate: 0 calc(var(--walk, 0) * -12px); transition: translate 1.2s var(--n-ease); }
.n-actor img { animation: n-float 9s ease-in-out infinite; }
.n-actor::after { block-size: 2.5px; background: linear-gradient(90deg, rgb(var(--w-glow) / .9), rgb(var(--w-glow) / .12)); }
.n-actor::before { content: ""; position: absolute; inset-block-end: 3%; inset-inline: 14%; block-size: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--w-shadow) / var(--n-ground)), transparent); z-index: -1; }
.n-actor__light { background: radial-gradient(46% 46% at 50% 46%, rgb(var(--w-glow) / var(--n-halo)), transparent 70%); }

/* ---- LIVING → PRODUCT → ACTION: one focus at a time ---- */
.n-phone { border-color: var(--n-edge); }
.n-phone__screens, .n-s__dir, .n-s__path li, .n-s__chips li { border-color: var(--n-edge); }
.n-phone, .n-flag { transition: opacity .9s var(--n-ease), transform .9s var(--n-ease), filter .9s; }
.n-tether { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 380px; inline-size: clamp(32px, 6vw, 96px); block-size: 2px; pointer-events: none; }
.n-tether i { display: block; block-size: 100%; border-radius: 2px; background: linear-gradient(to right, var(--ora-accent-solid), rgb(var(--w-glow) / .15)); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .9s var(--n-ease-world), opacity .5s; filter: drop-shadow(0 0 6px rgb(var(--w-glow) / .9)); }
[dir="rtl"] .n-tether i { background: linear-gradient(to left, var(--ora-accent-solid), rgb(var(--w-glow) / .15)); transform-origin: right; }
.n-living__stage:is([data-beat="2"], [data-beat="3"]) .n-tether i { transform: scaleX(1); opacity: 1; }
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="-1"], [data-beat="0"], [data-beat="1"], [data-beat="2"]) .n-flag { opacity: .4; transform: scale(.93); filter: saturate(.5); }
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="3"], [data-beat="4"], [data-beat="5"], [data-beat="6"]) .n-phone { opacity: .7; transform: scale(.95); filter: saturate(.75); }
.n-living__stage[data-beat="2"] .n-s__book { animation: n-call 1s var(--n-ease) 2; border-radius: 14px; }
@keyframes n-call { 50% { box-shadow: 0 0 0 8px rgb(var(--w-glow) / .16), 0 0 40px rgb(var(--w-glow) / .4); } }
.n-flag__body > * { transition: opacity .7s var(--n-ease), transform .7s var(--n-ease); }
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:not([data-seen]) .n-flag__body > * { opacity: 0; transform: translateY(14px); }
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="4"], [data-beat="5"], [data-beat="6"]) .n-flag__body > :is(.n-kicker, .n-h3, .n-lede),
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="5"], [data-beat="6"]) .n-flag__body > .n-where,
.n-page[data-n-js]:not([data-n-still]) .n-living__stage[data-beat="6"] .n-flag__body > :is(.n-price, .n-flag__act) { opacity: 1; transform: none; }
.n-living__stage .n-flag__body > .n-h3 { transition-delay: .12s; }
.n-living__stage .n-flag__body > .n-lede { transition-delay: .24s; }
.n-living__stage[data-beat="6"] .n-buy { animation: n-pop .9s var(--n-ease); }
@keyframes n-pop { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgb(var(--w-glow) / .5); } 60% { transform: scale(1.04); box-shadow: 0 0 0 14px rgb(var(--w-glow) / 0); } 100% { transform: none; } }
.n-where { border-inline-start-color: color-mix(in srgb, var(--ora-accent-solid) 60%, transparent); }

/* ---- responsive motion: each width has its own composition ---- */
@media (max-width: 700px) {
  .n-stage { min-block-size: 590px; }
  .n-g__n { inline-size: 17px; block-size: 17px; font-size: 10px; inset-inline-start: calc(50% - 30px); }
  .n-g--wide .n-g__n { inset-inline-start: -4px; inset-block-start: -8px; }
  .n-g--core .n-g__n { inset-inline-start: calc(50% - 40px); }
  .n-actor { inline-size: 112px; }
}
@media (max-width: 860px) {
  .n-tether { display: none; }
  .n-page[data-n-js]:not([data-n-still]) .n-living__stage .n-flag, .n-page[data-n-js]:not([data-n-still]) .n-living__stage .n-phone { opacity: 1; transform: none; filter: none; }
}

/* the upright graph for phones and tablet portrait */
@media (max-width: 860px) {
  .n-graph { inset-inline-end: 0; }
  .n-graph__wires--h { display: none; }
  .n-graph__wires--v { display: block; }
  .n-g--ask { --x: 50%; --y: 7%; } .n-g--read { --x: 26%; --y: 24%; } .n-g--ctx { --x: 74%; --y: 24%; } .n-g--plan { --x: 50%; --y: 42%; }
  .n-g--k0 { --x: 17%; --y: 62%; } .n-g--k1 { --x: 50%; --y: 62%; } .n-g--k2 { --x: 83%; --y: 62%; } .n-g--gate { --x: 50%; --y: 80%; } .n-g--out { --x: 50%; --y: 95%; }
  .n-g__i { inline-size: 40px; block-size: 40px; }
  .n-g__t { font-size: calc(.74rem * var(--w-ar)); max-inline-size: 11ch; }
  .n-g__ask { max-inline-size: 30ch; padding: 8px 12px; font-size: calc(.85rem * var(--w-ar)); }
  .n-g--ask .n-g__k { display: none; }
  .n-g__core { inline-size: 70px; block-size: 70px; } .n-g__core img { inline-size: 54px; block-size: 54px; }
  .n-g__gate { display: flex; gap: 4px; } .n-g__gate b { padding: 4px 8px; font-size: 10px; }
  .n-g--out .n-g__i { inline-size: 44px; block-size: 44px; } .n-g--out .n-g__t { display: none; }
  .n-g__bar { inline-size: 44px; }
  .n-actor { inset-block-end: 2%; }
}

/* anchors clear the floating header */
.n-run, .n-living { scroll-margin-block-start: var(--n-nav); }

/* tablet portrait: a centred upright run with the Director beside it, a larger Director in the field */
@media (min-width: 701px) and (max-width: 860px) {
  .n-orbit { min-block-size: clamp(520px, 54vh, 720px); }
  .n-director { inline-size: min(42vh, 440px, 58%); }
  .n-stage { min-block-size: 720px; }
  .n-graph { inset-inline: 8% 26%; }
  .n-g__i { inline-size: 52px; block-size: 52px; }
  .n-g__t { font-size: calc(.92rem * var(--w-ar)); max-inline-size: 14ch; }
  .n-g__ask { font-size: calc(1rem * var(--w-ar)); padding: 12px 16px; }
  .n-g__core { inline-size: 92px; block-size: 92px; }
  .n-g__core img { inline-size: 72px; block-size: 72px; }
  .n-g__gate b { padding: 6px 12px; font-size: var(--w-t-micro); }
  .n-g--out .n-g__i { inline-size: 56px; block-size: 56px; }
  .n-g__n { inline-size: 20px; block-size: 20px; font-size: 11px; inset-inline-start: calc(50% - 38px); }
  .n-actor { inline-size: 230px; inset-block-end: 4%; }
  .n-report { flex-direction: row; gap: 14px; }
}

/* ---- performance: nothing that moves is blurred or filtered ---- */
.n-node__dot, .n-director__line { backdrop-filter: none; -webkit-backdrop-filter: none; }
.n-node__dot { background: var(--w-base-2); }
.n-director__line { background: var(--w-base-2); }
.n-wire.is-now, .n-flow, .n-actor::after { filter: none; }
.n-wire.is-now { stroke-width: 2.8; }
.n-flow { stroke-width: 5; }
.n-graph__wires--v .n-flow { stroke-width: 7.5; }
.n-node, .n-flow { will-change: auto; }

@media (max-width: 860px) {
  /* phones and tablets: masked rasters do not animate; the lattice, the orbit and the path light carry the life */
  .n-actor img, .n-director img { animation: none; }
  .n-command__bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--w-base-2); }
}

/* the still state (OS reduced motion): nothing animates */
.n-page[data-n-still] *, .n-page[data-n-still] *::before, .n-page[data-n-still] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }


/* ==========================================================================================
   FINAL POLISH (Owner: ACCEPTED_IN_PRINCIPLE, 2026-09-19) — intent icons · active depth · phones.
   ========================================================================================== */

/* ---- intents: larger, clearer, each with its own signal colour (derived from tokens only) ---- */
.n-node { --c: var(--ora-accent-solid); --nd: .5; }
.n-node--c0 { --c: var(--w-ok); }
.n-node--c1 { --c: color-mix(in srgb, var(--ora-accent-solid) 42%, var(--w-err)); }
.n-node--c2 { --c: var(--n-blue); }
.n-node--c3 { --c: var(--w-warn); }
.n-node--c4 { --c: var(--w-err); }
.n-node--c5 { --c: var(--ora-accent-solid); }
.n-node--c6 { --c: color-mix(in srgb, var(--ora-accent-solid) 50%, var(--n-blue)); }
.n-node button { gap: 10px; }
.n-node__dot { inline-size: 70px; block-size: 70px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--w-base-2)); border: 1.5px solid color-mix(in srgb, var(--c) 58%, transparent);
  box-shadow: 0 16px 32px -14px rgb(var(--w-shadow) / .5), 0 0 24px color-mix(in srgb, var(--c) 24%, transparent); }
.n-node__dot .ora-i { inline-size: 28px; block-size: 28px; stroke-width: 2.1; }
.n-node__dot::after { background: radial-gradient(circle, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); }
.n-node__l { font-size: calc(1rem * var(--w-ar)); font-weight: 700; color: var(--n-soft); transition: color var(--n-fast), opacity var(--n-move); }
.n-node.is-back .n-node__l { opacity: 0; }
.n-node.is-front .n-node__l { color: var(--w-text); }
.n-node.is-front .n-node__dot { border-color: var(--c); }
.n-node button:hover .n-node__dot { color: var(--c); border-color: var(--c); transform: scale(1.08); }
.n-node.is-seen .n-node__dot { color: var(--c); border-color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 40px color-mix(in srgb, var(--c) 50%, transparent); transform: scale(1.14); }
.n-node.is-on .n-node__dot { background: var(--c); color: var(--w-base); border-color: transparent; transform: scale(1.2); box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 20%, transparent), 0 0 54px color-mix(in srgb, var(--c) 60%, transparent); }
.n-node.is-on .n-node__l, .n-node.is-seen .n-node__l { color: var(--w-text); opacity: 1; }

/* ---- the run: a stronger active-depth hierarchy (future recedes, done rests, active comes forward) ---- */
.n-g { opacity: .68; scale: .9; }
.n-g.is-done { opacity: .9; scale: .97; }
.n-g.is-now { opacity: 1; scale: 1.14; z-index: 3; }
.n-g.is-now .n-g__t { font-weight: 700; }
.n-g.is-now .n-g__i { box-shadow: 0 0 0 7px rgb(var(--w-glow) / .18), 0 18px 44px -10px rgb(var(--w-glow) / .7); }
.n-wire.is-done { opacity: .72; }
.n-wire.is-now { stroke-width: 3.2; }
.n-graph__wires--v .n-wire.is-now { stroke-width: 4.6; }
.n-report__line { transition: color var(--n-move); }

/* ---- Living: the focused object comes forward, the other recedes further ---- */
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="-1"], [data-beat="0"], [data-beat="1"], [data-beat="2"]) .n-phone { transform: scale(1.02); }
.n-page[data-n-js]:not([data-n-still]) .n-living__stage:is([data-beat="-1"], [data-beat="0"], [data-beat="1"], [data-beat="2"]) .n-flag { opacity: .34; transform: scale(.9); }

/* ---- phones and tablets: cheaper paint ---- */
@media (max-width: 860px) {
  .n-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--w-base) 94%, transparent); }
  .n-node__dot { inline-size: 56px; block-size: 56px; box-shadow: 0 8px 18px -10px rgb(var(--w-shadow) / .5); }
  .n-node__dot .ora-i { inline-size: 23px; block-size: 23px; }
  .n-node__l { font-size: calc(.86rem * var(--w-ar)); }
  .n-g.is-now { scale: 1.1; }
  .n-page[data-n-js]:not([data-n-still]) .n-living__stage .n-phone, .n-page[data-n-js]:not([data-n-still]) .n-living__stage .n-flag { opacity: 1; transform: none; }
}

/* phones: the path light updates at ~30 steps a second, the ping is compositor-only, no masked backdrop */
.n-g.is-now .n-g__i::after { will-change: transform, opacity; }
@media (max-width: 860px) {
  .n-flow.is-now { animation-timing-function: steps(40, end); }
  .n-stage::before { -webkit-mask-image: none; mask-image: none; background: radial-gradient(46% 40% at 50% 44%, rgb(var(--w-glow) / .12), transparent 70%); }
}

.n-node.is-veiled { pointer-events: none; }

/* orbiting intents live on their own compositor layers: per-frame values are transform and opacity only
   (no per-frame shadow, no per-frame transition) */
.n-node { will-change: transform, opacity; }

/* upright graph: a little more air between the core's two-line label and the capability row */
@media (max-width: 860px) {
  .n-g--k0 { --y: 64.5%; } .n-g--k1 { --y: 64.5%; } .n-g--k2 { --y: 64.5%; }
  .n-g--gate { --y: 81.5%; }
}


/* ==========================================================================================
   THE WHOLE WEBSITE (2026-09-19) — the inner-page kit of the same system (LOCK v1.0 extension).
   Quiet field header · sections · the Director figure · path · pick · definitions · web ·
   product stage on a page · reading surface · scan · forms · doors · footer.
   Motion follows purpose: paths and picks tell themselves; forms and company pages stay calm.
   ========================================================================================== */
.n-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.n-p { margin: 12px 0 0; color: var(--n-soft); line-height: 1.75; max-inline-size: 62ch; }
.n-p a, .n-note a { color: var(--ora-accent-text); text-underline-offset: 3px; }
.n-statement { margin: 14px 0 0; font-size: calc(clamp(1.05rem, .95rem + .5vw, 1.35rem) * var(--w-ar)); line-height: 1.8; color: var(--w-text); max-inline-size: 56ch; }
.n-note { margin: 18px 0 0; padding: 14px 16px; border-inline-start: 2px solid color-mix(in srgb, var(--ora-accent-solid) 60%, transparent); background: color-mix(in srgb, var(--ora-accent-wash) 45%, transparent); border-radius: 0 12px 12px 0; color: var(--w-text-2); font-size: var(--w-t-small); line-height: 1.7; max-inline-size: 62ch; }
[dir="rtl"] .n-note { border-radius: 12px 0 0 12px; }
.n-note b { color: var(--w-text); }
.n-keep { margin: 28px auto 0; text-align: center; color: var(--n-soft); max-inline-size: 60ch; }
.n-keep b { color: var(--w-text); }
.n-fine--center { text-align: center; margin-inline: auto; }
.n-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-start: 26px; }
.n-actions--center { justify-content: center; }
.n-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.n-ticks li { display: flex; align-items: center; gap: 10px; color: var(--w-text-2); }
.n-ticks .ora-i { color: var(--ora-accent-solid); }
.n-inline { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.n-inline a { color: var(--n-soft); font-weight: 600; text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.n-inline a:hover { color: var(--w-text); }
.n-page .ora-accounts { justify-content: center; }

/* the shared intent / tone colours (token-derived) */
.n-tone--0 { --c: var(--w-ok); } .n-tone--1 { --c: color-mix(in srgb, var(--ora-accent-solid) 42%, var(--w-err)); } .n-tone--2 { --c: var(--n-blue); }
.n-tone--3 { --c: var(--w-warn); } .n-tone--4 { --c: var(--w-err); } .n-tone--5 { --c: var(--ora-accent-solid); } .n-tone--6 { --c: color-mix(in srgb, var(--ora-accent-solid) 50%, var(--n-blue)); }

/* ---- quiet field header ---- */
.n-h1--page { font-size: calc(clamp(2rem, 1rem + 3vw, 3.7rem) * var(--w-ar)); max-inline-size: 20ch; display: block; }
.n-head { position: relative; overflow: hidden; padding-block: clamp(56px, 9vh, 120px) clamp(40px, 6vh, 80px); min-block-size: min(58svh, 620px); display: grid; align-items: center; background: radial-gradient(58% 70% at 76% 56%, var(--w-base-2), var(--w-base) 60%, var(--w-base-3) 140%); }
[dir="rtl"] .n-head { background: radial-gradient(58% 70% at 24% 56%, var(--w-base-2), var(--w-base) 60%, var(--w-base-3) 140%); }
.n-head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 26%; background: linear-gradient(to top, var(--w-base), transparent); pointer-events: none; }
.n-head__in { position: relative; z-index: 3; inline-size: min(100% - 2 * var(--n-gutter), var(--n-max)); margin-inline: auto; }
.n-head__say { max-inline-size: 680px; }
.n-head--aside .n-head__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.n-reveal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.n-flag--hero { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); }
.n-flag--hero .n-book { inline-size: min(100%, 360px); }
.n-flag--page { grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); margin-block-start: clamp(24px, 4vw, 48px); }
.n-head .n-where { max-inline-size: 60ch; }

/* ---- sections ---- */
.n-sec { position: relative; padding-block: clamp(64px, 8vw, 124px); }
.n-sec + .n-sec::before, .n-head + .n-sec::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: radial-gradient(40% 200% at 50% 100%, color-mix(in srgb, var(--w-silver) 50%, transparent), transparent); }
.n-sec__in { inline-size: min(100% - 2 * var(--n-gutter), var(--n-max)); margin-inline: auto; }
.n-narrow { max-inline-size: 860px; }
.n-sec__head { max-inline-size: 760px; margin-block-end: clamp(28px, 4vw, 52px); }
.n-h2--xl { font-size: calc(clamp(2rem, 1.1rem + 2.9vw, 3.9rem) * var(--w-ar)); }
.n-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.n-split--actor { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.n-split--form { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.n-split--wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.n-split__lead .n-sec__head { margin-block-end: 20px; }

/* ---- the Director figure ---- */
.n-figure { position: relative; display: grid; justify-items: center; inline-size: min(100%, 360px); margin-inline: auto; }
.n-figure img { display: block; inline-size: 100%; -webkit-mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); mask-image: radial-gradient(58% 66% at 50% 40%, rgb(0 0 0) 52%, transparent 96%); }
.n-figure__light { position: absolute; inset: -12% -30% 8%; z-index: -1; background: radial-gradient(46% 46% at 50% 46%, rgb(var(--w-glow) / var(--n-halo)), transparent 70%); }
.n-figure::after { content: ""; position: absolute; inset-block-end: 2%; inset-inline: 14%; block-size: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--w-shadow) / var(--n-ground)), transparent); z-index: -1; }
.n-figure__line { position: absolute; inset-block-start: 2%; inset-inline-start: 62%; margin: 0; inline-size: max-content; max-inline-size: min(260px, 56vw); padding: 12px 16px; border-radius: 18px; border-end-start-radius: 4px; background: var(--w-base-2); border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 40%, var(--n-edge)); color: var(--w-text); font-weight: 600; font-size: calc(.95rem * var(--w-ar)); line-height: 1.5; box-shadow: var(--w-depth-1); }
.n-figure--assist { inline-size: min(100%, 300px); margin-block-start: 40px; }
.n-figure--peek { position: absolute; inset-block-end: -6%; inset-inline-end: -4%; inline-size: 150px; margin: 0; }

/* ---- PATH: a sequence that tells itself ---- */
.n-path { --p: 0; position: relative; }
.n-path__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.n-path__step { position: relative; display: grid; align-content: start; gap: 8px; padding-inline-end: 18px; opacity: .72; transition: opacity var(--n-move) var(--n-ease); }
.n-path__step::after { content: ""; position: absolute; inset-block-start: 25px; inset-inline-start: 52px; inline-size: calc(100% - 56px); block-size: 2px; border-radius: 2px; background: linear-gradient(to right, var(--ora-accent-solid), var(--ora-accent-solid)) no-repeat, var(--n-future); background-size: 0% 100%, 100% 100%; transition: background-size .9s var(--n-ease-world); }
[dir="rtl"] .n-path__step::after { background-position: right, 0 0; }
.n-path__step:last-child::after { display: none; }
.n-path__step.is-done::after { background-size: 100% 100%, 100% 100%; }
.n-path__btn { display: grid; justify-items: start; gap: 10px; padding: 0; border: 0; background: transparent; text-align: start; cursor: pointer; }
.n-path__dot { position: relative; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--w-base-2); border: 1.5px solid var(--n-edge); color: var(--w-text-2); box-shadow: 0 8px 22px -12px rgb(var(--w-shadow) / .45); transition: background var(--n-move), color var(--n-move), border-color var(--n-move), box-shadow var(--n-move), transform var(--n-move) var(--n-ease); }
.n-path__dot em { font-style: normal; font-weight: 700; font-size: 15px; }
.n-path__btn b { font-family: var(--n-display); font-size: calc(1.05rem * var(--w-ar)); color: var(--w-text-2); transition: color var(--n-move); }
.n-path__p { margin: 0; font-size: var(--w-t-small); color: var(--n-soft); line-height: 1.6; max-inline-size: 30ch; }
.n-path__step.is-done { opacity: .95; }
.n-path__step.is-done .n-path__dot { border-color: var(--n-done); color: var(--ora-accent-text); background: color-mix(in srgb, var(--ora-accent-wash) 70%, var(--w-base-2)); }
.n-path__step.is-now { opacity: 1; }
.n-path__step.is-now .n-path__dot { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 0 6px rgb(var(--w-glow) / .16), 0 16px 40px -10px rgb(var(--w-glow) / .7); }
.n-path__step.is-now .n-path__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--ora-accent-solid); animation: n-ping 1.8s var(--n-ease) infinite; will-change: transform, opacity; }
.n-path__step.is-now b, .n-path__step.is-done b { color: var(--w-text); }
.n-path__report { margin: clamp(22px, 3vw, 36px) 0 0; font-family: var(--n-display); font-weight: 600; font-size: calc(clamp(1.05rem, .9rem + .7vw, 1.5rem) * var(--w-ar)); line-height: 1.45; color: var(--w-text); min-block-size: 2.9em; max-inline-size: 40ch; }
.n-path__report.is-tick, .n-pick__view.is-tick { animation: n-rise .5s var(--n-ease); }
/* stacked (vertical) */
.n-path--stack .n-path__steps { grid-auto-flow: row; gap: 0; }
.n-path--stack .n-path__step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px; }
.n-path--stack .n-path__step::after { inset-block-start: 56px; inset-inline-start: 25px; inline-size: 2px; block-size: calc(100% - 58px); background: linear-gradient(to bottom, var(--ora-accent-solid), var(--ora-accent-solid)) no-repeat, var(--n-future); background-size: 100% 0%, 100% 100%; }
.n-path--stack .n-path__step.is-done::after { background-size: 100% 100%, 100% 100%; }
.n-path--stack .n-path__btn { grid-column: 1 / -1; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; justify-items: start; inline-size: 100%; }
.n-path--stack .n-path__p { grid-column: 2; margin-block-start: -6px; max-inline-size: 44ch; }
.n-path--quiet .n-path__dot { inline-size: 40px; block-size: 40px; } .n-path--quiet .n-path__step::after { inset-inline-start: 19px; inset-block-start: 44px; block-size: calc(100% - 46px); }
.n-path--quiet .n-path__step { grid-template-columns: 40px minmax(0, 1fr); } .n-path--quiet .n-path__btn { grid-template-columns: 40px minmax(0, 1fr); }
.n-path--gate { margin-block-start: 8px; max-inline-size: 520px; }
.n-path--wide { max-inline-size: 1040px; margin-inline: auto; }

/* ---- PICK: a chooser that also cycles on its own ---- */
.n-pick { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.n-pick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.n-pick__btn { --c: var(--ora-accent-solid); display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 54px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--n-soft); font-weight: 600; font-size: calc(1rem * var(--w-ar)); text-align: start; cursor: pointer; transition: background var(--n-fast), color var(--n-fast), border-color var(--n-fast); }
[dir="rtl"] .n-pick__btn { padding: 6px 6px 6px 14px; }
.n-pick__i { display: grid; place-items: center; inline-size: 42px; block-size: 42px; flex: none; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--w-base-2)); border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent); transition: background var(--n-move), color var(--n-move), transform var(--n-move) var(--n-ease), box-shadow var(--n-move); }
.n-pick__i em { font-style: normal; font-weight: 700; font-size: 14px; }
.n-pick__btn:hover { color: var(--w-text); }
.n-pick__btn.is-on { color: var(--w-text); background: color-mix(in srgb, var(--c) 9%, var(--w-base-2)); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.n-pick__btn.is-on .n-pick__i { background: var(--c); color: var(--w-base); transform: scale(1.08); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), 0 12px 30px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.n-pick__view { min-block-size: 9.5em; }
.n-pick__h { margin: 0; font-family: var(--n-display); font-weight: 800; font-size: calc(clamp(1.5rem, 1rem + 1.7vw, 2.6rem) * var(--w-ar)); line-height: 1.2; color: var(--w-text); text-wrap: balance; }
.n-pick__p { margin: 14px 0 0; font-size: calc(clamp(1rem, .95rem + .3vw, 1.2rem) * var(--w-ar)); line-height: 1.75; color: var(--n-soft); max-inline-size: 48ch; }
.n-pick--wide { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); }
.n-pick--wide .n-pick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.n-pick--wide .n-pick__btn { inline-size: auto; }
/* the sizes of work: the same chooser drawn as a growing scale */
.n-pick--scale { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(26px, 4vw, 48px); }
.n-pick--scale .n-pick__list { display: flex; align-items: end; justify-content: center; gap: clamp(8px, 2.4vw, 34px); position: relative; padding-block-end: 4px; }
.n-pick--scale .n-pick__list::before { content: ""; position: absolute; inset-inline: 4%; inset-block-end: 50px; block-size: 1px; background: var(--n-future); }
.n-pick--scale .n-pick__btn { flex-direction: column; inline-size: auto; min-block-size: 0; padding: 0; gap: 12px; border-radius: 16px; background: transparent; border-color: transparent; font-size: calc(.9rem * var(--w-ar)); max-inline-size: 13ch; text-align: center; }
.n-pick--scale .n-pick__btn.is-on { background: transparent; border-color: transparent; }
.n-pick--scale li:nth-child(1) .n-pick__i { inline-size: 40px; block-size: 40px; } .n-pick--scale li:nth-child(2) .n-pick__i { inline-size: 54px; block-size: 54px; }
.n-pick--scale li:nth-child(3) .n-pick__i { inline-size: 70px; block-size: 70px; } .n-pick--scale li:nth-child(4) .n-pick__i { inline-size: 88px; block-size: 88px; } .n-pick--scale li:nth-child(5) .n-pick__i { inline-size: 108px; block-size: 108px; }
.n-pick--scale .n-pick__view { min-block-size: 8em; }
.n-pick--scale .n-pick__p { margin-inline: auto; }

/* ---- definitions: plain statements, no boxes ---- */
.n-defs { margin: 0; display: grid; gap: 22px 40px; }
.n-defs > div { padding-inline-start: 18px; border-inline-start: 2px solid color-mix(in srgb, var(--ora-accent-solid) 45%, transparent); }
.n-defs dt { font-family: var(--n-display); font-weight: 700; font-size: calc(1.1rem * var(--w-ar)); color: var(--w-text); }
.n-defs dd { margin: 6px 0 0; color: var(--n-soft); line-height: 1.7; max-inline-size: 46ch; }
.n-defs--row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.n-defs--lg dt { font-size: calc(1.35rem * var(--w-ar)); }
.n-systems { margin-block-start: clamp(44px, 6vw, 80px); }
.n-systems .n-h3 { font-size: calc(clamp(1.3rem, 1rem + 1vw, 1.9rem) * var(--w-ar)); margin-block-end: 24px; }

/* ---- WEB: your field › OraCleid › your channels ---- */
.n-web { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 8vw, 140px); min-block-size: clamp(380px, 46vw, 520px); }
.n-web__wires { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.n-web__side { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6vw, 20px); position: relative; z-index: 2; }
.n-web__side--a { justify-items: end; } .n-web__side--b { justify-items: start; }
.n-web__item { display: flex; align-items: center; gap: 12px; color: var(--n-soft); font-weight: 600; font-size: calc(1rem * var(--w-ar)); opacity: .8; transition: opacity var(--n-move), color var(--n-move), transform var(--n-move) var(--n-ease); }
.n-web__side--a .n-web__item { flex-direction: row-reverse; }
.n-web__dot { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--w-base-2); border: 1.5px solid var(--n-edge); color: var(--w-text-2); transition: background var(--n-move), color var(--n-move), border-color var(--n-move), box-shadow var(--n-move); }
.n-web .n-ch { inline-size: 52px; block-size: 52px; box-shadow: 0 10px 24px -12px rgb(var(--w-shadow) / .55); transition: transform var(--n-move) var(--n-ease), box-shadow var(--n-move); }
.n-web .n-ch .ora-channel__glyph { inline-size: 25px; block-size: 25px; }
.n-web__item.is-now { opacity: 1; color: var(--w-text); transform: scale(1.06); }
.n-web__item.is-now .n-web__dot { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); border-color: transparent; box-shadow: 0 0 0 6px rgb(var(--w-glow) / .16), 0 14px 34px -10px rgb(var(--w-glow) / .7); }
.n-web__item.is-now .n-ch { transform: scale(1.12); box-shadow: 0 0 0 6px rgb(var(--w-glow) / .16), 0 14px 34px -10px rgb(var(--w-glow) / .6); }
.n-web__core { position: relative; z-index: 2; display: grid; place-items: center; inline-size: clamp(96px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--w-base-2) 92%, transparent) 46%, transparent 74%); filter: drop-shadow(0 0 26px rgb(var(--w-glow) / .5)); transition: transform var(--n-scene) var(--n-ease); }
.n-web__core img { inline-size: 78%; block-size: auto; }
.n-web__core.is-now { animation: n-core 2.6s var(--n-ease) infinite; }
@keyframes n-core { 50% { transform: scale(1.07); } }
.n-web .n-wire { stroke-dasharray: .012 .02; }

/* ---- what can start today · closing action ---- */
.n-today__in { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(26px, 4vw, 52px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 32%, var(--n-edge)); background: linear-gradient(120deg, color-mix(in srgb, var(--ora-accent-wash) 60%, var(--w-base-2)), var(--w-base-2) 70%); }
.n-today__act { display: grid; gap: 10px; justify-items: start; }
.n-today__act .n-fine { margin: 0; }
.n-action { text-align: center; overflow: hidden; }
.n-action::after { content: ""; position: absolute; inset-inline: 20%; inset-block-end: -30%; block-size: 70%; background: radial-gradient(50% 50% at 50% 50%, rgb(var(--w-glow) / .26), transparent 70%); pointer-events: none; z-index: -1; }
.n-action__in { display: grid; justify-items: center; }
.n-action .n-lede { margin-inline: auto; text-align: center; }

/* ---- products: kinds · catalogue ---- */
.n-kindlist { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-inline-size: 980px; }
.n-kind { --c: var(--ora-accent-solid); display: inline-flex; align-items: center; gap: 10px; min-block-size: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--w-base-2)); color: var(--w-text); font-weight: 600; font-size: calc(1.02rem * var(--w-ar)); }
.n-kind__dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.n-kind--later { border-style: dashed; border-color: var(--n-edge); background: transparent; color: var(--n-soft); }
.n-kind--later .n-kind__dot { background: var(--n-future); box-shadow: none; }
.n-kind em { font-style: normal; font-size: var(--w-t-micro); color: var(--n-soft); }
.n-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; margin-block-start: 32px; }
.n-catalogue[hidden] { display: none; }
.n-catalogue .ora-w__item { padding-inline-start: 18px; border-inline-start: 2px solid color-mix(in srgb, var(--ora-accent-solid) 45%, transparent); }
.n-catalogue .ora-w__itemname { margin: 0; font-family: var(--n-display); font-size: calc(1.15rem * var(--w-ar)); color: var(--w-text); }
.n-catalogue .ora-w__itemp, .n-catalogue .ora-w__itemprice { margin: 6px 0 0; color: var(--n-soft); }

/* ---- discover: the lens ---- */
.n-scan { position: relative; inline-size: min(100%, 520px); margin-inline: auto; border-radius: 22px; border: 1px solid var(--n-edge); background: var(--w-base-2); box-shadow: var(--w-depth-2); overflow: visible; }
.n-scan__bar { display: flex; gap: 6px; padding: 12px 16px; border-block-end: 1px solid var(--n-edge); }
.n-scan__bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--n-future); }
.n-scan__page { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 96px 60px 74px; gap: 12px; padding: 18px; overflow: hidden; border-radius: 0 0 22px 22px; }
.n-scan__b { border-radius: 12px; background: color-mix(in srgb, var(--w-text) 7%, transparent); border: 1.5px solid transparent; transition: background var(--n-move), border-color var(--n-move), box-shadow var(--n-move); }
.n-scan__b--1 { grid-column: 1 / -1; } .n-scan__b--3 { grid-column: 1; grid-row: 2 / 4; } .n-scan__b--2 { grid-column: 2; grid-row: 2; } .n-scan__b--4 { grid-column: 2; grid-row: 3; border-radius: 999px; }
.n-scan__b.is-on { background: color-mix(in srgb, var(--ora-accent-solid) 14%, var(--w-base-2)); border-color: var(--n-done); }
.n-scan__b.is-now { background: color-mix(in srgb, var(--ora-accent-solid) 26%, var(--w-base-2)); border-color: var(--ora-accent-solid); box-shadow: 0 0 0 5px rgb(var(--w-glow) / .14), 0 0 34px rgb(var(--w-glow) / .4); }
.n-scan__line { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: linear-gradient(to right, transparent, var(--ora-accent-solid), transparent); opacity: .8; animation: n-scanline 4.6s var(--n-ease-world) infinite; }
@keyframes n-scanline { 0% { transform: translateY(0); } 50% { transform: translateY(290px); } 100% { transform: translateY(0); } }

/* ---- reading: the surface follows the six beats ---- */
.n-rd { position: relative; border-radius: 28px; border: 1px solid var(--n-edge); background: var(--w-base-2); box-shadow: var(--w-depth-2); overflow: hidden; }
.n-rd__bar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-block-end: 1px solid var(--n-edge); font-size: var(--w-t-small); color: var(--n-soft); font-weight: 600; }
.n-rd__stage { padding: clamp(22px, 3vw, 40px); min-block-size: 330px; display: grid; }
.n-rd__pane { display: grid; gap: 14px; align-content: center; animation: n-rise var(--n-move) var(--n-ease); }
.n-rd__pane[hidden] { display: none; }
.n-rd__pane p { margin: 0; }
.n-rd__pass { font-family: var(--n-display); font-weight: 700; font-size: calc(clamp(1.3rem, 1rem + 1vw, 1.9rem) * var(--w-ar)); line-height: 1.5; color: var(--w-text); }
.n-rd__pass--quote { padding-inline-start: 16px; border-inline-start: 3px solid var(--ora-accent-solid); font-size: calc(1.15rem * var(--w-ar)); }
.n-rd__body { color: var(--n-soft); line-height: 1.9; }
.n-rd__dir { position: relative; padding-inline-start: 58px; }
.n-rd__dir img { position: absolute; inset-inline-start: 10px; inset-block-start: 8px; inline-size: 38px; block-size: 38px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; border: 1px solid var(--n-edge); }
.n-rd .n-s__you b, .n-rd .n-s__dir b { display: block; font-size: var(--w-t-micro); color: var(--n-soft); margin-block-end: 4px; }
.n-rd__note, .n-rd__ex, .n-rd__cont { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: var(--w-base); border: 1px solid var(--n-edge); }
.n-rd__note b, .n-rd__ex b, .n-rd__cont b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-t-small); color: var(--ora-accent-text); }
.n-rd__note em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: var(--w-t-micro); color: var(--w-ok); }
.n-rd__field { display: block; padding: 14px; border-radius: 12px; border: 1px dashed var(--n-edge); color: var(--n-soft); }
.n-rd__save { justify-self: start; padding: 8px 18px; border-radius: 999px; background: var(--ora-accent-cta); color: var(--ora-text-on-cta); font-weight: 600; font-size: var(--w-t-small); }
.n-rd__card { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: linear-gradient(140deg, var(--ora-accent-cta), color-mix(in srgb, var(--ora-accent-cta) 55%, var(--w-silver))); color: var(--ora-text-on-cta); box-shadow: 0 30px 60px -30px rgb(var(--w-glow) / .8); transform: rotate(-1.5deg); }
.n-rd__card p { font-family: var(--n-display); font-weight: 700; font-size: calc(1.4rem * var(--w-ar)); line-height: 1.5; }
.n-rd__card em { font-style: normal; font-size: var(--w-t-small); opacity: .85; }
.n-rd__cont span { color: var(--n-soft); font-size: var(--w-t-small); }
.n-rd__value { margin: 0; padding: 16px 20px; border-block-start: 1px solid var(--n-edge); font-weight: 600; color: var(--w-text); background: color-mix(in srgb, var(--ora-accent-wash) 40%, transparent); }

/* ---- FAQ ---- */
.n-faq details { border-block-end: 1px solid var(--n-edge); }
.n-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-block-size: 64px; padding-block: 12px; cursor: pointer; list-style: none; font-family: var(--n-display); font-weight: 700; font-size: calc(1.1rem * var(--w-ar)); color: var(--w-text); }
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::after { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-inline-end: 2px solid var(--ora-accent-solid); border-block-end: 2px solid var(--ora-accent-solid); transform: rotate(45deg); transition: transform var(--n-fast) var(--n-ease); }
.n-faq details[open] summary::after { transform: rotate(-135deg); }
.n-faq details p { margin: 0 0 20px; color: var(--n-soft); line-height: 1.8; max-inline-size: 70ch; }

/* ---- forms: part of the system, honest about their state ---- */
.n-page .n-form { display: grid; gap: 18px; padding: clamp(22px, 3.4vw, 40px); border-radius: 28px; border: 1px solid var(--n-edge); background: var(--w-base-2); box-shadow: var(--w-depth-1); }
.n-page .n-form .ora-field { display: grid; gap: 8px; margin: 0; }
.n-page .n-form label { font-weight: 600; font-size: var(--w-t-small); color: var(--w-text); }
.n-page .n-form :is(input, select, textarea) { inline-size: 100%; min-block-size: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--n-edge); background: var(--w-base); color: var(--w-text); font: inherit; font-size: calc(1rem * var(--w-ar)); transition: border-color var(--n-fast), box-shadow var(--n-fast); }
.n-page .n-form textarea { min-block-size: 150px; resize: vertical; line-height: 1.7; }
.n-page .n-form :is(input, select, textarea):focus { outline: none; border-color: var(--ora-accent-solid); box-shadow: 0 0 0 4px rgb(var(--w-glow) / .16); }
.n-page .n-form :is(input, textarea)[data-touched]:invalid { border-color: var(--w-err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-err) 14%, transparent); }
.n-page .n-form :is(input, textarea)[data-touched]:valid { border-color: color-mix(in srgb, var(--w-ok) 60%, var(--n-edge)); }
.n-page .n-form .ora-field__hint { font-size: var(--w-t-small); color: var(--n-soft); }
.n-page .n-form .ora-form__hp { position: absolute; inset-inline-start: -9999px; }
.n-form__status { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: var(--w-t-small); background: color-mix(in srgb, var(--ora-accent-wash) 60%, transparent); color: var(--w-text); }
.n-form[data-state="failed"] .n-form__status { background: color-mix(in srgb, var(--w-err) 12%, var(--w-base-2)); border: 1px solid color-mix(in srgb, var(--w-err) 50%, transparent); }
.n-form[data-state="sending"] .n-form__status::before { content: ""; display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: 10px; border-radius: 50%; background: var(--ora-accent-solid); animation: n-breathe 1s ease-in-out infinite; }
.n-page .n-form button[type="submit"] { justify-self: start; min-inline-size: 180px; justify-content: center; }
.n-page .n-form button[disabled] { opacity: .6; cursor: progress; }

/* ---- thanks: where to go next ---- */
.n-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.n-doors a { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding-block: 22px; border-block-end: 1px solid var(--n-edge); text-decoration: none; color: var(--w-text); transition: padding var(--n-move) var(--n-ease); }
.n-doors a .ora-i { grid-row: 1 / 3; color: var(--ora-accent-solid); }
.n-doors b { font-family: var(--n-display); font-size: calc(1.2rem * var(--w-ar)); }
.n-doors span { color: var(--n-soft); font-size: var(--w-t-small); }
.n-doors a:hover { padding-inline-start: 10px; }
.n-page--lost .n-head, .n-page--thanks .n-head { min-block-size: min(72svh, 700px); }

/* ---- the footer on the new system ---- */
.n-page ~ .ora-foot { background: var(--w-base); border-block-start: 1px solid var(--n-edge); color: var(--w-text-2); }
.n-page ~ .ora-foot .ora-foot__inner, .n-page ~ .ora-foot .ora-foot__bar { inline-size: min(100% - 2 * clamp(16px, 3.2vw, 48px), 1360px); }
.n-page ~ .ora-foot a { color: var(--w-text-2); } .n-page ~ .ora-foot a:hover { color: var(--w-text); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .n-pick { grid-template-columns: minmax(0, 1fr); }
  .n-pick__list { display: flex; flex-wrap: wrap; gap: 8px; } .n-pick__btn { inline-size: auto; }
  .n-today__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .n-head { min-block-size: 0; padding-block: 36px 28px; }
  .n-head--aside .n-head__in, .n-reveal, .n-split, .n-split--actor, .n-split--form, .n-split--wide { grid-template-columns: minmax(0, 1fr); }
  .n-head--aside .n-figure, .n-split--actor .n-figure { inline-size: min(62%, 240px); }
  .n-flag--hero .n-book { inline-size: min(64%, 260px); }
  .n-flag--page { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .n-flag--page .n-ticks { justify-items: center; } .n-flag--page .n-p { margin-inline: auto; }
  .n-path:not(.n-path--gate) .n-path__steps { grid-auto-flow: row; }
  .n-path:not(.n-path--gate) .n-path__step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px; }
  .n-path:not(.n-path--gate) .n-path__step::after { inset-block-start: 56px; inset-inline-start: 25px; inline-size: 2px; block-size: calc(100% - 58px); background: linear-gradient(to bottom, var(--ora-accent-solid), var(--ora-accent-solid)) no-repeat, var(--n-future); background-size: 100% 0%, 100% 100%; }
  .n-path:not(.n-path--gate) .n-path__step.is-done::after { background-size: 100% 100%, 100% 100%; }
  .n-path:not(.n-path--gate) .n-path__btn { grid-column: 1 / -1; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; inline-size: 100%; }
  .n-path:not(.n-path--gate) .n-path__p { grid-column: 2; margin-block-start: -6px; max-inline-size: none; }
  .n-path--gate .n-path__dot { inline-size: 44px; block-size: 44px; } .n-path--gate .n-path__step::after { inset-block-start: 21px; inset-inline-start: 46px; inline-size: calc(100% - 50px); }
  .n-path--gate .n-path__btn b { font-size: calc(.9rem * var(--w-ar)); }
  .n-web { grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: center; }
  .n-web__side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; inline-size: 100%; }
  .n-web__side--a, .n-web__side--b { justify-items: center; }
  .n-web__item, .n-web__side--a .n-web__item { flex-direction: column; gap: 6px; font-size: calc(.78rem * var(--w-ar)); text-align: center; }
  .n-web__dot, .n-web .n-ch { inline-size: 46px; block-size: 46px; }
  .n-pick--scale .n-pick__list { gap: 6px; } .n-pick--scale .n-pick__btn span:last-child { display: none; }
  .n-pick--scale li:nth-child(3) .n-pick__i { inline-size: 58px; block-size: 58px; } .n-pick--scale li:nth-child(4) .n-pick__i { inline-size: 70px; block-size: 70px; } .n-pick--scale li:nth-child(5) .n-pick__i { inline-size: 84px; block-size: 84px; }
  .n-pick--scale .n-pick__list::before { inset-block-end: 22px; }
  .n-doors { grid-template-columns: minmax(0, 1fr); }
  .n-page .n-form button[type="submit"] { justify-self: stretch; }
  .n-figure__line { inset-inline-start: 50%; translate: var(--n-tx) 0; inset-block-start: -18%; text-align: center; border-end-start-radius: 18px; }
  .n-figure--assist { margin-block-start: 56px; } .n-figure--peek { inline-size: 110px; }
  .n-scan__line { animation-duration: 6s; }
}

/* the flagship reveal needs the room of a stage */
.n-head--product { min-block-size: min(88svh, 860px); padding-block: clamp(64px, 9vh, 120px) clamp(48px, 7vh, 96px); }
.n-head--product .n-flag--hero .n-book { inline-size: min(100%, 330px); }

/* about: vision and mission face each other */
.n-vm__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .n-vm__in { grid-template-columns: minmax(0, 1fr); } }

/* touch targets: nothing tappable is shorter than 44px on touch widths */
@media (max-width: 860px) {
  .n-g--gate, .n-g--out, .n-g--wide { min-block-size: 50px; align-content: center; }
  .n-page .ora-accounts a, .n-page .n-flag__act .n-link, .n-page .n-actions .n-link { display: inline-flex; align-items: center; min-block-size: 46px; box-sizing: border-box; }
}


/* ==========================================================================================
   OWNER REAL-PHONE REVIEW (2026-09-19) — phone composition, not a scaled desktop.
   Hero: headline › the Director inside a quieter field › one ring around the base of the bust ›
   command › primary action. PROTECTED_UI_ZONES (header, headline, command input, primary action)
   are measured in home-native.js; the phone trajectory is sized to stay clear of them.
   Depth: FRONT large / coloured / labelled · MID normal, no label · BACK small, dim, no label.
   ========================================================================================== */
@media (max-width: 700px) {
  .n-field { min-block-size: calc(100svh - var(--n-nav)); padding-block-end: 14px; }
  .n-field__say { padding-block-start: 14px; }
  .n-field__say .n-kicker { margin-block-end: 6px; }
  .n-orbit { min-block-size: 300px; max-block-size: 430px; overflow: visible; }
  .n-orbit__ring { inset-block-start: calc(50% + var(--ooff, 12%)); inline-size: calc(var(--orx, 40%) * 2); block-size: calc(var(--ory, 58px) * 2); aspect-ratio: auto; box-shadow: none; }
  .n-orbit__ring--2 { display: none; }
  .n-director { inset-block-end: auto; inset-block-start: calc(50% + var(--ooff, 40px) + var(--ory, 58px) * .5); translate: var(--n-tx) -100%; inline-size: var(--odw, 174px); }
  .n-director__light { inset: -10% -28% 4%; }
  .n-director__line { inset-block-start: auto; inset-block-end: calc(100% + 2px); padding: 6px 14px; border-radius: 999px; font-size: calc(.84rem * var(--w-ar)); line-height: 1.45; max-inline-size: min(84vw, 320px); box-shadow: none; border-color: var(--n-edge); }
  /* one readable label at a time: the intent in front (or the one the Director attends to / the visitor picked) */
  .n-node .n-node__l { opacity: 0; font-size: calc(.84rem * var(--w-ar)); }
  .n-node.is-front .n-node__l, .n-node.is-seen .n-node__l, .n-node.is-on .n-node__l { opacity: 1; }
  .n-node button { gap: 6px; padding: 4px; }
  .n-node.is-back .n-node__dot { box-shadow: none; }
  .n-node.is-on .n-node__dot, .n-node.is-seen .n-node__dot { transform: scale(1.06); }
  /* the action is unmistakable: command, then one full-width primary button, then the quiet second path */
  .n-command__row { flex-direction: column; gap: 4px; margin-block-start: 10px; }
  .n-command__row .ora-btn--primary { inline-size: 100%; justify-content: center; min-block-size: 52px; font-size: calc(1.04rem * var(--w-ar)); }
  .n-command__row .n-link { min-block-size: 44px; display: inline-flex; align-items: center; }
  .n-page .n-command__bar input { font-size: 16px; }
}

/* the purchase action stays within reach on a phone (product page; only while a buy state is active) */
.n-buybar { display: none; }
.n-fine--review { margin-block-start: 8px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--n-edge); color: var(--n-soft); font-size: calc(.82rem * var(--w-ar)); }
@media (max-width: 700px) {
  .n-buybar:not([hidden]) { position: fixed; z-index: 80; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--w-base-2); border-block-start: 1px solid var(--n-edge); box-shadow: 0 -18px 40px -24px rgb(var(--w-shadow) / .55); }
  .n-buybar__t { margin: 0; display: grid; gap: 1px; min-inline-size: 0; font-size: calc(.92rem * var(--w-ar)); color: var(--w-text); }
  .n-buybar__t span { font-family: var(--n-display); font-weight: 800; color: var(--ora-accent-text); }
  .n-buybar .ora-btn { flex: none; min-block-size: 48px; }
  .n-page[data-n-buybar-on] { padding-block-end: 76px; }
}

/* OWNER PHONE REVIEW — statements, not paragraphs. On a phone a definition list is a short chain:
   SIGNAL › NODE › STATE › NEXT NODE. Every statement is visible at once; its supporting line opens on the
   node that is lit (the chain tells itself, a tap explores). The long rule beside each paragraph is gone.
   Still state / no JS: every line is open. */
@media (max-width: 700px) {
  .n-defs, .n-defs--row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .n-defs > div { position: relative; border: 0; padding: 0 0 14px; padding-inline-start: 30px; }
  .n-defs > div::before { content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: .5em; inline-size: 11px; block-size: 11px; border-radius: 50%; border: 1.5px solid var(--n-future); background: var(--w-base); transition: background var(--n-move), border-color var(--n-move), box-shadow var(--n-move); z-index: 1; }
  .n-defs > div::after { content: ""; position: absolute; inset-inline-start: 8px; inset-block: calc(.5em + 15px) -.5em; inline-size: 1px; background: var(--n-future); transform-origin: top; }
  .n-defs > div:last-child::after { display: none; }
  .n-defs > div:last-child { padding-block-end: 0; }
  .n-defs dt { font-size: calc(1.04rem * var(--w-ar)); line-height: 1.5; }
  .n-defs dd { margin-block-start: 2px; font-size: calc(.94rem * var(--w-ar)); line-height: 1.65; }
  .n-defs[data-n-defs-live] > div { cursor: pointer; }
  .n-defs[data-n-defs-live] dd { display: grid; grid-template-rows: 0fr; opacity: 0; margin-block-start: 0; transition: grid-template-rows var(--n-move) var(--n-ease), opacity var(--n-move), margin var(--n-move); }
  .n-defs[data-n-defs-live] dd > span { overflow: hidden; min-block-size: 0; }
  .n-defs[data-n-defs-live] > div.is-now dd { grid-template-rows: 1fr; opacity: 1; margin-block-start: 2px; }
  .n-defs[data-n-defs-live] > div:not(.is-now) dt { color: var(--n-soft); }
  .n-defs > div.is-now::before, .n-defs:not([data-n-defs-live]) > div::before { background: var(--ora-accent-solid); border-color: var(--ora-accent-solid); box-shadow: 0 0 0 4px rgb(var(--w-glow) / .16); }
  .n-defs > div.is-done::before { border-color: var(--ora-accent-solid); }
  .n-defs > div.is-done::after { background: var(--n-done); }
  /* a stacked path already says each step under its node: the repeated report sentence is dropped on phones,
     and the connector is a thin, short link between nodes rather than a rule beside the text */
  .n-path--stack .n-path__report { display: none; }
  .n-path--stack .n-path__step { padding-block-end: 14px; }
  .n-path--stack .n-path__step::after { inline-size: 1px; inset-inline-start: 25.5px; inset-block-start: 58px; block-size: calc(100% - 64px); }
  .n-where { border-inline-start: 0; padding-inline-start: 0; }
  .n-sec { padding-block: clamp(40px, 11vw, 64px); }
  .n-p, .n-lede { max-inline-size: 38ch; }
  .n-trust .n-lede, .n-head .n-lede { max-inline-size: none; }
}

/* stacked layouts (phone / tablet portrait): the product and its purchase action are never withheld by the
   choreography — the device still tells its story above, the product below is always complete and lit */
@media (max-width: 860px) {
  .n-page.n-page[data-n-js][data-n-js]:not([data-n-still]) .n-living__stage[data-beat] :is(.n-flag, .n-phone) { opacity: 1; transform: none; filter: none; }
  .n-page.n-page[data-n-js][data-n-js]:not([data-n-still]) .n-living__stage[data-beat] .n-flag__body > * { opacity: 1; transform: none; }
}

/* flagship page on a phone: PRODUCT › VALUE › PRICE › BUY › the object › where the purchase happens.
   The explanation never sits between the visitor and the action; the path comes before its long-form notes. */
@media (max-width: 700px) {
  .n-head--product { min-block-size: 0; padding-block: 28px 36px; }
  .n-head--product .n-reveal { gap: 22px; }
  .n-head--product .n-head__say { display: contents; }
  .n-head--product .n-head__say > :is(.n-kicker, .n-h1, .n-lede, .n-price) { order: 0; margin-block: 0; }
  .n-head--product .n-head__say > .n-kicker { margin-block-end: -12px; }
  .n-head--product .n-head__say > .n-lede { margin-block-start: -8px; }
  .n-head--product .n-head__say > .n-actions { order: 1; margin: 0; }
  .n-head--product .n-actions .n-buy { flex: 1 1 100%; justify-content: center; min-block-size: 54px; font-size: calc(1.06rem * var(--w-ar)); }
  .n-head--product .n-flag--hero { order: 2; }
  .n-head--product .n-flag--hero .n-book { inline-size: min(58%, 230px); }
  .n-head--product .n-head__say > .n-where { order: 3; margin: 0; }
  .n-price { font-size: calc(1.8rem * var(--w-ar)); }
  .n-split--how .n-split__lead { display: contents; }
  .n-split--how .n-path { order: 1; }
  .n-split--how .n-split__lead > :is(.n-p, .n-note) { order: 2; margin-block-start: 0; font-size: calc(.92rem * var(--w-ar)); }
  .n-split--how { gap: 18px; }
  .n-flag__act .n-buy, .n-action .n-actions .n-buy { flex: 1 1 100%; justify-content: center; min-block-size: 52px; }
  .n-request { min-block-size: 52px; }
  .n-head .n-actions .n-request { flex: 1 1 100%; justify-content: center; }
}

/* a product on a phone (any product row, not only a book): object › name › value › price › ACTION › details */
@media (max-width: 700px) {
  .n-flag--page .n-flag__body, .n-living__stage .n-flag__body { display: flex; flex-direction: column; align-items: center; }
  .n-flag__body > :is(.n-kicker, .n-h3, .n-lede) { order: 0; }
  .n-flag__body > .n-price { order: 1; margin-block-start: 10px; }
  .n-flag__body > .n-flag__act { order: 2; inline-size: 100%; margin-block-start: 16px; }
  .n-flag__body > .n-ticks { order: 3; margin-block-start: 18px; }
  .n-flag__body > .n-p { order: 4; font-size: calc(.92rem * var(--w-ar)); }
  .n-flag__body > .n-where { order: 5; text-align: center; }
  .n-flag--page .n-book, .n-living__stage .n-flag .n-book { inline-size: min(56%, 220px); }
}

/* inner-page headers on a phone: the quiet field never runs under the words — it rises from the foot of the header only */
@media (max-width: 700px) {
  .n-head .n-lattice { -webkit-mask-image: linear-gradient(to bottom, transparent 62%, rgb(0 0 0) 100%); mask-image: linear-gradient(to bottom, transparent 62%, rgb(0 0 0) 100%); }
  .n-head { padding-block-end: 44px; }
  .n-head .n-actions { margin-block-start: 18px; }
  .n-head .n-fine { margin-block-start: 8px; }
}

/* short phones: the primary action still lands inside the first screen */
@media (max-width: 700px) and (max-height: 690px) {
  .n-orbit { min-block-size: 244px; }
  .n-field__say { padding-block-start: 8px; }
  .n-field { padding-block-end: 8px; }
}
@media (max-width: 860px) { .n-pick__btn, .n-pick--scale .n-pick__btn, .n-path__btn, .n-path--stack .n-path__btn { min-block-size: 44px; min-inline-size: 44px; } }


/* ==========================================================================================
   CONVERSION / ACTION CLOSURE (2026-09-19) — same locked system, no new language.
   · the contextual action layer of the hero (two quiet links, never a menu)
   · PERFORMANCE CHECK «افحص أداء عملك»: the Director leads the diagnosis, the chain lights the
     report part by part; the report is a SAMPLE of the structure until the Platform supplies one
   · truthful source states and fail-closed state panels
   ========================================================================================== */
.n-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-block-start: 8px; min-block-size: 44px; animation: n-rise .45s var(--n-ease); }
.n-act[hidden] { display: none; }
.n-act__k { font-size: var(--w-t-micro); font-weight: 700; color: var(--n-soft); padding-inline-end: 4px; }
.n-act__a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--n-edge); background: var(--w-base-2); color: var(--w-text); font-weight: 700; font-size: calc(.94rem * var(--w-ar)); text-decoration: none; transition: border-color var(--n-fast), background var(--n-fast); }
.n-act__a--1 { border-color: color-mix(in srgb, var(--ora-accent-solid) 60%, transparent); color: var(--ora-accent-text); }
.n-act__a:hover { border-color: var(--ora-accent-solid); }
.n-inline-link { color: var(--ora-accent-text); text-underline-offset: 3px; display: inline-flex; align-items: center; min-block-size: 44px; }
.n-actions--pick { margin-block-start: 18px; }
.n-h3--gap { margin-block-start: clamp(26px, 4vw, 40px); }

.n-check__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.n-check__lead .n-path { margin-block-start: clamp(24px, 3vw, 40px); }
.n-check__stage { position: relative; display: grid; gap: 18px; }
.n-figure--check { position: absolute; z-index: 3; inset-block-start: -64px; inset-inline-end: -18px; inline-size: 132px; margin: 0; pointer-events: none; }
.n-figure--check .n-figure__line { inset-inline-start: auto; inset-inline-end: 84%; inset-block-start: 22%; font-size: calc(.84rem * var(--w-ar)); padding: 8px 12px; max-inline-size: 200px; }
.n-figure--inline { position: relative; inset: auto; margin: 28px 0 0; inline-size: 150px; }
.n-figure--inline .n-figure__line { inset-inline-end: auto; inset-inline-start: 86%; }

/* the report sheet */
.n-rp { position: relative; display: grid; gap: 0; padding: clamp(18px, 2.4vw, 30px); border-radius: 24px; background: var(--w-base-2); border: 1px solid var(--n-edge); box-shadow: 0 40px 90px -50px rgb(var(--w-shadow) / .55); color: var(--w-text); font-size: calc(.95rem * var(--w-ar)); line-height: 1.6; }
.n-rp__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-block-end: 14px; border-block-end: 1px solid var(--n-edge); padding-inline-end: 96px; }
.n-check--page .n-rp__top { padding-inline-end: 0; }
.n-rp__t { margin: 0; font-family: var(--n-display); font-weight: 800; font-size: calc(1.2rem * var(--w-ar)); }
.n-rp__s { margin: 2px 0 0; color: var(--n-soft); font-size: calc(.86rem * var(--w-ar)); }
.n-rp__tag { flex: none; padding: 4px 12px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--ora-accent-solid) 70%, transparent); color: var(--ora-accent-text); font-size: var(--w-t-micro); font-weight: 800; white-space: nowrap; }
.n-rp[data-oc-report-mode="live"] .n-rp__tag { border-style: solid; }
.n-rp__part { padding-block: 16px; border-block-end: 1px solid var(--n-edge); transition: opacity var(--n-move), background var(--n-move); }
.n-rp__part:last-of-type { border-block-end: 0; }
.n-rp__h { margin: 0 0 10px; font-family: var(--n-display); font-weight: 700; font-size: calc(.9rem * var(--w-ar)); color: var(--ora-accent-text); }
.n-rp__h--sub { margin-block-start: 16px; }
.n-rp__h small { font-family: var(--w-font, inherit); font-weight: 500; color: var(--n-soft); font-size: var(--w-t-micro); margin-inline-start: 6px; }
.n-rp__sum { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; }
.n-rp__sum p { margin: 0; font-weight: 500; }
.n-rp__dir { inline-size: 52px; block-size: 52px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--w-glow) / .3), transparent 72%); }
.n-rp ul, .n-rp ol { margin: 0; padding: 0; list-style: none; }
.n-rp__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.n-rp__area { --s: var(--n-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--n-edge); background: var(--w-base); font-size: calc(.86rem * var(--w-ar)); }
.n-rp__area b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--s); white-space: nowrap; font-size: calc(.8rem * var(--w-ar)); }
.n-rp__area b::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--s); }
.n-rp__area--ok { --s: var(--w-ok); } .n-rp__area--warn { --s: var(--w-warn); } .n-rp__area--bad { --s: var(--w-err); }
.n-rp__area--na b::before { background: transparent; border: 1px dashed var(--n-soft); }
.n-rp__finds { display: grid; gap: 10px; counter-reset: f; }
.n-rp__find { --p: var(--n-soft); position: relative; padding: 12px 14px; padding-inline-start: 18px; border-radius: 14px; background: var(--w-base); border: 1px solid var(--n-edge); }
.n-rp__find::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 7px; inline-size: 3px; border-radius: 3px; background: var(--p); }
.n-rp__find--high { --p: var(--w-err); } .n-rp__find--mid { --p: var(--w-warn); } .n-rp__find--low { --p: var(--n-blue); }
.n-rp__fh { margin: 0; font-weight: 700; }
.n-rp__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--n-soft); font-size: calc(.82rem * var(--w-ar)); }
.n-rp__meta b { color: var(--p); font-weight: 700; }
.n-rp__rec { margin: 8px 0 0; display: flex; gap: 8px; align-items: baseline; }
.n-rp__rec .ora-i { flex: none; color: var(--ora-accent-text); }
[dir="rtl"] .n-rp__rec .ora-i { transform: scaleX(-1); }
.n-rp__act { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.n-rp__chip { display: inline-flex; align-items: center; min-block-size: 28px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--n-edge); color: var(--n-soft); font-size: calc(.78rem * var(--w-ar)); font-weight: 600; }
.n-rp__chip--live { min-block-size: 44px; padding: 0 16px; border-style: solid; border-color: color-mix(in srgb, var(--ora-accent-solid) 60%, transparent); color: var(--ora-accent-text); text-decoration: none; font-size: calc(.9rem * var(--w-ar)); }
.n-rp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.n-rp__list { display: grid; gap: 6px; }
.n-rp__list li { position: relative; padding-inline-start: 16px; font-size: calc(.9rem * var(--w-ar)); }
.n-rp__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--w-err); }
.n-rp__list--opp li::before { background: var(--w-ok); }
.n-rp__signals { display: grid; gap: 8px; }
.n-rp__signals li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(.9rem * var(--w-ar)); }
.n-rp__lvl { display: inline-grid; grid-auto-flow: column; gap: 4px; }
.n-rp__lvl b { inline-size: 22px; block-size: 7px; border-radius: 4px; background: var(--n-future); }
.n-rp__lvl--1 b:nth-child(-n+1), .n-rp__lvl--2 b:nth-child(-n+2), .n-rp__lvl--3 b:nth-child(-n+3), .n-rp__lvl--4 b { background: var(--ora-accent-solid); }
.n-rp__lvl--1 b:nth-child(-n+1) { background: var(--w-err); } .n-rp__lvl--2 b:nth-child(-n+2) { background: var(--w-warn); }
.n-rp__map { position: relative; block-size: 148px; margin-inline-start: 22px; margin-block-end: 22px; border-inline-start: 1px solid var(--n-future); border-block-end: 1px solid var(--n-future); background: linear-gradient(var(--n-edge), var(--n-edge)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--n-edge), var(--n-edge)) 0 50% / 100% 1px no-repeat; border-start-end-radius: 12px; }
.n-rp__map::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 50%; block-size: 50%; background: color-mix(in srgb, var(--ora-accent-solid) 9%, transparent); border-start-start-radius: 0; }
.n-rp__axis { position: absolute; font-size: var(--w-t-micro); color: var(--n-soft); font-weight: 600; }
.n-rp__axis--y { inset-block-start: 0; inset-inline-start: -22px; writing-mode: vertical-rl; }
.n-rp__axis--x { inset-block-end: -20px; inset-inline-end: 0; }
.n-rp__dot { position: absolute; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--p, var(--n-soft)); color: var(--w-base); font-style: normal; translate: 0 -50%; }
.n-rp__dot em { font-style: normal; font-size: 12px; font-weight: 800; }
.n-rp__dot--high { --p: var(--w-err); inset-block-start: 22%; inset-inline-start: 16%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--w-err) 18%, transparent); }
.n-rp__dot--mid { --p: var(--w-warn); inset-block-start: 40%; inset-inline-start: 58%; }
.n-rp__dot--low { --p: var(--n-blue); inset-block-start: 76%; inset-inline-start: 74%; }
.n-rp__first { position: absolute; inset-block-start: 6px; inset-inline-start: calc(16% + 34px); font-size: var(--w-t-micro); font-weight: 700; color: var(--ora-accent-text); }
.n-rp__recs { display: grid; gap: 6px; counter-reset: r; }
.n-rp__recs li { counter-increment: r; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.n-rp__recs li::before { content: counter(r); display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1px solid var(--n-edge); font-size: 12px; font-weight: 700; color: var(--ora-accent-text); }
[dir="rtl"] .n-rp__recs li::before { content: counter(r, arabic-indic); }
.n-rp__src, .n-srcs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.n-src { --s: var(--n-soft); display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--n-edge); background: var(--w-base); font-size: calc(.86rem * var(--w-ar)); color: var(--w-text); }
.n-src .ora-i { color: var(--s); flex: none; }
.n-src b { font-weight: 700; font-size: calc(.76rem * var(--w-ar)); color: var(--s); white-space: nowrap; }
.n-src--connected, .n-src--analysis_available { --s: var(--w-ok); }
.n-src--insufficient_data { --s: var(--w-warn); } .n-src--error { --s: var(--w-err); }
.n-src--not_connected { border-style: dashed; color: var(--n-soft); }
.n-srcs { margin-block-start: 14px; }
.n-rp__next { margin: 0; font-weight: 600; }
.n-rp__help { display: flex; flex-wrap: wrap; gap: 6px; }
.n-rp__help li { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ora-accent-solid) 10%, var(--w-base)); font-size: calc(.84rem * var(--w-ar)); font-weight: 600; }
.n-rp__cta { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.n-rp__cta:empty { display: none; }
.n-rp__note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ora-accent-solid) 45%, transparent); color: var(--n-soft); font-size: calc(.82rem * var(--w-ar)); }
/* the diagnosis lights the part it produces; everything stays readable */
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now]:not([data-rp-now="all"]) .n-rp__part { opacity: .62; }
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="summary"] [data-rp-part="summary"],
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="findings"] [data-rp-part="findings"],
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="opps"] [data-rp-part="opps"],
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="map"] [data-rp-part="map"],
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="sources"] [data-rp-part="sources"],
.n-page[data-n-js]:not([data-n-still]) .n-rp[data-rp-now="actions"] [data-rp-part="actions"] { opacity: 1; }
.n-rp:hover .n-rp__part, .n-rp:focus-within .n-rp__part { opacity: 1 !important; }

.n-state { display: grid; gap: 6px; justify-items: start; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--n-edge); background: color-mix(in srgb, var(--w-base-2) 70%, transparent); }
.n-state[hidden] { display: none; }
.n-state__h { margin: 0; font-family: var(--n-display); font-weight: 700; color: var(--w-text); }
.n-state__p { margin: 0 0 6px; color: var(--n-soft); font-size: calc(.92rem * var(--w-ar)); }
.n-guided__side { display: grid; align-content: start; }
.n-today__act { justify-items: start; }

@media (max-width: 1000px) {
  .n-check__in { grid-template-columns: minmax(0, 1fr); }
  .n-figure--check { inset-block-start: -58px; inset-inline-end: 0; inline-size: 112px; }
}
@media (max-width: 700px) {
  /* hero: while an intent is chosen its two actions take the place of the second button — the row never grows */
  .n-command__row[data-acting] .n-check-cta { display: none; }
  .n-command__row .n-check-cta { inline-size: 100%; justify-content: center; min-block-size: 48px; }
  .n-act { margin-block-start: 0; min-block-size: 48px; flex-wrap: nowrap; }
  .n-act__k { display: none; }
  .n-act__a { flex: 1 1 0; justify-content: center; padding: 0 10px; min-block-size: 48px; white-space: nowrap; }
  .n-command__row { gap: 8px; }
  .n-check .n-actions .n-check-cta, .n-today__act .n-check-cta, .n-action .n-check-cta { flex: 1 1 100%; justify-content: center; min-block-size: 52px; }
  .n-today__in { grid-template-columns: minmax(0, 1fr); }
  .n-today__act { justify-items: stretch; }
  /* the chain on a phone: six short statements; only the lit one opens its line */
  .n-path--check .n-path__p { display: none; }
  .n-path--check .n-path__step.is-now .n-path__p { display: block; }
  .n-page[data-n-still] .n-path--check .n-path__p { display: block; }
  .n-path--check .n-path__step { padding-block-end: 8px; }
  .n-check__stage { margin-block-start: 44px; }
  .n-figure--check { inline-size: 96px; inset-block-start: -62px; inset-inline-end: 4px; }
  .n-figure--check .n-figure__line { max-inline-size: 190px; inset-block-start: 10%; }
  .n-figure--inline { inline-size: 104px; margin: 18px 0 0; }
  .n-figure--inline .n-figure__line { max-inline-size: 210px; inset-block-start: 14%; }
  .n-rp { padding: 16px 14px; border-radius: 20px; font-size: calc(.94rem * var(--w-ar)); }
  .n-rp__top { padding-inline-end: 0; flex-direction: column-reverse; gap: 8px; }
  .n-check .n-rp__top { padding-inline-end: 100px; }
  .n-check--page .n-rp__top { padding-inline-end: 0; }
  .n-rp__areas { grid-template-columns: minmax(0, 1fr); }
  .n-rp__cols { grid-template-columns: minmax(0, 1fr); }
  .n-rp__lvl b { inline-size: 18px; }
  .n-src { min-block-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .n-page:not([data-n-motion="force"]) .n-act { animation: none; } }

/* ==========================================================================================
   SITE-WIDE CONTEXTUAL ACTIONS (2026-09-19) — the intended action is always visible.
   One PRIMARY (solid) + one SECONDARY (quiet outline) per decision moment; when the backend of the
   primary is not connected, the click opens the shared fail-closed sheet — never a silent swap.
   ========================================================================================== */
.n-page .ora-btn--secondary { border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 46%, var(--n-edge)); background: color-mix(in srgb, var(--w-base-2) 88%, transparent); color: var(--w-text); }
.n-page .ora-btn--secondary:hover { border-color: var(--ora-accent-solid); }
.n-actions--living { margin-block-start: 20px; }
.n-navline { margin-block-start: 6px; }
.n-rp__chip small { margin-inline-end: 6px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ora-accent-solid) 14%, transparent); color: var(--ora-accent-text); font-size: 10px; font-weight: 800; letter-spacing: 0; }
.n-gate { inline-size: min(100% - 32px, 460px); max-block-size: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 40%, var(--n-edge)); border-radius: 26px; background: var(--w-base-2); color: var(--w-text); box-shadow: 0 50px 120px -40px rgb(var(--w-shadow) / .7), 0 0 0 1px rgb(var(--w-glow) / .08); overflow: auto; }
.n-gate::backdrop { background: color-mix(in srgb, var(--w-base-3, var(--w-base)) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.n-gate[open] { animation: n-rise .4s var(--n-ease); }
.n-gate__in { display: grid; gap: 10px; padding: 26px 24px 20px; }
.n-gate__k { margin: 0; justify-self: start; padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--n-edge); color: var(--n-soft); font-size: var(--w-t-micro); font-weight: 700; }
.n-gate__h { margin: 0; font-family: var(--n-display); font-weight: 800; font-size: calc(1.35rem * var(--w-ar)); line-height: 1.3; outline: none; }
.n-gate__p { margin: 0; color: var(--n-soft); line-height: 1.75; }
.n-gate__act { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 10px; }
.n-gate__act .ora-btn { flex: 1 1 auto; justify-content: center; min-block-size: 50px; }
.n-gate__x { justify-self: center; min-block-size: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--n-soft); font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px; }
.n-gate__x:hover { color: var(--w-text); }
@media (max-width: 700px) {
  .n-gate { margin-block-end: 16px; border-radius: 24px; }
  .n-gate__act .ora-btn { flex: 1 1 100%; }
  .n-actions--living { justify-content: center; }
  .n-actions--living .ora-btn, .n-scale .n-actions .ora-btn, .n-head .n-actions .n-ask, .n-starts .n-actions .ora-btn, .n-actions--pick .ora-btn { flex: 1 1 100%; justify-content: center; min-block-size: 50px; }
}
@media (prefers-reduced-motion: reduce) { .n-page:not([data-n-motion="force"]) ~ .n-gate[open], .n-gate[open] { animation: none; } }
.n-page .n-flag__act .n-link, .n-page .n-actions .n-link { display: inline-flex; align-items: center; min-block-size: 46px; box-sizing: border-box; }
.n-gate .ora-btn--secondary { border: 1px solid color-mix(in srgb, var(--ora-accent-solid) 46%, var(--n-edge)); background: transparent; color: var(--w-text); }