/**
 * Norafortune — cinematic observatory system
 * Loaded after the legacy bundle so the public site can evolve without
 * changing application routes or the shared LINE integrations.
 */

:root {
  --nora-midnight: #061426;
  --nora-navy: #0a2038;
  --nora-navy-soft: #102b47;
  --nora-gold: #c8a35b;
  --nora-gold-bright: #e2c784;
  --nora-gold-deep: #8f6d35;
  --nora-ivory: #f4ecd9;
  --nora-parchment: #ece0c5;
  --nora-celestial: #79cbe8;
  --nora-white: #fffdf8;
  --nora-ink: #102139;
  --nora-muted: #a9b7c7;
  --nora-line: rgba(200, 163, 91, 0.34);
  --nora-line-soft: rgba(200, 163, 91, 0.16);
  --nora-shadow: 0 30px 80px rgba(0, 5, 15, 0.36);
  --font-display: "Noto Serif Thai", Georgia, serif;
  --font-body: "Noto Sans Thai", system-ui, sans-serif;
  --font-roman: "Marcellus", Georgia, serif;
  --container-max: 1180px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
}

html {
  background: var(--nora-midnight);
  overflow-x: clip;
  scroll-padding-top: 6rem;
}

body.cinematic-site {
  min-width: 320px;
  overflow-x: clip;
  color: var(--nora-ivory);
  background:
    radial-gradient(circle at 84% 4%, rgba(34, 91, 131, 0.18), transparent 28rem),
    linear-gradient(180deg, #07182b 0%, var(--nora-midnight) 52%, #04101e 100%);
  background-attachment: scroll;
  font-family: var(--font-body);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

.cinematic-site main {
  isolation: isolate;
}

.cinematic-site h1,
.cinematic-site h2,
.cinematic-site h3,
.cinematic-site h4 {
  color: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cinematic-site p {
  text-wrap: pretty;
}

.cinematic-site ::selection {
  color: var(--nora-midnight);
  background: var(--nora-gold-bright);
}

.site-container {
  width: min(100% - (2 * var(--container-padding)), var(--container-max));
  margin-inline: auto;
}

.site-section {
  position: relative;
  padding-block: clamp(5.5rem, 10vw, 9rem);
}

.ivory-section {
  color: var(--nora-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(200, 163, 91, 0.14), transparent 23rem),
    var(--nora-ivory);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1.1rem;
  color: var(--nora-midnight);
  background: var(--nora-gold-bright);
  border-radius: 0.25rem;
  font-weight: 700;
  transform: translateY(-150%);
}

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

.eyebrow,
.card-kicker {
  color: var(--nora-gold-bright);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow--dark {
  color: #806128;
}

.section-heading {
  max-width: 47rem;
  margin-bottom: clamp(2.75rem, 6vw, 4.75rem);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2 {
  margin-top: 0.9rem;
  font-size: clamp(2.15rem, 5vw, 4rem);
  line-height: 1.24;
}

.section-heading > p:last-child {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--nora-muted);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}

.section-heading--dark > p:last-child {
  color: #5a6170;
}

/* Shared navigation */
.cinematic-site .nav-header {
  position: fixed;
  z-index: 200;
  inset: 0 0 auto;
  height: 5rem;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.cinematic-site .nav-header[data-scroll-state="scrolled"],
.subpage .nav-header,
.legal-site .nav-header {
  background: rgba(4, 16, 30, 0.92);
  border-color: var(--nora-line-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cinematic-site .nav-container {
  width: min(100% - (2 * var(--container-padding)), var(--container-max));
  height: 100%;
  padding: 0;
}

.cinematic-site .nav-logo {
  min-height: 3rem;
  color: var(--nora-ivory);
  gap: 0.72rem;
}

.cinematic-site .logo-mark {
  position: relative;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--nora-gold);
  border-radius: 50%;
  box-shadow: none;
  animation: none;
}

.cinematic-site .logo-mark::before,
.cinematic-site .logo-mark::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--nora-gold-bright);
  transform: translate(-50%, -50%) rotate(45deg);
}

.cinematic-site .logo-mark::after {
  width: 0.23rem;
  height: 0.23rem;
  border: 0;
  background: var(--nora-celestial);
  border-radius: 50%;
}

.logo-lockup {
  display: grid;
  line-height: 1;
}

.logo-lockup strong {
  font-family: var(--font-roman);
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.logo-lockup small {
  margin-top: 0.3rem;
  color: var(--nora-gold);
  font-family: var(--font-roman);
  font-size: 0.52rem;
  letter-spacing: 0.32em;
}

.logo-lockup small:empty {
  display: none;
}

.cinematic-site .nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.35rem);
}

.cinematic-site .nav-links a {
  display: grid;
  min-height: 3rem;
  place-items: center;
  color: #c5d0dc;
  font-size: 0.87rem;
  font-weight: 400;
}

.cinematic-site .nav-links a::after {
  bottom: 0.35rem;
  height: 1px;
  background: var(--nora-gold-bright);
}

.cinematic-site .nav-links a:hover,
.cinematic-site .nav-links a[aria-current="page"] {
  color: var(--nora-ivory);
}

.cinematic-site .nav-actions {
  gap: 0.7rem;
}

.cinematic-site .lang-toggle {
  min-width: 4.65rem;
  min-height: 3rem;
  padding: 0.25rem;
  color: var(--nora-ivory);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--nora-line-soft);
}

.cinematic-site .lang-toggle span {
  display: grid;
  min-width: 1.8rem;
  min-height: 2rem;
  padding: 0;
  place-items: center;
  color: #95a6b8;
  font-family: var(--font-roman);
}

.cinematic-site .lang-toggle span.is-active {
  color: var(--nora-midnight);
  background: var(--nora-gold-bright);
}

.cinematic-site .btn,
.line-cta,
.outline-link {
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 0.2rem;
}

.cinematic-site .btn-primary,
.line-cta {
  color: #061426;
  background: var(--nora-gold-bright);
  box-shadow: none;
}

.cinematic-site .btn-primary:hover,
.line-cta:hover {
  color: #020a13;
  background: #f1d99b;
  box-shadow: 0 12px 34px rgba(200, 163, 91, 0.2);
  transform: translateY(-2px);
}

.cinematic-site .btn-sm {
  min-height: 2.75rem;
  padding-inline: 1.15rem;
  border-radius: 0.18rem;
  font-size: 0.8rem;
}

.cinematic-site .nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
}

.cinematic-site .nav-toggle span {
  background: var(--nora-ivory);
}

.cinematic-site .nav-drawer {
  width: min(23rem, 88vw);
  padding: 6.5rem 1.5rem 2rem;
  color: var(--nora-ivory);
  background:
    radial-gradient(circle at 70% 8%, rgba(121, 203, 232, 0.12), transparent 15rem),
    #07192c;
  border-color: var(--nora-line);
}

.cinematic-site .nav-drawer-links {
  gap: 0.4rem;
}

.cinematic-site .nav-drawer-links a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--nora-line-soft);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.drawer-cta {
  width: 100%;
  margin-top: 2rem;
}

.nav-drawer-overlay {
  background: rgba(1, 7, 14, 0.72);
  backdrop-filter: blur(4px);
}

/* Shared calls to action */
.line-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.line-cta svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: currentColor;
}

.quiet-link,
.outline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  color: #cad5df;
  border-bottom: 1px solid rgba(244, 236, 217, 0.28);
  font-weight: 600;
}

.quiet-link--gold {
  color: var(--nora-gold-bright);
  border-color: var(--nora-line);
}

.quiet-link:hover,
.outline-link:hover {
  color: var(--nora-white);
  border-color: var(--nora-gold-bright);
}

/* Home hero */
.cinematic-hero {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --hero-scroll-back: 0px;
  --hero-scroll-front: 0px;
  --stage-tilt-x: 0deg;
  --stage-tilt-y: 0deg;
  --stage-shift-x: 0px;
  --stage-shift-y: 0px;
  position: relative;
  min-height: min(58rem, 100svh);
  padding: clamp(8rem, 12vh, 10rem) 0 clamp(5rem, 8vh, 7rem);
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 70% 44%;
  background:
    linear-gradient(90deg, rgba(3, 13, 27, 0.99) 0%, rgba(6, 20, 38, 0.96) 41%, rgba(6, 20, 38, 0.42) 72%, rgba(3, 13, 27, 0.84) 100%),
    radial-gradient(circle at 76% 45%, rgba(65, 151, 197, 0.3), transparent 25rem),
    radial-gradient(circle at 50% 115%, rgba(198, 153, 67, 0.12), transparent 35rem),
    #04101f;
}

.cinematic-hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(transparent, var(--nora-midnight));
  pointer-events: none;
}

.hero-sky,
.final-cta-stars,
.about-hero-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-sky {
  z-index: 0;
  transform: translate3d(var(--hero-shift-x), var(--hero-scroll-back), -90px) scale(1.13);
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-sky::before,
.final-cta-stars::before,
.about-hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(244, 236, 217, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 72%, rgba(121, 203, 232, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 29%, rgba(226, 199, 132, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 66% 15%, rgba(244, 236, 217, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 68%, rgba(121, 203, 232, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 38%, rgba(226, 199, 132, 0.9) 0 1px, transparent 1.5px);
  background-size: 23rem 19rem;
}

.hero-sky::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 12% 22%, #f4ecd9 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 38% 68%, #79cbe8 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 72% 33%, #e2c784 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 88% 78%, #f4ecd9 0 0.65px, transparent 1.2px);
  background-size: 9rem 11rem, 13rem 10rem, 11rem 14rem, 15rem 12rem;
  animation: nora-star-drift 38s linear infinite;
}

.star-depth {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.star-depth--far {
  top: 18%;
  right: 23%;
  width: 0.18rem;
  height: 0.18rem;
  background: #d7eefe;
  box-shadow:
    7rem -4rem 0 rgba(244, 236, 217, 0.75),
    14rem 3rem 0 rgba(121, 203, 232, 0.62),
    -5rem 8rem 0 rgba(226, 199, 132, 0.68),
    10rem 14rem 0 rgba(244, 236, 217, 0.48),
    -9rem 18rem 0 rgba(121, 203, 232, 0.55);
  animation: nora-star-pulse 5.5s ease-in-out infinite alternate;
}

.star-depth--near {
  right: 8%;
  bottom: 20%;
  width: 0.32rem;
  height: 0.32rem;
  background: var(--nora-gold-bright);
  box-shadow:
    -9rem -20rem 0 rgba(226, 199, 132, 0.86),
    2rem -13rem 0 rgba(121, 203, 232, 0.72),
    -17rem -7rem 0 rgba(244, 236, 217, 0.68),
    5rem 2rem 0 rgba(226, 199, 132, 0.72);
  filter: drop-shadow(0 0 0.65rem rgba(226, 199, 132, 0.52));
  animation: nora-near-star-float 12s ease-in-out infinite alternate;
}

.observatory-shell {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
}

.observatory-vault {
  position: absolute;
  top: 48%;
  left: 73%;
  width: min(76vw, 70rem);
  aspect-ratio: 1;
  border: 1px solid rgba(200, 163, 91, 0.22);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1.6rem rgba(6, 20, 38, 0.08),
    inset 0 0 0 1.68rem rgba(200, 163, 91, 0.08),
    0 0 7rem rgba(54, 137, 190, 0.08);
  transform: translate(-50%, -50%) translate3d(var(--hero-shift-x), var(--hero-scroll-back), -50px);
  will-change: transform;
}

.observatory-vault::before,
.observatory-vault::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(200, 163, 91, 0.13);
  border-radius: 50%;
}

.observatory-vault::before { inset: 9%; }
.observatory-vault::after { inset: 20%; border-style: dashed; }

.observatory-column {
  position: absolute;
  bottom: -8%;
  width: clamp(4rem, 7vw, 7rem);
  height: 74%;
  opacity: 0.4;
  background:
    linear-gradient(90deg, transparent, rgba(226, 199, 132, 0.18) 18%, rgba(8, 28, 48, 0.88) 32% 70%, rgba(200, 163, 91, 0.2) 82%, transparent),
    #061426;
  border: 1px solid rgba(200, 163, 91, 0.15);
  clip-path: polygon(18% 0, 82% 0, 100% 7%, 88% 100%, 12% 100%, 0 7%);
  transform: translate3d(var(--hero-shift-x), var(--hero-scroll-front), 70px);
  will-change: transform;
}

.observatory-column::before,
.observatory-column::after {
  content: "";
  position: absolute;
  right: 12%;
  left: 12%;
  height: 1px;
  background: rgba(226, 199, 132, 0.24);
  box-shadow: 0 0.45rem 0 rgba(226, 199, 132, 0.08), 0 0.9rem 0 rgba(226, 199, 132, 0.08);
}

.observatory-column::before { top: 8%; }
.observatory-column::after { bottom: 12%; }
.observatory-column--left { left: -1.4rem; }
.observatory-column--right { right: -1.4rem; }

.light-shaft {
  --beam-angle: 0deg;
  position: absolute;
  top: -18%;
  width: 20rem;
  height: 130%;
  opacity: 0.18;
  background: linear-gradient(180deg, rgba(198, 228, 244, 0.5), rgba(121, 203, 232, 0.06) 55%, transparent 82%);
  filter: blur(12px);
  mix-blend-mode: screen;
  clip-path: polygon(45% 0, 62% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: nora-light-sweep 16s ease-in-out infinite alternate;
}

.light-shaft--one { --beam-angle: 8deg; right: 19%; }
.light-shaft--two { --beam-angle: -11deg; right: 3%; opacity: 0.1; animation-delay: -8s; }

.cosmic-haze {
  position: absolute;
  right: -8%;
  bottom: -35%;
  width: 75%;
  aspect-ratio: 1.8;
  opacity: 0.46;
  background: radial-gradient(ellipse, rgba(80, 155, 199, 0.24), rgba(22, 68, 103, 0.08) 44%, transparent 72%);
  filter: blur(18px);
  transform: translate3d(var(--hero-shift-x), var(--hero-scroll-back), -20px);
}

.star-cluster {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--nora-gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 1.1rem rgba(226, 199, 132, 0.75);
  animation: nora-star-pulse 6s ease-in-out infinite alternate;
}

.star-cluster::before,
.star-cluster::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.star-cluster::before { width: 2.2rem; height: 1px; }
.star-cluster::after { width: 1px; height: 2.2rem; }
.star-cluster--one { top: 17%; left: 8%; }
.star-cluster--two { top: 31%; right: 4%; color: var(--nora-celestial); animation-delay: -2s; }
.star-cluster--three { right: 38%; bottom: 13%; animation-delay: -4s; }

.hero-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(31rem, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: calc(min(58rem, 100svh) - 13rem);
}

.hero-copy {
  position: relative;
  z-index: 8;
  max-width: 35rem;
}

.hero-copy .eyebrow {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.hero-copy h1 {
  margin: 1.35rem 0 1.5rem;
  font-size: clamp(3rem, 5.35vw, 5.1rem);
  line-height: 1.04;
}

.hero-copy h1 em {
  display: inline-block;
  color: var(--nora-gold-bright);
  font-style: normal;
}

.hero-copy h1 span:last-child {
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.57em;
  white-space: nowrap;
}

.hero-lead {
  max-width: 33rem;
  color: #c8d2db;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.35rem;
  margin-top: 2rem;
}

.hero-actions .line-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-actions .line-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  bottom: -45%;
  left: -45%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 218, 0.72), transparent);
  transform: skewX(-18deg) translateX(-260%);
  animation: nora-cta-shine 6.5s 2.4s ease-in-out infinite;
}

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 1.55rem;
  color: #95a7b8;
  font-size: 0.78rem;
}

.hero-notes li {
  display: flex;
  gap: 0.48rem;
  align-items: center;
}

.hero-notes li > span:first-child {
  width: 0.25rem;
  height: 0.25rem;
  background: var(--nora-gold);
  border-radius: 50%;
}

.hero-visual {
  min-width: 0;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}

.celestial-stage {
  position: relative;
  width: min(100%, 38rem);
  margin-left: auto;
  isolation: isolate;
  transform: translate3d(var(--stage-shift-x), var(--stage-shift-y), 0) rotateX(var(--stage-tilt-x)) rotateY(var(--stage-tilt-y));
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.astral-sphere {
  position: absolute;
  inset: -8%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.astral-sphere--rear { z-index: 1; }

.astral-sphere--front {
  z-index: 7;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 46%, #000 56% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 46%, #000 56% 100%);
}

.orbit-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(226, 199, 132, 0.48);
  border-radius: 50%;
  box-shadow: inset 0 0 1.4rem rgba(121, 203, 232, 0.06), 0 0 0.8rem rgba(200, 163, 91, 0.07);
  transform-style: preserve-3d;
  will-change: transform;
}

.orbit-3d::before,
.orbit-3d::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.orbit-3d::before {
  inset: 8%;
  border: 1px dashed rgba(121, 203, 232, 0.2);
}

.orbit-3d::after {
  top: 8%;
  left: 18%;
  width: 0.48rem;
  aspect-ratio: 1;
  background: var(--nora-gold-bright);
  box-shadow: 0 0 1rem rgba(226, 199, 132, 0.8);
}

.orbit-3d i {
  position: absolute;
  right: 11%;
  bottom: 18%;
  width: 0.48rem;
  aspect-ratio: 1;
  background: var(--nora-celestial);
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(121, 203, 232, 0.78);
}

.orbit-3d--equator {
  width: 118%;
  height: 68%;
  animation: nora-orbit-equator 24s linear infinite;
}

.orbit-3d--meridian {
  width: 85%;
  height: 119%;
  border-color: rgba(121, 203, 232, 0.34);
  animation: nora-orbit-meridian 33s linear infinite reverse;
}

.orbit-3d--diagonal {
  width: 109%;
  height: 82%;
  border-style: double;
  animation: nora-orbit-diagonal 42s linear infinite;
}

.hero-aura {
  position: absolute;
  z-index: 2;
  top: 47%;
  left: 50%;
  width: 91%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(101, 194, 230, 0.2), transparent 58%),
    conic-gradient(from 40deg, transparent, rgba(226, 199, 132, 0.22), transparent 24%, rgba(121, 203, 232, 0.14), transparent 54%, rgba(226, 199, 132, 0.16), transparent 80%);
  filter: blur(1px);
  transform: translate(-50%, -50%) translateZ(-8px);
  animation: nora-aura-turn 28s linear infinite;
}

.orbiting-body {
  position: absolute;
  z-index: 8;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.orbiting-body--gold {
  top: 22%;
  right: -1%;
  width: 1.2rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #fff4ce, #d7ad55 42%, #634518 100%);
  box-shadow: 0 0 1.8rem rgba(226, 199, 132, 0.58);
  animation: nora-body-float 7s ease-in-out infinite alternate;
}

.orbiting-body--blue {
  bottom: 27%;
  left: -3%;
  width: 0.78rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #e2f8ff, #4da9d5 45%, #123c65 100%);
  box-shadow: 0 0 1.5rem rgba(121, 203, 232, 0.62);
  animation: nora-body-float 9s ease-in-out -3s infinite alternate-reverse;
}

.hero-portrait {
  position: relative;
  z-index: 4;
  aspect-ratio: 4 / 5;
  width: 82%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(226, 199, 132, 0.58);
  border-radius: 50% 50% 1.1rem 1.1rem / 25% 25% 1.1rem 1.1rem;
  background: var(--nora-navy);
  box-shadow:
    0 52px 120px rgba(0, 5, 16, 0.68),
    0 0 0 0.35rem rgba(6, 20, 38, 0.34),
    0 0 3.5rem rgba(83, 168, 211, 0.13),
    inset 0 0 0 0.45rem rgba(6, 20, 38, 0.38);
  transform: translateZ(26px);
  transform-style: preserve-3d;
}

.hero-portrait::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0.48rem;
  border: 1px solid rgba(244, 222, 165, 0.22);
  border-radius: inherit;
  box-shadow: inset 0 0 2rem rgba(121, 203, 232, 0.08);
  pointer-events: none;
  animation: nora-frame-glint 7s ease-in-out infinite;
}

.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 38, 0.7), transparent 30%),
    linear-gradient(0deg, rgba(6, 20, 38, 0.68), transparent 24%);
  pointer-events: none;
  z-index: 2;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.88) contrast(1.03);
  animation: nora-portrait-breathe 18s ease-in-out infinite alternate;
  will-change: transform;
}

.foreground-dust {
  position: absolute;
  z-index: 9;
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 0.7rem currentColor);
}

.foreground-dust--one {
  top: 24%;
  left: 8%;
  color: var(--nora-gold-bright);
  background: currentColor;
  box-shadow: 2.4rem 10rem 0 -0.08rem currentColor, 22rem 4rem 0 -0.11rem currentColor;
  animation: nora-foreground-drift 10s ease-in-out infinite alternate;
}

.foreground-dust--two {
  right: 9%;
  bottom: 17%;
  color: var(--nora-celestial);
  background: currentColor;
  box-shadow: -18rem -5rem 0 -0.1rem currentColor, -7rem -18rem 0 -0.12rem currentColor;
  animation: nora-foreground-drift 13s ease-in-out -5s infinite alternate-reverse;
}

.orbit,
.subpage-orbit,
.final-ring {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(200, 163, 91, 0.44);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: nora-orbit 64s linear infinite;
}

.orbit::before,
.orbit::after,
.subpage-orbit::before,
.final-ring::before {
  content: "";
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--nora-gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 0.9rem rgba(226, 199, 132, 0.65);
}

.orbit::before { top: 12%; left: 13%; }
.orbit::after { right: 8%; bottom: 23%; background: var(--nora-celestial); }
.orbit--outer { width: 113%; aspect-ratio: 1; }
.orbit--middle { width: 101%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 78s; }
.orbit--inner { width: 91%; aspect-ratio: 1; border-style: dashed; animation-duration: 94s; }
.orbit--middle i {
  position: absolute;
  inset: -0.32rem 50% auto auto;
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--nora-gold-bright);
  transform: rotate(45deg);
}

.celestial-glyph {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 2.6rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--nora-gold-bright);
  background: rgba(6, 20, 38, 0.82);
  border: 1px solid var(--nora-line);
  border-radius: 50%;
  font-family: serif;
  font-size: 1.2rem;
}

.celestial-glyph--sun { top: 8%; left: 0; }
.celestial-glyph--moon { right: -1%; bottom: 19%; }
.celestial-glyph--sun { animation: nora-glyph-float 8s ease-in-out infinite alternate; }
.celestial-glyph--moon { animation: nora-glyph-float 10s ease-in-out -4s infinite alternate-reverse; }

.hero-seal {
  position: absolute;
  z-index: 6;
  right: -0.5rem;
  bottom: 1rem;
  display: grid;
  width: 6.2rem;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  color: var(--nora-gold-bright);
  background: rgba(6, 20, 38, 0.88);
  border: 1px solid var(--nora-gold);
  border-radius: 50%;
  box-shadow: 0 1rem 2rem rgba(0, 6, 15, 0.45);
  font-family: var(--font-roman);
  text-align: center;
  transform: translateZ(52px);
  animation: nora-seal-float 9s ease-in-out infinite alternate;
}

.cinematic-motion-ready .hero-copy {
  animation: nora-copy-arrive 1.05s 80ms cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.cinematic-motion-ready .hero-visual {
  animation: nora-stage-arrive 1.35s 180ms cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

.hero-seal::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border: 1px dashed rgba(226, 199, 132, 0.45);
  border-radius: inherit;
}

.hero-seal span,
.hero-seal small { font-size: 0.43rem; letter-spacing: 0.18em; }
.hero-seal strong { font-size: 1rem; font-weight: 400; letter-spacing: 0.12em; }

.hero-scroll-cue {
  position: absolute;
  z-index: 7;
  bottom: 1.7rem;
  left: 50%;
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background: rgba(244, 236, 217, 0.16);
}

.hero-scroll-cue span {
  display: block;
  width: 100%;
  height: 45%;
  background: var(--nora-gold-bright);
  animation: nora-scroll-cue 2.4s ease-in-out infinite;
}

/* Philosophy band */
.manifesto {
  position: relative;
  z-index: 8;
  border-block: 1px solid var(--nora-line-soft);
  background: #06172a;
}

.manifesto-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  min-height: 7.5rem;
  text-align: center;
}

.manifesto-inner p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.manifesto-mark { color: var(--nora-gold); }
.manifesto-divider { width: 3.5rem; height: 1px; background: var(--nora-line); }

/* How it works */
.how-section {
  overflow: hidden;
}

.observatory-lines {
  position: absolute;
  top: -22rem;
  right: -16rem;
  width: 46rem;
  aspect-ratio: 1;
  border: 1px solid rgba(143, 109, 53, 0.15);
  border-radius: 50%;
}

.observatory-lines::before,
.observatory-lines::after {
  content: "";
  position: absolute;
  inset: 4rem;
  border: inherit;
  border-radius: inherit;
}

.observatory-lines::after { inset: 9rem; }

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6.5rem);
}

.portal-visual {
  position: relative;
}

.portal-arch {
  aspect-ratio: 4 / 4.65;
  overflow: hidden;
  border: 1px solid rgba(143, 109, 53, 0.5);
  border-radius: 50% 50% 0.45rem 0.45rem / 23% 23% 0.45rem 0.45rem;
  box-shadow: 0 28px 62px rgba(49, 31, 7, 0.18);
}

.portal-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.portal-visual figcaption,
.workshop-visual figcaption {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  color: #6c6253;
  font-size: 0.8rem;
}

.portal-visual figcaption > span:first-child,
.workshop-visual figcaption > span:first-child { color: #806128; }

.steps-list {
  counter-reset: steps;
}

.step-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.35rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid rgba(16, 33, 57, 0.14);
}

.step-item:first-child { border-top: 1px solid rgba(16, 33, 57, 0.14); }

.step-number,
.instrument-number,
.help-entry-number,
.editorial-index {
  color: #806128;
  font-family: var(--font-roman);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.step-item h3 {
  margin-bottom: 0.35rem;
  font-size: 1.25rem;
}

.step-item p {
  color: #5f6670;
  font-size: 0.96rem;
}

/* Reading mode cards */
.modes-section {
  background:
    radial-gradient(circle at 50% 20%, rgba(20, 64, 99, 0.34), transparent 32rem),
    #061426;
}

.mode-grid,
.reading-guide-grid,
.calm-feature-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.mode-card-cinematic {
  position: relative;
  min-height: 29rem;
  padding: 2.2rem;
  overflow: hidden;
  border: 1px solid var(--nora-line-soft);
  background: rgba(11, 35, 58, 0.56);
}

.mode-card-cinematic::after {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 12rem;
  aspect-ratio: 1;
  border: 1px solid var(--nora-line-soft);
  border-radius: 50%;
}

.mode-card-cinematic--featured {
  border-color: rgba(226, 199, 132, 0.58);
  background: linear-gradient(160deg, rgba(23, 60, 91, 0.75), rgba(8, 27, 48, 0.84));
}

.mode-card-label,
.guide-card-ribbon {
  position: absolute;
  top: 0;
  right: 1.4rem;
  padding: 0.38rem 0.72rem;
  color: var(--nora-midnight);
  background: var(--nora-gold-bright);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mode-orbit {
  display: grid;
  width: 5.25rem;
  aspect-ratio: 1;
  margin-bottom: 2.2rem;
  place-items: center;
  color: var(--nora-gold-bright);
  border: 1px solid var(--nora-line);
  border-radius: 50%;
  font-family: serif;
  font-size: 1.7rem;
}

.mode-orbit::before {
  content: "";
  position: absolute;
  width: 3.65rem;
  aspect-ratio: 1;
  border: 1px dashed var(--nora-line);
  border-radius: 50%;
}

.mode-index {
  margin-bottom: 0.5rem;
  color: var(--nora-gold);
  font-family: var(--font-roman);
  font-size: 0.72rem;
}

.mode-card-cinematic h3 {
  margin-bottom: 1rem;
  font-family: var(--font-roman);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: 0.01em;
}

.mode-card-cinematic > p:not(.mode-index) {
  min-height: 6rem;
  color: #b7c4cf;
}

.mode-card-cinematic ul {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nora-line-soft);
}

.mode-card-cinematic li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.1rem;
  color: #d6dde4;
  font-size: 0.88rem;
}

.mode-card-cinematic li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--nora-gold);
  font-size: 0.55rem;
}

.section-link-row {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* Example reading */
.reading-example {
  background: #091a2e;
}

.example-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}

.example-visual {
  position: relative;
  padding: 0 1.6rem 1.6rem 0;
}

.example-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.6rem 0 0 1.6rem;
  border: 1px solid var(--nora-line);
}

.example-visual figure {
  aspect-ratio: 4 / 4.15;
  overflow: hidden;
}

.example-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}

.example-constellation {
  position: absolute;
  top: -1.4rem;
  right: -1.2rem;
  width: 8rem;
  height: 5rem;
  border-top: 1px solid var(--nora-line);
  transform: rotate(-14deg);
}

.example-constellation span {
  position: absolute;
  width: 0.28rem;
  aspect-ratio: 1;
  background: var(--nora-gold-bright);
  border-radius: 50%;
}

.example-constellation span:nth-child(1) { top: -0.15rem; left: 0; }
.example-constellation span:nth-child(2) { top: 0.65rem; left: 34%; }
.example-constellation span:nth-child(3) { top: 0.1rem; right: 25%; }
.example-constellation span:nth-child(4) { top: -0.15rem; right: 0; }

.reading-sheet {
  position: relative;
  padding: clamp(2rem, 5vw, 3.6rem);
  color: var(--nora-ink);
  background:
    linear-gradient(rgba(244, 236, 217, 0.96), rgba(244, 236, 217, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 1.7rem, rgba(16, 33, 57, 0.06) 1.7rem calc(1.7rem + 1px));
  box-shadow: var(--nora-shadow);
}

.reading-sheet::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid rgba(143, 109, 53, 0.32);
  pointer-events: none;
}

.reading-sheet-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.simulation-badge {
  padding: 0.35rem 0.65rem;
  color: #6f5322;
  border: 1px solid rgba(128, 97, 40, 0.42);
  font-size: 0.68rem;
  font-weight: 700;
}

.reading-sheet h2 {
  margin: 1.25rem 0 1.8rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.26;
}

.example-question {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-block: 1px solid rgba(16, 33, 57, 0.14);
}

.example-question > span {
  color: #806128;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.example-question p {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.reading-sheet blockquote {
  margin: 1.8rem 0 1.2rem;
  font-size: 1rem;
  line-height: 1.9;
}

.reading-sheet blockquote p + p { margin-top: 1rem; }
.reading-sheet blockquote strong { color: #79591f; }
.example-disclaimer { color: #656a72; font-size: 0.78rem; }

/* FAQs */
.faq-section-cinematic {
  background:
    radial-gradient(circle at 15% 45%, rgba(28, 76, 110, 0.27), transparent 30rem),
    #051321;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
}

.faq-intro {
  position: sticky;
  top: 8rem;
}

.faq-intro h2 {
  margin: 0.9rem 0 1rem;
  font-size: clamp(2.2rem, 4vw, 3.7rem);
}

.faq-intro > p:not(.eyebrow) {
  margin-bottom: 1.35rem;
  color: var(--nora-muted);
}

.native-faq details {
  border-top: 1px solid var(--nora-line-soft);
}

.native-faq details:last-child {
  border-bottom: 1px solid var(--nora-line-soft);
}

.native-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.35rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.native-faq summary::-webkit-details-marker { display: none; }

.native-faq summary i {
  position: relative;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--nora-line);
  border-radius: 50%;
}

.native-faq summary i::before,
.native-faq summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.65rem;
  height: 1px;
  background: var(--nora-gold-bright);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.native-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.native-faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }

.native-faq details > div {
  max-width: 43rem;
  padding: 0 3rem 1.7rem 0;
  color: #afbdc9;
}

/* Home closing */
.final-cta {
  position: relative;
  min-height: 34rem;
  padding-block: clamp(6rem, 11vw, 9rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 50%, rgba(52, 119, 159, 0.24), transparent 22rem),
    #081a2d;
}

.final-cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  align-items: center;
  gap: 3rem;
}

.final-cta-copy { position: relative; z-index: 5; }
.final-cta-copy h2 {
  max-width: 46rem;
  margin: 1rem 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.2;
}

.final-cta-copy > p:not(.eyebrow) { color: #adbac7; }
.final-cta-copy .line-cta { margin-top: 1.8rem; }
.final-cta-copy .final-legal {
  margin-top: 1rem;
  color: #8294a5;
  font-size: 0.72rem;
}
.final-legal a {
  color: #aebbc6;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.final-cta-orb {
  position: relative;
  display: grid;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  color: var(--nora-gold-bright);
}

.final-cta-orb > div {
  display: grid;
  width: 8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--nora-gold);
  border-radius: 50%;
  box-shadow: inset 0 0 3rem rgba(121, 203, 232, 0.12), 0 0 3rem rgba(121, 203, 232, 0.1);
  font-size: 2rem;
}

.final-ring--one { width: 86%; aspect-ratio: 1; }
.final-ring--two { width: 62%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 78s; }

/* Shared secondary-page hero */
.subpage-hero {
  position: relative;
  min-height: 46rem;
  padding: 9rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 45%, rgba(44, 108, 149, 0.3), transparent 30rem),
    #061426;
}

.subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background-image:
    radial-gradient(circle at 13% 23%, #f4ecd9 0 1px, transparent 1.3px),
    radial-gradient(circle at 38% 76%, #79cbe8 0 1px, transparent 1.3px),
    radial-gradient(circle at 72% 14%, #e2c784 0 1px, transparent 1.3px),
    radial-gradient(circle at 91% 68%, #f4ecd9 0 1px, transparent 1.3px);
  background-size: 21rem 18rem;
  pointer-events: none;
}

.subpage-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.subpage-hero-copy h1 {
  max-width: 39rem;
  margin: 1.1rem 0 1.4rem;
  font-size: clamp(3rem, 6vw, 5.25rem);
  line-height: 1.08;
}

.subpage-hero-copy > p:not(.eyebrow):not(.fact-note) {
  max-width: 35rem;
  color: #b9c6d1;
  font-size: 1.08rem;
}

.subpage-hero-copy .line-cta { margin-top: 2rem; }
.fact-note { margin-top: 1rem; color: #91a2b2; font-size: 0.78rem; }

.subpage-hero-art {
  position: relative;
  width: min(100%, 34rem);
  margin-left: auto;
}

.subpage-hero-art figure {
  position: relative;
  z-index: 3;
  aspect-ratio: 4 / 4.25;
  overflow: hidden;
  border: 1px solid var(--nora-line);
  border-radius: 50% 50% 0.4rem 0.4rem / 25% 25% 0.4rem 0.4rem;
  box-shadow: var(--nora-shadow);
}

.subpage-hero-art figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 20, 38, 0.48), transparent 34%);
}

.subpage-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.subpage-hero-art--calm img { object-position: center; }
.subpage-orbit--one { width: 112%; aspect-ratio: 1; }
.subpage-orbit--two { width: 95%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 82s; }

/* Reading options page */
.reading-guide-grid { align-items: stretch; }

.reading-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 33rem;
  padding: 2.2rem;
  border: 1px solid rgba(16, 33, 57, 0.16);
  background: rgba(255, 253, 248, 0.46);
}

.reading-guide-card--featured {
  border-color: rgba(128, 97, 40, 0.52);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 22px 55px rgba(49, 31, 7, 0.1);
}

.guide-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.instrument-symbol {
  display: grid;
  width: 3.6rem;
  aspect-ratio: 1;
  place-items: center;
  color: #806128;
  border: 1px solid rgba(128, 97, 40, 0.38);
  border-radius: 50%;
  font-family: serif;
  font-size: 1.35rem;
}

.reading-guide-card .card-kicker { color: #806128; }
.reading-guide-card h3 {
  margin: 0.55rem 0 1rem;
  font-family: var(--font-roman);
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  letter-spacing: 0;
}

.guide-card-lead { min-height: 7rem; color: #505966; }
.guide-divider { width: 100%; height: 1px; margin: 1.5rem 0; background: rgba(16, 33, 57, 0.14); }
.reading-guide-card h4 { margin-bottom: 0.65rem; color: #806128; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.reading-guide-card li { position: relative; padding: 0.35rem 0 0.35rem 1.05rem; color: #5e6570; font-size: 0.9rem; }
.reading-guide-card li::before { content: "—"; position: absolute; left: 0; color: #806128; }

.mode-decision {
  background:
    radial-gradient(circle at 14% 50%, rgba(42, 103, 144, 0.25), transparent 26rem),
    #07182a;
}

.decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
}

.decision-heading h2 {
  margin: 1rem 0;
  font-size: clamp(2.35rem, 4.5vw, 3.8rem);
}

.decision-heading > p:last-child { color: var(--nora-muted); }

.decision-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  min-height: 6.25rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--nora-line-soft);
}

.decision-list > div:last-child { border-bottom: 1px solid var(--nora-line-soft); }
.decision-list span { color: #c3ced7; }
.decision-list strong { color: var(--nora-gold-bright); font-family: var(--font-roman); font-weight: 400; white-space: nowrap; }

.daily-service-strip {
  color: var(--nora-ink);
  background: var(--nora-parchment);
}

.daily-strip-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
}

.daily-strip-inner h2 {
  margin: 0.45rem 0;
  font-family: var(--font-roman);
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  letter-spacing: 0;
}

.daily-strip-inner p:last-child { max-width: 42rem; color: #58606b; }
.outline-link { padding: 0.3rem 0; color: #624a21; border-color: rgba(98, 74, 33, 0.35); }
.outline-link:hover { color: var(--nora-ink); border-color: var(--nora-ink); }

/* Daily Charm page */
.daily-rhythm-grid,
.charm-example-grid,
.workshop-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.daily-rhythm-copy h2,
.charm-example-heading h2,
.workshop-copy h2 {
  margin: 0.9rem 0 1.25rem;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.23;
}

.daily-rhythm-copy > p:not(.eyebrow) { color: #59616d; }

.daily-principle {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 1.8rem;
  padding: 1rem 1.2rem;
  color: #6b5126;
  border: 1px solid rgba(128, 97, 40, 0.35);
  font-family: var(--font-display);
}

.day-timeline { position: relative; }
.day-timeline::before {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: 2.2rem;
  width: 1px;
  background: rgba(128, 97, 40, 0.32);
}

.day-timeline li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  align-items: center;
  min-height: 12rem;
}

.timeline-glyph {
  display: grid;
  width: 4.5rem;
  aspect-ratio: 1;
  place-items: center;
  color: #79591f;
  background: var(--nora-ivory);
  border: 1px solid rgba(128, 97, 40, 0.45);
  border-radius: 50%;
  font-family: serif;
  font-size: 1.55rem;
}

.timeline-label { color: #806128; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.day-timeline h3 { margin: 0.35rem 0; font-size: 1.45rem; }
.day-timeline li p:last-child { color: #626873; }

.charm-example {
  background:
    radial-gradient(circle at 83% 30%, rgba(42, 107, 149, 0.28), transparent 28rem),
    #061426;
}

.charm-example-heading > p:last-child { color: var(--nora-muted); }

.charm-message {
  padding: clamp(1.7rem, 4vw, 2.7rem);
  color: var(--nora-ink);
  background: var(--nora-ivory);
  border: 1px solid var(--nora-gold);
  box-shadow: var(--nora-shadow);
}

.charm-message header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(16, 33, 57, 0.14);
}

.charm-sun {
  display: grid;
  width: 3.8rem;
  aspect-ratio: 1;
  place-items: center;
  color: #79591f;
  border: 1px solid rgba(128, 97, 40, 0.4);
  border-radius: 50%;
  font-size: 1.35rem;
}

.charm-message header span { display: block; color: #806128; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; }
.charm-message header strong { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.charm-message > p { padding-block: 1.7rem; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.9; }
.charm-message footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(16, 33, 57, 0.14); }
.charm-message footer div { display: grid; gap: 0.15rem; }
.charm-message footer span { color: #806128; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.charm-message footer strong { font-size: 0.9rem; font-weight: 600; }

.calm-features { background: #081a2d; }
.calm-feature-grid article {
  min-height: 16rem;
  padding: 2rem;
  border-top: 1px solid var(--nora-line);
  background: rgba(15, 43, 70, 0.34);
}
.calm-feature-grid article > span { color: var(--nora-gold); font-family: var(--font-roman); font-size: 0.75rem; }
.calm-feature-grid h3 { margin: 2.25rem 0 0.75rem; font-size: 1.4rem; }
.calm-feature-grid p { color: var(--nora-muted); }

/* Help */
.utility-hero {
  position: relative;
  display: grid;
  min-height: 30rem;
  padding: 10rem 0 5.5rem;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(44, 111, 153, 0.26), transparent 23rem),
    #061426;
}

.utility-hero-inner { position: relative; z-index: 2; }
.utility-hero h1 { margin: 0.8rem 0 1rem; font-size: clamp(3rem, 7vw, 5.3rem); }
.utility-hero-inner > p:last-child { max-width: 40rem; margin-inline: auto; color: #b8c5d0; }

.utility-astrolabe {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 27rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--nora-gold);
  border: 1px solid var(--nora-line-soft);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.utility-astrolabe::before,
.utility-astrolabe span { content: ""; position: absolute; inset: 4rem; border: 1px dashed var(--nora-line-soft); border-radius: 50%; }
.utility-astrolabe i { font-style: normal; }

.help-entry-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(16, 33, 57, 0.14);
  background: rgba(16, 33, 57, 0.14);
}

.help-entry-card {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
  min-height: 10rem;
  padding: 1.8rem 2rem;
  background: var(--nora-ivory);
  transition: background-color 180ms ease;
}

.help-entry-card:hover { background: var(--nora-white); }
.help-entry-card .card-kicker { color: #806128; }
.help-entry-card h3 { margin: 0.25rem 0; font-size: 1.45rem; }
.help-entry-card p:last-child { color: #606873; }
.help-entry-card > i { color: #806128; font-style: normal; font-size: 1.25rem; }

.help-faq { background: #061426; }

/* About */
.about-hero {
  position: relative;
  display: grid;
  min-height: min(48rem, 88svh);
  padding: 10rem 0 6rem;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(38, 99, 140, 0.32), transparent 31rem),
    #061426;
}

.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  width: min(55rem, 82vw);
  aspect-ratio: 1;
  border: 1px solid var(--nora-line-soft);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.about-hero::after {
  width: min(41rem, 63vw);
  border-style: dashed;
}

.about-hero-inner { position: relative; z-index: 3; max-width: 55rem; }
.about-hero h1 { margin: 1rem 0 1.4rem; font-size: clamp(3.25rem, 8vw, 6.5rem); line-height: 1.05; }
.about-hero-inner > p:last-child { max-width: 43rem; margin-inline: auto; color: #bdc8d2; font-size: 1.1rem; }

.about-statement { padding-block: clamp(5rem, 9vw, 8rem); text-align: center; }
.about-statement-inner { max-width: 58rem; }
.statement-glyph { color: #806128; }
.about-statement blockquote { margin: 1.4rem 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.5; }
.about-statement p { color: #6a6359; font-size: 0.82rem; }

.about-mission { background: #07182a; }
.editorial-grid {
  display: grid;
  grid-template-columns: 4rem minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.editorial-heading h2 { margin-top: 0.9rem; font-size: clamp(2.3rem, 4.7vw, 4rem); }
.editorial-copy { padding-top: 2rem; color: #b7c3cd; font-size: 1.05rem; }
.editorial-copy p + p { margin-top: 1.4rem; }

.workshop-section { background: #091c31; }
.workshop-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.workshop-visual { padding: 0 1.4rem 1.4rem 0; }
.workshop-visual img { aspect-ratio: 4 / 4.2; width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; border: 1px solid var(--nora-line); }
.workshop-copy > p:not(.eyebrow) { color: #b5c1cb; }
.workshop-note { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.8rem; padding: 1.2rem; border: 1px solid var(--nora-line-soft); }
.workshop-note > span { color: var(--nora-gold-bright); }
.workshop-note p { color: #c3cdd5; font-size: 0.88rem; }

.values-grid article { min-height: 17rem; padding: 2rem 0; border-top: 1px solid rgba(16, 33, 57, 0.2); }
.values-grid article > span { color: #806128; font-family: var(--font-roman); font-size: 0.75rem; }
.values-grid h3 { margin: 2.2rem 0 0.75rem; font-size: 1.45rem; }
.values-grid p { color: #5e6570; }

/* Reusable closing band */
.shared-cta-band {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  border-block: 1px solid var(--nora-line-soft);
  background:
    linear-gradient(120deg, rgba(10, 32, 56, 0.96), rgba(6, 20, 38, 0.96)),
    #061426;
}

.shared-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
}

.shared-cta-inner h2 {
  max-width: 49rem;
  margin-top: 0.6rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.27;
}

/* Footer */
.cinematic-footer {
  padding: 4.5rem 0 1.5rem;
  color: #a8b6c4;
  background: #030d18;
  border-top: 1px solid var(--nora-line-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 1.7fr) repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.footer-brand p { max-width: 20rem; margin-top: 1.2rem; font-size: 0.85rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid h3 { margin-bottom: 0.55rem; color: var(--nora-gold-bright); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-grid > div:not(.footer-brand) a { display: flex; align-items: center; width: fit-content; min-width: 3rem; min-height: 3rem; color: #a8b6c4; font-size: 0.83rem; }
.footer-grid > div:not(.footer-brand) a:hover { color: var(--nora-ivory); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(200, 163, 91, 0.12);
  color: #758798;
  font-size: 0.7rem;
}

.mobile-line-bar { display: none; }

.scroll-top {
  position: fixed;
  z-index: 90;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--nora-gold-bright);
  background: rgba(6, 20, 38, 0.92);
  border: 1px solid var(--nora-line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top svg { width: 1.15rem; }

/* Legal documents — calm reading surface */
.legal-site {
  background: #061426;
}

.legal-hero,
.legal-page-header {
  padding: 10rem 0 4rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(44, 108, 149, 0.22), transparent 25rem),
    #061426;
}

.legal-hero h1,
.legal-page-header h1 { margin: 0.8rem 0; font-size: clamp(2.8rem, 6vw, 4.8rem); }
.legal-hero p,
.legal-page-header p { color: #aebbc7; }

.legal-main,
.legal-document,
main.legal-page {
  padding: clamp(3rem, 7vw, 6rem) 0;
  color: var(--nora-ink);
  background: var(--nora-ivory);
}

.legal-sheet,
.legal-content {
  width: min(100% - (2 * var(--container-padding)), 72rem);
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 4rem);
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(16, 33, 57, 0.12);
}

.legal-sheet section,
.legal-content section,
.legal-section { max-width: 72ch; margin: 0 auto; }
.legal-sheet section + section,
.legal-content section + section,
.legal-section + .legal-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(16, 33, 57, 0.13); }
.legal-sheet h2,
.legal-content h2,
.legal-section h2 { margin-bottom: 1rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.legal-sheet h3,
.legal-content h3,
.legal-section h3 { margin: 1.5rem 0 0.55rem; font-size: 1.15rem; }
.legal-sheet p + p,
.legal-content p + p,
.legal-section p + p { margin-top: 0.85rem; }
.legal-content p,
.legal-content li,
.legal-sheet p,
.legal-sheet li,
.legal-section p,
.legal-section li {
  color: #3f4a58;
  line-height: 1.85;
}
.legal-content strong,
.legal-sheet strong,
.legal-section strong { color: #17283d; }
.legal-sheet ul,
.legal-content ul,
.legal-section ul { margin: 0.8rem 0; padding-left: 1.4rem; list-style: disc; }
.legal-content ol,
.legal-sheet ol,
.legal-section ol { margin: 0.8rem 0; padding-left: 1.6rem; list-style: decimal; }
.legal-sheet li,
.legal-content li,
.legal-section li { margin: 0.4rem 0; }
.legal-content ol li,
.legal-sheet ol li,
.legal-section ol li { list-style: decimal; }
.legal-content > h1 {
  max-width: 20ch;
  margin: 0 auto 0.8rem;
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.24;
  text-align: center;
}
.legal-content > h1 + p,
.legal-last-updated { text-align: center; }
.legal-content .legal-last-updated,
.legal-sheet .legal-last-updated { margin-bottom: 2.5rem; color: #6c6253; font-size: 0.84rem; }
.legal-sheet a,
.legal-content a,
.legal-section a { color: #75561e; text-decoration: underline; text-underline-offset: 0.16em; }

/* Never leave the page invisible if animation JavaScript is blocked. */
.cinematic-site [data-reveal],
.cinematic-site [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}

@keyframes nora-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nora-star-pulse {
  from { opacity: 0.38; transform: scale(0.8); }
  to { opacity: 0.9; transform: scale(1.05); }
}

@keyframes nora-scroll-cue {
  0% { transform: translateY(-110%); }
  50%, 100% { transform: translateY(230%); }
}

@keyframes nora-orbit-equator {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
}

@keyframes nora-orbit-meridian {
  from { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(360deg); }
}

@keyframes nora-orbit-diagonal {
  from { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-28deg); }
  to { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(332deg); }
}

@keyframes nora-aura-turn {
  from { transform: translate(-50%, -50%) translateZ(-8px) rotate(0deg) scale(0.96); opacity: 0.64; }
  50% { opacity: 1; }
  to { transform: translate(-50%, -50%) translateZ(-8px) rotate(360deg) scale(1.04); opacity: 0.64; }
}

@keyframes nora-body-float {
  from { transform: translate3d(0, -0.35rem, 58px) scale(0.92); }
  to { transform: translate3d(0.5rem, 0.65rem, 76px) scale(1.08); }
}

@keyframes nora-foreground-drift {
  from { transform: translate3d(-0.4rem, -0.8rem, 90px) scale(0.82); opacity: 0.46; }
  to { transform: translate3d(0.65rem, 0.85rem, 120px) scale(1.12); opacity: 0.94; }
}

@keyframes nora-portrait-breathe {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-0.3%, -0.45%, 0); }
}

@keyframes nora-frame-glint {
  0%, 70%, 100% { border-color: rgba(244, 222, 165, 0.19); box-shadow: inset 0 0 2rem rgba(121, 203, 232, 0.06); }
  82% { border-color: rgba(255, 235, 179, 0.72); box-shadow: inset 0 0 2rem rgba(121, 203, 232, 0.16), 0 0 1.4rem rgba(226, 199, 132, 0.2); }
}

@keyframes nora-star-drift {
  from { transform: translate3d(-1.4%, -0.8%, 0) rotate(0deg); }
  to { transform: translate3d(1.4%, 0.8%, 0) rotate(2deg); }
}

@keyframes nora-near-star-float {
  from { transform: translate3d(-0.5rem, -0.7rem, 45px) scale(0.8); opacity: 0.5; }
  to { transform: translate3d(0.7rem, 0.6rem, 70px) scale(1.15); opacity: 1; }
}

@keyframes nora-light-sweep {
  from { transform: rotate(calc(var(--beam-angle) - 6deg)) translateX(-8%); opacity: 0.08; }
  50% { opacity: 0.2; }
  to { transform: rotate(calc(var(--beam-angle) + 6deg)) translateX(7%); opacity: 0.11; }
}

@keyframes nora-glyph-float {
  from { transform: translate3d(0, -0.25rem, 52px) rotate(-2deg); }
  to { transform: translate3d(0.35rem, 0.45rem, 68px) rotate(4deg); }
}

@keyframes nora-seal-float {
  from { transform: translate3d(0, -0.25rem, 52px) rotate(-1.5deg); }
  to { transform: translate3d(0, 0.5rem, 64px) rotate(1.5deg); }
}

@keyframes nora-copy-arrive {
  from { opacity: 0; transform: translate3d(-1.4rem, 0.8rem, 0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes nora-stage-arrive {
  from { opacity: 0; transform: translate3d(2rem, 1.5rem, -80px) scale(0.92); filter: blur(7px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes nora-cta-shine {
  0%, 58% { transform: skewX(-18deg) translateX(-260%); opacity: 0; }
  66% { opacity: 0.74; }
  78%, 100% { transform: skewX(-18deg) translateX(620%); opacity: 0; }
}

@media (max-width: 1050px) {
  .cinematic-site .nav-links { gap: 1rem; }
  .cinematic-site .nav-links a { font-size: 0.78rem; }
  .hero-grid { grid-template-columns: minmax(0, 0.93fr) minmax(27rem, 1.07fr); }
  .hero-copy h1 { font-size: clamp(3rem, 6.4vw, 4.8rem); }
  .mode-card-cinematic,
  .reading-guide-card { padding: 1.65rem; }
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
}

@media (max-width: 900px) {
  .cinematic-site .nav-links { display: none; }
  .cinematic-site .nav-toggle { display: flex; }

  .hero-grid,
  .subpage-hero-grid,
  .how-grid,
  .example-grid,
  .faq-layout,
  .final-cta-inner,
  .decision-grid,
  .daily-rhythm-grid,
  .charm-example-grid,
  .workshop-grid,
  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .cinematic-hero { min-height: auto; padding-top: 8.5rem; }
  .hero-grid { gap: 4rem; min-height: 0; }
  .hero-copy { max-width: 43rem; }
  .celestial-stage { width: min(100%, 35rem); margin-inline: auto; }
  .hero-scroll-cue { display: none; }

  .how-grid { align-items: start; }
  .portal-visual { max-width: 36rem; margin-inline: auto; }

  .mode-grid,
  .reading-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-card-cinematic:last-child,
  .reading-guide-card:last-child { grid-column: 1 / -1; min-height: 24rem; }
  .mode-card-cinematic > p:not(.mode-index),
  .guide-card-lead { min-height: 0; }

  .example-grid { gap: 4rem; }
  .example-visual { max-width: 38rem; }
  .faq-intro { position: static; }
  .final-cta-orb { display: none; }

  .subpage-hero { min-height: 0; }
  .subpage-hero-grid { gap: 4rem; }
  .subpage-hero-copy { max-width: 43rem; }
  .subpage-hero-art { width: min(100%, 35rem); margin-inline: auto; }

  .editorial-grid { gap: 1.5rem; }
  .editorial-index { display: none; }
  .editorial-copy { max-width: 48rem; padding-top: 0; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 719px) {
  :root { --container-padding: 1.15rem; }
  body.cinematic-site { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  body.cinematic-site:not(.home-page) { padding-bottom: 0; }
  .site-section { padding-block: 4.75rem; }
  .section-heading { margin-bottom: 2.6rem; }
  .section-heading h2 { font-size: clamp(2rem, 9.4vw, 2.8rem); }

  .cinematic-site .nav-header { height: 4.4rem; }
  .cinematic-site .nav-logo { gap: 0.52rem; }
  .cinematic-site .logo-mark { width: 1.75rem; height: 1.75rem; }
  .logo-lockup strong { font-size: 0.9rem; }
  .logo-lockup small { font-size: 0.45rem; }
  .cinematic-site .nav-line-cta { display: none; }
  .cinematic-site .lang-toggle { min-width: 4.25rem; min-height: 2.75rem; }
  .cinematic-site .nav-toggle { width: 2.75rem; height: 2.75rem; }
  .cinematic-site .nav-toggle[aria-expanded="true"] {
    position: fixed;
    z-index: 401;
    top: 0.8rem;
    right: max(1rem, env(safe-area-inset-right));
    background: #07192c;
  }
  .cinematic-site:has(.nav-toggle[aria-expanded="true"]) .nav-header {
    z-index: 401;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cinematic-site:has(.nav-toggle[aria-expanded="true"]) .nav-header .nav-logo,
  .cinematic-site:has(.nav-toggle[aria-expanded="true"]) .nav-header .lang-toggle,
  .cinematic-site:has(.nav-toggle[aria-expanded="true"]) .nav-header .nav-line-cta {
    visibility: hidden;
  }
  .cinematic-site:has(.nav-toggle[aria-expanded="true"]) .nav-header .nav-toggle {
    visibility: visible;
    pointer-events: auto;
  }
  .cinematic-site .nav-actions { gap: 0.35rem; }

  .cinematic-hero {
    padding: 7.2rem 0 4.75rem;
    background:
      linear-gradient(180deg, rgba(3, 13, 27, 0.98), rgba(6, 20, 38, 0.88) 48%, rgba(4, 15, 28, 0.98)),
      radial-gradient(circle at 65% 62%, rgba(44, 109, 150, 0.28), transparent 22rem),
      #04101f;
  }
  .hero-grid { gap: 1.5rem; }
  .hero-copy h1 { margin: 1rem 0 1.2rem; font-size: clamp(2.75rem, 14vw, 4.2rem); }
  .hero-copy h1 span:last-child { display: block; margin: 0.35rem 0 0; font-size: 0.48em; }
  .hero-lead { font-size: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .line-cta { width: 100%; }
  .hero-actions .quiet-link { width: fit-content; }
  .hero-notes { display: flex; gap: 0.35rem 0.9rem; }

  .hero-visual {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
  }

  .celestial-stage { width: min(100%, 29rem); }
  .hero-portrait { width: 85%; aspect-ratio: 4 / 4.8; }
  .hero-portrait img { object-position: 50% 50%; }
  .hero-seal { right: 0; bottom: 0.5rem; width: 5.4rem; }
  .celestial-glyph--sun { left: 1%; }
  .celestial-glyph--moon { right: 1%; }
  .observatory-vault { top: 70%; left: 50%; width: 42rem; opacity: 0.66; }
  .observatory-column { width: 4.1rem; height: 49%; opacity: 0.22; }
  .light-shaft { width: 12rem; opacity: 0.11; }
  .astral-sphere { inset: -4%; }
  .orbit-3d--equator { width: 112%; }
  .orbit-3d--meridian { height: 111%; }
  .orbiting-body--gold { right: 2%; }
  .orbiting-body--blue { left: 1%; }

  .manifesto-inner { flex-wrap: wrap; gap: 0.6rem 1rem; min-height: 7.5rem; padding-block: 1.5rem; }
  .manifesto-inner p { flex-basis: 100%; }
  .manifesto-divider { display: none; }

  .how-grid { gap: 2.8rem; }
  .portal-arch { aspect-ratio: 1 / 1; border-radius: 50% 50% 0.35rem 0.35rem / 20% 20% 0.35rem 0.35rem; }
  .portal-arch img { object-position: 50% 50%; }
  .step-item { grid-template-columns: 2.4rem 1fr; gap: 0.8rem; padding: 1.4rem 0; }

  .mode-grid,
  .reading-guide-grid,
  .calm-feature-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .mode-card-cinematic,
  .mode-card-cinematic:last-child,
  .reading-guide-card,
  .reading-guide-card:last-child { grid-column: auto; min-height: 0; }
  .mode-card-cinematic { padding: 1.65rem; }
  .mode-orbit { margin-bottom: 1.5rem; }

  .example-grid { gap: 3rem; }
  .example-visual { padding: 0 0.8rem 0.8rem 0; }
  .example-visual::after { inset: 0.8rem 0 0 0.8rem; }
  .example-constellation { right: 0; }
  .example-visual figure { aspect-ratio: 1 / 1; }
  .reading-sheet { padding: 2rem 1.35rem; }
  .reading-sheet::before { inset: 0.35rem; }
  .reading-sheet-topline { align-items: flex-start; flex-direction: column; }
  .example-question { grid-template-columns: 1fr; gap: 0.25rem; }

  .faq-layout { gap: 2.5rem; }
  .native-faq summary { min-height: 4.8rem; font-size: 1.05rem; }
  .native-faq details > div { padding-right: 1.25rem; }

  .final-cta { min-height: 0; padding-block: 5.5rem; }
  .final-cta-copy h2 { font-size: clamp(2.35rem, 10.5vw, 3.3rem); }
  .final-cta-copy .line-cta { width: 100%; }

  .subpage-hero { padding: 7.5rem 0 4.75rem; }
  .subpage-hero-grid { gap: 3.5rem; }
  .subpage-hero-copy h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .subpage-hero-copy .line-cta { width: 100%; }
  .subpage-hero-art { width: min(100%, 29rem); }
  .subpage-hero-art figure { aspect-ratio: 1 / 1; }
  .subpage-hero-art img { object-position: 50% 50%; }
  .subpage-hero-art--calm img { object-position: 50% 50%; }

  .reading-guide-card { padding: 1.6rem; min-height: 0; }
  .guide-card-lead { min-height: 0; }
  .decision-grid { gap: 2.5rem; }
  .decision-list > div { grid-template-columns: 1fr; gap: 0.55rem; min-height: 0; padding-block: 1.35rem; }
  .decision-list strong { white-space: normal; }
  .daily-strip-inner,
  .shared-cta-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .shared-cta-inner .line-cta { width: 100%; }

  .daily-rhythm-grid,
  .charm-example-grid,
  .workshop-grid { gap: 3rem; }
  .day-timeline::before { left: 1.65rem; }
  .day-timeline li { grid-template-columns: 3.3rem 1fr; gap: 1rem; min-height: 10.5rem; }
  .timeline-glyph { width: 3.3rem; }
  .charm-message { padding: 1.4rem; }
  .charm-message footer { grid-template-columns: 1fr; }

  .utility-hero { min-height: 25rem; padding: 8.5rem 0 4.5rem; }
  .utility-astrolabe { width: 23rem; }
  .help-entry-card { grid-template-columns: 2.2rem 1fr auto; gap: 0.8rem; min-height: 0; padding: 1.4rem 1rem; }
  .help-entry-card h3 { font-size: 1.2rem; }

  .about-hero { min-height: 40rem; padding: 8.5rem 0 5rem; }
  .about-hero::before { width: 37rem; }
  .about-hero::after { width: 28rem; }
  .about-hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .about-statement blockquote { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .workshop-visual { padding: 0 0.8rem 0.8rem 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 0.4rem; }

  .home-page .mobile-line-bar {
    position: fixed;
    z-index: 180;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 4.6rem;
    padding: 0.55rem max(1rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    color: var(--nora-ivory);
    background: rgba(4, 16, 30, 0.97);
    border-top: 1px solid var(--nora-line);
    box-shadow: 0 -1rem 2.5rem rgba(0, 4, 11, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }
  .home-page .mobile-line-bar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-line-bar > span { display: grid; line-height: 1.35; }
  .mobile-line-bar strong { font-size: 0.88rem; }
  .mobile-line-bar small { color: #95a7b8; font-size: 0.7rem; }
  .mobile-line-bar a { min-height: 3rem; padding: 0.65rem 1rem; color: var(--nora-midnight); background: var(--nora-gold-bright); border-radius: 0.2rem; font-weight: 700; }

  .home-page .scroll-top { bottom: 0.8rem; }
  .home-page .mobile-line-bar.is-visible + .scroll-top { bottom: 5.8rem; }
  .scroll-top { right: 0.8rem; bottom: 0.8rem; }

  .light-shaft,
  .foreground-dust,
  .hero-portrait::before,
  .hero-portrait img { animation: none; }
  .light-shaft { filter: blur(6px); mix-blend-mode: normal; }
  .observatory-column,
  .celestial-stage,
  .orbit-3d,
  .hero-portrait img { will-change: auto; }

  .legal-hero,
  .legal-page-header { padding: 8.5rem 0 3.5rem; }
  main.legal-page { padding-top: 7rem; }
  .legal-sheet,
  .legal-content {
    width: 100%;
    max-width: none;
    padding: 1.4rem 0.25rem;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 390px) {
  .hero-copy h1 { font-size: 2.7rem; }
  .hero-seal { width: 4.9rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinematic-site *,
  .cinematic-site *::before,
  .cinematic-site *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .orbit,
  .subpage-orbit,
  .final-ring,
  .star-cluster,
  .hero-scroll-cue span {
    animation: none !important;
  }
  .hero-sky::after,
  .star-depth,
  .light-shaft,
  .orbit-3d,
  .hero-aura,
  .orbiting-body,
  .hero-portrait::before,
  .hero-portrait img,
  .foreground-dust,
  .celestial-glyph,
  .hero-seal,
  .hero-actions .line-cta::after,
  .cinematic-motion-ready .hero-copy,
  .cinematic-motion-ready .hero-visual {
    animation: none !important;
  }
  .celestial-stage,
  .hero-sky,
  .observatory-vault,
  .observatory-column,
  .cosmic-haze {
    transform: none !important;
    transition: none !important;
  }
  .observatory-vault { transform: translate(-50%, -50%) !important; }
  .orbit-3d--equator { transform: translate(-50%, -50%) rotateX(68deg) !important; }
  .orbit-3d--meridian { transform: translate(-50%, -50%) rotateY(68deg) !important; }
  .orbit-3d--diagonal { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-28deg) !important; }
}