@property --ring-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --route-stop {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 8%;
}

:root {
  --night: #061917;
  --navy: #071f38;
  --ink: #102923;
  --coral: #ff6b61;
  --mint: #b8eac8;
  --blue: #9fd4f1;
  --sun: #f3dc7c;
  --paper: #f5f1e9;
  --cloud: #e0edf4;
  --white: #fbfaf6;
  --muted: #687871;
  --line-dark: rgba(16, 41, 35, .22);
  --line-light: rgba(251, 250, 246, .25);
  --ease: cubic-bezier(.2, .8, .16, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Instrument Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body, button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--night);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-shell { width: min(1380px, calc(100% - 64px)); margin: 0 auto; }

.section-label,
.scene-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section-label::before,
.scene-kicker::before {
  width: 28px;
  height: 1px;
  content: "";
  background: currentColor;
}

.journey {
  --pointer-x: 0px;
  --pointer-y: 0px;
  position: relative;
  height: 720svh;
  color: var(--white);
  background: var(--night);
}

.journey-world {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 610px;
  overflow: clip;
  transition: color .7s ease;
}

.journey-canvas {
  position: relative;
  height: 100%;
  overflow: clip;
  isolation: isolate;
}

.journey[data-active="2"] .journey-world,
.journey[data-active="3"] .journey-world,
.journey[data-active="4"] .journey-world,
.journey[data-active="6"] .journey-world,
.journey[data-active="7"] .journey-world { color: var(--ink); }

.journey-tones,
.journey-tone,
.journey-grid,
.journey-noise {
  position: absolute;
  inset: 0;
}

.journey-tones { z-index: -10; background: var(--night); }
.journey-tone { opacity: 0; will-change: opacity; }
.journey-tone:first-child { opacity: 1; }

.tone-intro {
  background:
    radial-gradient(circle at 72% 42%, rgba(159,212,241,.22), transparent 27%),
    radial-gradient(circle at 70% 70%, rgba(255,107,97,.17), transparent 28%),
    #061917;
}

.tone-morning {
  background:
    radial-gradient(circle at 22% 78%, rgba(255,107,97,.21), transparent 27%),
    radial-gradient(circle at 79% 22%, rgba(159,212,241,.17), transparent 25%),
    #0a211e;
}

.tone-organize {
  background:
    radial-gradient(circle at 80% 30%, rgba(255,107,97,.2), transparent 29%),
    radial-gradient(circle at 17% 82%, rgba(184,234,200,.52), transparent 31%),
    #f4efe6;
}

.tone-work {
  background:
    radial-gradient(circle at 85% 30%, rgba(255,107,97,.16), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(184,234,200,.46), transparent 29%),
    #f2eee6;
}

.tone-wellness {
  background:
    radial-gradient(circle at 76% 48%, rgba(159,212,241,.56), transparent 31%),
    radial-gradient(circle at 17% 18%, rgba(255,107,97,.13), transparent 27%),
    #e4f2e5;
}

.tone-journal {
  background:
    radial-gradient(circle at 80% 68%, rgba(140,119,214,.22), transparent 31%),
    radial-gradient(circle at 12% 19%, rgba(255,107,97,.16), transparent 25%),
    #0b1930;
}

.tone-proactive {
  background:
    radial-gradient(circle at 14% 50%, rgba(255,255,255,.36), transparent 28%),
    radial-gradient(circle at 86% 17%, rgba(255,107,97,.21), transparent 24%),
    #efd872;
}

.tone-recall {
  background:
    radial-gradient(circle at 88% 45%, rgba(255,107,97,.31), transparent 27%),
    radial-gradient(circle at 14% 82%, rgba(255,255,255,.55), transparent 33%),
    #c8e3f1;
}

.journey-grid {
  z-index: -3;
  opacity: .15;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent calc(8.333% - .5px), currentColor calc(8.333% - .5px), currentColor calc(8.333% + .5px), transparent calc(8.333% + .5px));
  background-size: 8.333% 100%;
}

.journey-noise {
  z-index: 50;
  opacity: .13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.chela-flow {
  --route-stop: 8%;
  --flow-ink: rgba(251,250,246,.72);
  --flow-line: rgba(251,250,246,.2);
  position: absolute;
  z-index: -1;
  top: 52%;
  left: 75%;
  width: min(45vw, 620px);
  aspect-ratio: 1;
  opacity: .96;
  color: var(--flow-ink);
  pointer-events: none;
  transform: translate(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y))) rotate(-5deg);
  transition: top 1s var(--ease), left 1s var(--ease), width 1s var(--ease), opacity .75s ease, transform 1s var(--ease), filter .75s ease, color .7s ease;
}

.flow-caption {
  position: absolute;
  top: 2%;
  left: 50%;
  display: grid;
  gap: 3px;
  text-align: center;
  transform: translateX(-50%);
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.flow-caption span { font-size: 8px; letter-spacing: .16em; opacity: .5; }
.flow-caption strong { font-size: 10px; font-weight: 500; letter-spacing: .09em; }

.flow-route,
.flow-orbit {
  position: absolute;
  border-radius: 50%;
}

.flow-route {
  inset: 10%;
  background: conic-gradient(from -22deg, var(--coral) 0 var(--route-stop), var(--flow-line) var(--route-stop) 100%);
  filter: drop-shadow(0 0 12px rgba(255,107,97,.16));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  transition: --route-stop 1s var(--ease);
}

.flow-orbit { border: 1px solid var(--flow-line); }
.orbit-one { inset: 18%; animation: flow-orbit-drift 14s ease-in-out infinite alternate; }
.orbit-two { inset: 31%; border-style: dashed; opacity: .68; animation: flow-orbit-drift 18s ease-in-out -6s infinite alternate-reverse; }

.flow-links { position: absolute; inset: 0; }
.flow-link {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 1px;
  opacity: .14;
  background: linear-gradient(90deg, var(--coral), currentColor 60%, transparent);
  transform: rotate(var(--link-angle));
  transform-origin: 0 50%;
  transition: opacity .6s ease, width .8s var(--ease), background .6s ease;
}
.link-task { --link-angle: -132deg; }
.link-work { --link-angle: -39deg; }
.link-health { --link-angle: 4deg; }
.link-journal { --link-angle: 49deg; }
.link-reminder { --link-angle: 124deg; }
.link-recall { --link-angle: 178deg; }

.flow-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 28%;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  color: #102923;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.95), transparent 22%),
    radial-gradient(circle at 68% 73%, rgba(184,234,200,.86), transparent 34%),
    linear-gradient(145deg, #9fd4f1, #ff8b7d);
  box-shadow: inset -20px -18px 38px rgba(6,25,23,.23), 0 28px 80px rgba(0,0,0,.2), 0 0 0 14px rgba(159,212,241,.08);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: flow-core-breathe 6.5s ease-in-out infinite alternate;
  transition: width .8s var(--ease), border-radius .8s var(--ease), box-shadow .7s ease;
}
.flow-core::before { position: absolute; inset: -13%; content: ""; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: memory-pulse 3.8s ease-out infinite; }
.flow-core strong { margin-top: 7px; font-size: clamp(13px, 1.35vw, 19px); font-weight: 600; letter-spacing: -.045em; }
.flow-core small { margin-top: 2px; font-family: "DM Mono", monospace; font-size: 6px; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.core-signal { position: absolute; top: 18%; right: 17%; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(255,107,97,.13), 0 0 20px var(--coral); }

.core-wave { display: flex; height: 20px; align-items: center; justify-content: center; gap: 3px; }
.core-wave i { width: 2px; height: var(--wave-height); border-radius: 4px; background: #102923; animation: flow-wave 1.05s ease-in-out infinite alternate; }
.core-wave i:nth-child(1) { --wave-height: 6px; animation-delay: -.4s; }
.core-wave i:nth-child(2) { --wave-height: 13px; animation-delay: -.15s; }
.core-wave i:nth-child(3) { --wave-height: 9px; animation-delay: -.65s; }
.core-wave i:nth-child(4) { --wave-height: 19px; animation-delay: -.3s; }
.core-wave i:nth-child(5) { --wave-height: 11px; animation-delay: -.55s; }
.core-wave i:nth-child(6) { --wave-height: 15px; animation-delay: -.2s; }
.core-wave i:nth-child(7) { --wave-height: 7px; animation-delay: -.7s; }

.flow-node {
  --node-color: var(--coral);
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .25;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity .6s ease, transform .75s var(--ease), filter .6s ease;
}
.flow-node > i { position: relative; display: block; width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 0 7px color-mix(in srgb, var(--node-color) 13%, transparent); }
.flow-node > i::before { position: absolute; inset: -8px; content: ""; border: 1px solid var(--node-color); border-radius: 50%; opacity: 0; }
.flow-node span { display: grid; gap: 2px; font-family: "DM Mono", monospace; text-transform: uppercase; white-space: nowrap; }
.flow-node small { font-size: 6px; letter-spacing: .08em; opacity: .55; }
.flow-node strong { font-size: 8px; font-weight: 500; letter-spacing: .08em; }
.flow-node.node-task { top: 22%; left: 26%; --node-color: #ff6b61; }
.flow-node.node-work { top: 27%; left: 78%; --node-color: #75bee5; }
.flow-node.node-health { top: 52%; left: 94%; --node-color: #69d49a; }
.flow-node.node-journal { top: 80%; left: 76%; --node-color: #bca9ff; }
.flow-node.node-reminder { top: 82%; left: 27%; --node-color: #f3c95b; }
.flow-node.node-recall { top: 51%; left: 5%; --node-color: #ff8d7f; }

.flow-answer {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: grid;
  width: 46%;
  gap: 6px;
  padding: 14px 16px;
  opacity: 0;
  color: #102923;
  background: rgba(251,250,246,.94);
  box-shadow: 0 18px 50px rgba(16,41,35,.16);
  transform: translate(-50%, -44%) scale(.84);
  transition: opacity .6s ease, transform .8s var(--ease);
}
.flow-answer small { color: #b74642; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.flow-answer strong { font-size: clamp(12px, 1.25vw, 17px); font-weight: 500; letter-spacing: -.03em; }

.journey[data-active="1"] .chela-flow { --route-stop: 15%; }
.journey[data-active="2"] .chela-flow { --route-stop: 31%; }
.journey[data-active="3"] .chela-flow { --route-stop: 46%; }
.journey[data-active="4"] .chela-flow { --route-stop: 61%; }
.journey[data-active="5"] .chela-flow { --route-stop: 75%; }
.journey[data-active="6"] .chela-flow { --route-stop: 90%; }
.journey[data-active="7"] .chela-flow { --route-stop: 100%; }

.journey[data-active="2"] .chela-flow .node-task,
.journey[data-active="3"] .chela-flow .node-work,
.journey[data-active="4"] .chela-flow .node-health,
.journey[data-active="5"] .chela-flow .node-journal,
.journey[data-active="6"] .chela-flow .node-reminder,
.journey[data-active="7"] .chela-flow .node-recall { opacity: 1; filter: saturate(1.2); transform: translate(-50%, -50%) scale(1.12); }
.journey[data-active="2"] .chela-flow .link-task,
.journey[data-active="3"] .chela-flow .link-work,
.journey[data-active="4"] .chela-flow .link-health,
.journey[data-active="5"] .chela-flow .link-journal,
.journey[data-active="6"] .chela-flow .link-reminder,
.journey[data-active="7"] .chela-flow .link-recall { width: 43%; opacity: .84; }
.journey[data-active="2"] .chela-flow .node-task > i::before,
.journey[data-active="3"] .chela-flow .node-work > i::before,
.journey[data-active="4"] .chela-flow .node-health > i::before,
.journey[data-active="5"] .chela-flow .node-journal > i::before,
.journey[data-active="6"] .chela-flow .node-reminder > i::before,
.journey[data-active="7"] .chela-flow .node-recall > i::before { animation: flow-node-pulse 1.8s ease-out infinite; }

.journey[data-active="2"] .chela-flow .flow-node { opacity: .88; }
.journey[data-active="6"] .chela-flow .node-reminder > i { box-shadow: 0 0 0 11px rgba(243,201,91,.18), 0 0 30px rgba(243,201,91,.7); }
.journey[data-active="7"] .flow-core { width: 17%; opacity: .5; }
.journey[data-active="7"] .flow-answer { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.journey[data-active="7"] .chela-flow .flow-node { opacity: .7; }
.journey[data-active="2"] .chela-flow .flow-node.node-task,
.journey[data-active="7"] .chela-flow .flow-node.node-recall { opacity: 1; }

.journey[data-active="1"] .chela-flow { top: 51%; left: 49%; width: min(57vw, 735px); opacity: .22; transform: translate(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y))) rotate(3deg); }
.journey[data-active="2"] .chela-flow { top: 50%; left: 79%; width: min(42vw, 550px); opacity: .33; }
.journey[data-active="3"] .chela-flow { top: 50%; left: 89%; width: min(36vw, 470px); opacity: .32; }
.journey[data-active="4"] .chela-flow { top: 51%; left: 75%; width: min(40vw, 530px); opacity: .34; }
.journey[data-active="5"] .chela-flow { top: 50%; left: 13%; width: min(35vw, 460px); opacity: .3; }
.journey[data-active="6"] .chela-flow { top: 48%; left: 12%; width: min(31vw, 410px); opacity: .29; }
.journey[data-active="7"] .chela-flow { top: 52%; left: 87%; width: min(41vw, 535px); opacity: .42; }

.journey[data-active="2"] .chela-flow,
.journey[data-active="3"] .chela-flow,
.journey[data-active="4"] .chela-flow,
.journey[data-active="6"] .chela-flow,
.journey[data-active="7"] .chela-flow { --flow-ink: rgba(16,41,35,.72); --flow-line: rgba(16,41,35,.18); }

.memory-ribbon {
  --ribbon-ink: rgba(251,250,246,.78);
  --ribbon-line: rgba(251,250,246,.22);
  position: absolute;
  z-index: -1;
  top: 51%;
  left: 75%;
  width: min(43vw, 590px);
  aspect-ratio: .86;
  opacity: 0;
  visibility: hidden;
  color: var(--ribbon-ink);
  pointer-events: none;
  transform: translate(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y))) rotate(-3deg);
  transition: top 1s var(--ease), left 1s var(--ease), width 1s var(--ease), opacity .75s ease, transform 1s var(--ease), color .7s ease, visibility .75s ease;
}

.journey[data-concept="ribbon"] .chela-flow { opacity: 0 !important; visibility: hidden; }
.journey[data-concept="ribbon"] .memory-ribbon { opacity: .92; visibility: visible; }

.ribbon-title {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  gap: 4px;
  text-align: center;
  transform: translateX(-50%);
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-title span { font-size: 7px; letter-spacing: .15em; opacity: .48; }
.ribbon-title strong { font-size: 9px; font-weight: 500; letter-spacing: .09em; }

.ribbon-glow {
  position: absolute;
  inset: 9% 5%;
  border-radius: 43% 57% 49% 51% / 54% 43% 57% 46%;
  opacity: .42;
  background:
    radial-gradient(circle at 57% 17%, rgba(159,212,241,.38), transparent 24%),
    radial-gradient(circle at 37% 49%, rgba(255,107,97,.3), transparent 28%),
    radial-gradient(circle at 61% 78%, rgba(184,234,200,.31), transparent 28%);
  filter: blur(28px);
  animation: ribbon-glow-breathe 9s ease-in-out infinite alternate;
}

.ribbon-track { position: absolute; inset: 5%; }
.ribbon-segment {
  --segment-color-a: rgba(159,212,241,.4);
  --segment-color-b: rgba(255,107,97,.78);
  --segment-rotate: 0deg;
  position: absolute;
  display: block;
  width: 42%;
  height: clamp(12px, 1.4vw, 19px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  opacity: .12;
  background: linear-gradient(90deg, transparent, var(--segment-color-a) 18%, var(--segment-color-b));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 0 24px color-mix(in srgb, var(--segment-color-b) 25%, transparent);
  transform: rotate(var(--segment-rotate)) scaleX(.62);
  transform-origin: 0 50%;
  transition: opacity .65s ease, transform .95s var(--ease), filter .65s ease;
}
.ribbon-segment::after { position: absolute; top: 50%; right: -5px; width: 9px; height: 9px; content: ""; border: 1px solid currentColor; border-radius: 50%; background: var(--segment-color-b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--segment-color-b) 13%, transparent); transform: translateY(-50%); }
.segment-one { top: 17%; left: 43%; --segment-rotate: 31deg; }
.segment-two { top: 35%; left: 73%; --segment-rotate: 145deg; --segment-color-a: rgba(255,107,97,.42); --segment-color-b: rgba(117,190,229,.82); }
.segment-three { top: 51%; left: 41%; --segment-rotate: 31deg; --segment-color-a: rgba(117,190,229,.42); --segment-color-b: rgba(105,212,154,.88); }
.segment-four { top: 68%; left: 72%; --segment-rotate: 145deg; --segment-color-a: rgba(105,212,154,.4); --segment-color-b: rgba(188,169,255,.86); }
.segment-five { top: 83%; left: 41%; --segment-rotate: 30deg; --segment-color-a: rgba(188,169,255,.42); --segment-color-b: rgba(243,201,91,.9); }

.ribbon-seed {
  position: absolute;
  z-index: 4;
  top: 10%;
  left: 39%;
  display: grid;
  width: 22%;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 48% 52% 57% 43% / 43% 56% 44% 57%;
  color: #102923;
  background: linear-gradient(145deg, #f7fbff, #9fd4f1 42%, #ff8b7d);
  box-shadow: inset -15px -15px 31px rgba(6,25,23,.18), 0 20px 55px rgba(0,0,0,.18), 0 0 0 11px rgba(159,212,241,.07);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: ribbon-seed-breathe 5.8s ease-in-out infinite alternate;
}
.ribbon-seed > div { display: flex; height: 19px; align-items: center; justify-content: center; gap: 3px; }
.ribbon-seed i { width: 2px; height: var(--seed-height); border-radius: 4px; background: #102923; animation: flow-wave 1s ease-in-out infinite alternate; }
.ribbon-seed i:nth-child(1) { --seed-height: 6px; animation-delay: -.2s; }
.ribbon-seed i:nth-child(2) { --seed-height: 15px; animation-delay: -.6s; }
.ribbon-seed i:nth-child(3) { --seed-height: 10px; animation-delay: -.35s; }
.ribbon-seed i:nth-child(4) { --seed-height: 18px; animation-delay: -.7s; }
.ribbon-seed i:nth-child(5) { --seed-height: 8px; animation-delay: -.1s; }
.ribbon-seed strong { margin-top: 5px; font-size: clamp(12px, 1.2vw, 17px); font-weight: 600; letter-spacing: -.04em; }

.ribbon-event {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 155px;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--ribbon-line);
  opacity: .09;
  background: color-mix(in srgb, currentColor 5%, transparent);
  backdrop-filter: blur(8px);
  transform: translateY(8px) scale(.9);
  transition: opacity .65s ease, transform .8s var(--ease), border-color .65s ease, background .65s ease;
}
.ribbon-event time,
.ribbon-event span,
.ribbon-recall small,
.ribbon-recall span { font-family: "DM Mono", monospace; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.ribbon-event time { position: absolute; top: -13px; left: 0; opacity: .55; }
.ribbon-event span { color: var(--coral); }
.ribbon-event strong { font-size: 10px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.event-understood { top: 25%; right: 1%; }
.event-work { top: 42%; left: 0; }
.event-health { top: 57%; right: -2%; }
.event-journal { top: 73%; left: -2%; }
.event-reminder { right: 1%; bottom: 2%; }

.ribbon-recall {
  position: absolute;
  z-index: 7;
  top: 48%;
  left: 50%;
  display: grid;
  width: 60%;
  gap: 8px;
  padding: 17px 19px;
  opacity: 0;
  color: #102923;
  background: rgba(251,250,246,.96);
  box-shadow: 0 24px 70px rgba(16,41,35,.2);
  transform: translate(-50%, -42%) scale(.82);
  transition: opacity .65s ease, transform .85s var(--ease);
}
.ribbon-recall small { color: #b74642; }
.ribbon-recall strong { font-size: clamp(14px, 1.55vw, 22px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.ribbon-recall span { opacity: .5; }

.journey[data-concept="ribbon"][data-active="1"] .ribbon-seed { box-shadow: inset -15px -15px 31px rgba(6,25,23,.18), 0 20px 55px rgba(0,0,0,.18), 0 0 0 18px rgba(159,212,241,.12); }
.journey[data-concept="ribbon"][data-active="2"] .segment-one,
.journey[data-concept="ribbon"][data-active="3"] .segment-two,
.journey[data-concept="ribbon"][data-active="4"] .segment-three,
.journey[data-concept="ribbon"][data-active="5"] .segment-four,
.journey[data-concept="ribbon"][data-active="6"] .segment-five { opacity: 1; filter: saturate(1.2); transform: rotate(var(--segment-rotate)) scaleX(1); }
.journey[data-concept="ribbon"][data-active="2"] .event-understood,
.journey[data-concept="ribbon"][data-active="3"] .event-work,
.journey[data-concept="ribbon"][data-active="4"] .event-health,
.journey[data-concept="ribbon"][data-active="5"] .event-journal,
.journey[data-concept="ribbon"][data-active="6"] .event-reminder { opacity: 1; transform: translateY(0) scale(1); }
.journey[data-concept="ribbon"][data-active="6"] .event-reminder { border-color: rgba(243,201,91,.75); box-shadow: 0 0 0 9px rgba(243,201,91,.11), 0 17px 45px rgba(16,41,35,.15); animation: ribbon-reminder-pulse 2.2s ease-in-out infinite; }
.journey[data-concept="ribbon"][data-active="7"] .ribbon-track,
.journey[data-concept="ribbon"][data-active="7"] .ribbon-event,
.journey[data-concept="ribbon"][data-active="7"] .ribbon-seed { opacity: .22; filter: blur(1px); }
.journey[data-concept="ribbon"][data-active="7"] .ribbon-recall { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.journey[data-concept="ribbon"][data-active="1"] .memory-ribbon { top: 51%; left: 50%; width: min(56vw, 720px); opacity: .2; }
.journey[data-concept="ribbon"][data-active="2"] .memory-ribbon { top: 51%; left: 79%; width: min(42vw, 560px); opacity: .31; }
.journey[data-concept="ribbon"][data-active="3"] .memory-ribbon { top: 50%; left: 89%; width: min(36vw, 480px); opacity: .3; }
.journey[data-concept="ribbon"][data-active="4"] .memory-ribbon { top: 51%; left: 76%; width: min(40vw, 535px); opacity: .32; }
.journey[data-concept="ribbon"][data-active="5"] .memory-ribbon { top: 50%; left: 12%; width: min(35vw, 465px); opacity: .28; }
.journey[data-concept="ribbon"][data-active="6"] .memory-ribbon { top: 49%; left: 12%; width: min(31vw, 415px); opacity: .3; }
.journey[data-concept="ribbon"][data-active="7"] .memory-ribbon { top: 52%; left: 86%; width: min(42vw, 555px); opacity: .4; }

.journey[data-concept="ribbon"][data-active="2"] .memory-ribbon,
.journey[data-concept="ribbon"][data-active="3"] .memory-ribbon,
.journey[data-concept="ribbon"][data-active="4"] .memory-ribbon,
.journey[data-concept="ribbon"][data-active="6"] .memory-ribbon,
.journey[data-concept="ribbon"][data-active="7"] .memory-ribbon { --ribbon-ink: rgba(16,41,35,.78); --ribbon-line: rgba(16,41,35,.2); }

.life-rings {
  --rings-ink: rgba(251,250,246,.8);
  --rings-line: rgba(251,250,246,.16);
  position: absolute;
  z-index: -1;
  top: 52%;
  left: 75%;
  width: min(43vw, 590px);
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  color: var(--rings-ink);
  isolation: isolate;
  pointer-events: none;
  transform: translate(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y))) rotate(-4deg);
  transition: top 1s var(--ease), left 1s var(--ease), width 1s var(--ease), opacity .75s ease, transform 1s var(--ease), color .7s ease, visibility .75s ease;
}

.journey[data-concept="rings"] .chela-flow,
.journey[data-concept="rings"] .memory-ribbon { opacity: 0 !important; visibility: hidden; }
.journey[data-concept="rings"] .life-rings { opacity: .94; visibility: visible; }

.rings-title {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  display: grid;
  gap: 4px;
  text-align: center;
  transform: translateX(-50%);
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.rings-title span { font-size: 7px; letter-spacing: .15em; opacity: .5; }
.rings-title strong { font-size: 9px; font-weight: 500; letter-spacing: .09em; }

.regulus-field {
  --regulus-accent: #9fd4f1;
  --regulus-secondary: #ff8d7f;
  position: absolute;
  z-index: 0;
  inset: -22%;
  opacity: .72;
  background:
    radial-gradient(circle at 13% 27%, rgba(255,255,255,.68) 0 1px, transparent 1.6px),
    radial-gradient(circle at 83% 18%, rgba(159,212,241,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 66%, rgba(255,255,255,.58) 0 1px, transparent 1.6px),
    radial-gradient(circle at 19% 78%, rgba(184,234,200,.64) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 88%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 9%, rgba(255,255,255,.44) 0 .8px, transparent 1.4px);
  transition: opacity .7s ease, transform 1s var(--ease);
}

.regulus-corona {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 44% 56% 63% 37% / 52% 39% 61% 48%;
  opacity: .72;
  background:
    radial-gradient(circle at 43% 41%, rgba(255,255,255,.3), transparent 18%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--regulus-accent) 52%, transparent), transparent 47%),
    radial-gradient(circle at 64% 58%, color-mix(in srgb, var(--regulus-secondary) 30%, transparent), transparent 56%);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  animation: regulus-corona-drift 9s ease-in-out infinite alternate;
  transition: background .8s ease, opacity .7s ease;
}

.regulus-spectrum {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 64%;
  height: 4px;
  border-radius: 50%;
  opacity: .42;
  background: linear-gradient(90deg, transparent, rgba(188,169,255,.3) 18%, var(--regulus-accent) 36%, #fff 50%, var(--regulus-secondary) 65%, transparent 91%);
  filter: blur(.8px) drop-shadow(0 0 7px color-mix(in srgb, var(--regulus-accent) 48%, transparent));
  transform: translate(-50%, -50%) rotate(-4deg);
  animation: regulus-spectrum-shift 7s ease-in-out infinite alternate;
}

.regulus-dust { position: absolute; z-index: 2; inset: 13%; }
.regulus-dust i {
  position: absolute;
  width: var(--dust-size, 3px);
  height: var(--dust-size, 3px);
  border-radius: 50%;
  opacity: .42;
  background: color-mix(in srgb, var(--regulus-accent) 82%, white);
  box-shadow: 0 0 8px var(--regulus-accent), 0 0 20px color-mix(in srgb, var(--regulus-accent) 45%, transparent);
  animation: regulus-dust-drift var(--dust-time, 6s) ease-in-out var(--dust-delay, 0s) infinite alternate;
}
.regulus-dust i:nth-child(1) { top: 18%; left: 29%; --dust-size: 4px; --dust-time: 7s; }
.regulus-dust i:nth-child(2) { top: 30%; right: 19%; --dust-size: 2px; --dust-time: 5.5s; --dust-delay: -2s; }
.regulus-dust i:nth-child(3) { top: 48%; left: 12%; --dust-size: 2px; --dust-time: 8s; --dust-delay: -4s; }
.regulus-dust i:nth-child(4) { right: 7%; bottom: 38%; --dust-size: 3px; --dust-time: 6.5s; --dust-delay: -1s; }
.regulus-dust i:nth-child(5) { right: 26%; bottom: 14%; --dust-size: 4px; --dust-time: 7.5s; --dust-delay: -5s; }
.regulus-dust i:nth-child(6) { bottom: 20%; left: 24%; --dust-size: 2px; --dust-time: 5s; --dust-delay: -3s; }
.regulus-dust i:nth-child(7) { top: 11%; right: 37%; --dust-size: 2px; --dust-time: 8.5s; --dust-delay: -6s; }
.regulus-dust i:nth-child(8) { bottom: 42%; left: 36%; --dust-size: 3px; --dust-time: 6s; --dust-delay: -4s; }

.regulus-star { position: absolute; z-index: 3; inset: 0; display: block; }
.regulus-star::before {
  position: absolute;
  inset: 4%;
  content: "";
  opacity: .76;
  background:
    radial-gradient(ellipse 46% .42% at 50% 50%, rgba(255,255,255,.96), color-mix(in srgb, var(--regulus-accent) 52%, transparent) 32%, transparent 100%),
    radial-gradient(ellipse .42% 46% at 50% 50%, rgba(255,255,255,.9), color-mix(in srgb, var(--regulus-accent) 48%, transparent) 32%, transparent 100%),
    radial-gradient(ellipse 27% .32% at 50% 50%, rgba(255,255,255,.38), transparent 100%) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 11px color-mix(in srgb, var(--regulus-accent) 76%, transparent));
  animation: regulus-rays 5.6s ease-in-out infinite alternate;
}
.regulus-star::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  content: "";
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 50%;
  background: radial-gradient(circle at 37% 31%, #fff 0 18%, #f8fcff 32%, color-mix(in srgb, var(--regulus-accent) 78%, white) 59%, transparent 73%);
  box-shadow: 0 0 8px #fff, 0 0 22px color-mix(in srgb, var(--regulus-accent) 98%, white), 0 0 58px color-mix(in srgb, var(--regulus-accent) 72%, transparent), 0 0 110px color-mix(in srgb, var(--regulus-accent) 38%, transparent);
  transform: translate(-50%, -50%);
  animation: regulus-pulse 3.8s ease-in-out infinite;
}
.regulus-field > span {
  position: absolute;
  top: 43%;
  left: 57%;
  display: grid;
  gap: 2px;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.regulus-field > span::before { position: absolute; top: 4px; right: calc(100% + 7px); width: 19px; height: 1px; content: ""; background: currentColor; opacity: .45; }
.regulus-field > span small { font-size: 5px; font-weight: 400; letter-spacing: .1em; opacity: .48; }

.rings-aura {
  position: absolute;
  z-index: 1;
  inset: 12%;
  border-radius: 50%;
  opacity: .5;
  background:
    radial-gradient(circle at 37% 31%, rgba(159,212,241,.34), transparent 34%),
    radial-gradient(circle at 69% 68%, rgba(255,107,97,.27), transparent 37%),
    rgba(184,234,200,.05);
  filter: blur(25px);
  animation: rings-aura-breathe 8s ease-in-out infinite alternate;
}

.rings-stack { position: absolute; z-index: 2; inset: 8%; transform: rotate(-25deg); }
.life-ring {
  --ring-progress: 5%;
  --life-ring-color: var(--coral);
  --life-ring-inset: 0%;
  --life-ring-width: 9px;
  position: absolute;
  inset: var(--life-ring-inset);
  display: block;
  border-radius: 50%;
  background: conic-gradient(var(--life-ring-color) 0 var(--ring-progress), var(--rings-line) var(--ring-progress) 100%);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--life-ring-color) 16%, transparent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--life-ring-width)), #000 calc(100% - var(--life-ring-width) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--life-ring-width)), #000 calc(100% - var(--life-ring-width) + 1px));
  transition: --ring-progress 1.2s var(--ease), filter .7s ease, opacity .7s ease;
}
.ring-action { --life-ring-inset: 0%; --life-ring-color: #ff7066; --life-ring-width: 10px; }
.ring-work { --life-ring-inset: 8%; --life-ring-color: #75bee5; --life-ring-width: 9px; }
.ring-health { --life-ring-inset: 16%; --life-ring-color: #69d49a; --life-ring-width: 9px; }
.ring-journal { --life-ring-inset: 24%; --life-ring-color: #bca9ff; --life-ring-width: 8px; }
.ring-follow { --life-ring-inset: 32%; --life-ring-color: #f3c95b; --life-ring-width: 8px; }

.rings-core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 29%;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  color: #102923;
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.96), transparent 23%),
    linear-gradient(145deg, #9fd4f1, #b8eac8 48%, #ff8b7d);
  box-shadow: inset -17px -16px 36px rgba(6,25,23,.2), 0 25px 70px rgba(0,0,0,.2), 0 0 0 12px rgba(159,212,241,.08);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: rings-core-float 6.4s ease-in-out infinite alternate;
  transition: width .8s var(--ease), opacity .7s ease, filter .7s ease;
}
.rings-core strong { margin-top: 7px; font-size: clamp(11px, 1.2vw, 17px); font-weight: 600; letter-spacing: -.04em; }
.rings-core small { width: 85px; margin: 3px auto 0; font-family: "DM Mono", monospace; font-size: 5px; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; opacity: .55; }
.rings-wave { display: flex; height: 21px; align-items: center; justify-content: center; gap: 3px; }
.rings-wave i { width: 2px; height: var(--rings-wave-height); border-radius: 4px; background: #102923; animation: flow-wave .95s ease-in-out infinite alternate; }
.rings-wave i:nth-child(1) { --rings-wave-height: 6px; --wave-height: 6px; animation-delay: -.1s; }
.rings-wave i:nth-child(2) { --rings-wave-height: 14px; --wave-height: 14px; animation-delay: -.5s; }
.rings-wave i:nth-child(3) { --rings-wave-height: 9px; --wave-height: 9px; animation-delay: -.3s; }
.rings-wave i:nth-child(4) { --rings-wave-height: 19px; --wave-height: 19px; animation-delay: -.7s; }
.rings-wave i:nth-child(5) { --rings-wave-height: 12px; --wave-height: 12px; animation-delay: -.2s; }
.rings-wave i:nth-child(6) { --rings-wave-height: 7px; --wave-height: 7px; animation-delay: -.6s; }

.ring-detail {
  position: absolute;
  z-index: 6;
  display: grid;
  min-width: 175px;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--rings-line);
  opacity: 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  backdrop-filter: blur(8px);
  transform: translateY(9px) scale(.88);
  transition: opacity .65s ease, transform .8s var(--ease), border-color .65s ease;
}
.ring-detail span,
.ring-detail small,
.rings-answer small,
.rings-answer span { font-family: "DM Mono", monospace; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.ring-detail span { color: var(--detail-color, var(--coral)); }
.ring-detail strong { font-size: 11px; font-weight: 500; letter-spacing: -.02em; }
.ring-detail small { opacity: .5; }
.detail-action { top: 20%; left: -2%; --detail-color: #ff7066; }
.detail-work { top: 20%; right: -3%; --detail-color: #4d9dc6; }
.detail-health { right: -7%; bottom: 28%; --detail-color: #419d6b; }
.detail-journal { bottom: 9%; left: 1%; --detail-color: #927bd9; }
.detail-follow { right: 8%; bottom: 2%; --detail-color: #b8891c; }

.rings-answer {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  width: 58%;
  gap: 8px;
  padding: 17px 19px;
  opacity: 0;
  color: #102923;
  background: rgba(251,250,246,.96);
  box-shadow: 0 25px 75px rgba(16,41,35,.2);
  transform: translate(-50%, -43%) scale(.82);
  transition: opacity .65s ease, transform .85s var(--ease);
}
.rings-answer small { color: #b74642; }
.rings-answer strong { font-size: clamp(14px, 1.55vw, 22px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.rings-answer span { opacity: .5; }

.journey[data-concept="rings"][data-active="2"] .ring-action,
.journey[data-concept="rings"][data-active="3"] .ring-action,
.journey[data-concept="rings"][data-active="4"] .ring-action,
.journey[data-concept="rings"][data-active="5"] .ring-action,
.journey[data-concept="rings"][data-active="6"] .ring-action { --ring-progress: 72%; }
.journey[data-concept="rings"][data-active="3"] .ring-work,
.journey[data-concept="rings"][data-active="4"] .ring-work,
.journey[data-concept="rings"][data-active="5"] .ring-work,
.journey[data-concept="rings"][data-active="6"] .ring-work { --ring-progress: 81%; }
.journey[data-concept="rings"][data-active="4"] .ring-health,
.journey[data-concept="rings"][data-active="5"] .ring-health,
.journey[data-concept="rings"][data-active="6"] .ring-health { --ring-progress: 64%; }
.journey[data-concept="rings"][data-active="5"] .ring-journal,
.journey[data-concept="rings"][data-active="6"] .ring-journal { --ring-progress: 76%; }
.journey[data-concept="rings"][data-active="6"] .ring-follow { --ring-progress: 88%; }
.journey[data-concept="rings"][data-active="7"] .life-ring { --ring-progress: 100%; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--life-ring-color) 38%, transparent)); }

.journey[data-concept="rings"][data-active="2"] .detail-action,
.journey[data-concept="rings"][data-active="3"] .detail-work,
.journey[data-concept="rings"][data-active="4"] .detail-health,
.journey[data-concept="rings"][data-active="5"] .detail-journal,
.journey[data-concept="rings"][data-active="6"] .detail-follow { opacity: 1; transform: translateY(0) scale(1); }
.journey[data-concept="rings"][data-active="6"] .detail-follow { border-color: rgba(184,137,28,.7); animation: ring-detail-pulse 2.2s ease-in-out infinite; }
.journey[data-concept="rings"][data-active="7"] .rings-core { width: 18%; opacity: .25; filter: blur(1px); }
.journey[data-concept="rings"][data-active="7"] .ring-detail { opacity: 0; }
.journey[data-concept="rings"][data-active="7"] .rings-answer { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.journey[data-concept="rings"][data-active="7"] .regulus-field { opacity: 1; transform: scale(1.05); }

.journey[data-concept="rings"][data-active="1"] .life-rings { top: 51%; left: 50%; width: min(56vw, 720px); opacity: .18; }
.journey[data-concept="rings"][data-active="2"] .life-rings { top: 51%; left: 79%; width: min(42vw, 555px); opacity: .31; }
.journey[data-concept="rings"][data-active="3"] .life-rings { top: 50%; left: 89%; width: min(36vw, 475px); opacity: .3; }
.journey[data-concept="rings"][data-active="4"] .life-rings { top: 51%; left: 76%; width: min(40vw, 530px); opacity: .34; }
.journey[data-concept="rings"][data-active="5"] .life-rings { top: 50%; left: 12%; width: min(35vw, 460px); opacity: .28; }
.journey[data-concept="rings"][data-active="6"] .life-rings { top: 49%; left: 12%; width: min(31vw, 410px); opacity: .3; }
.journey[data-concept="rings"][data-active="7"] .life-rings { top: 52%; left: 87%; width: min(42vw, 550px); opacity: .42; }

.journey[data-concept="rings"][data-active="2"] .life-rings,
.journey[data-concept="rings"][data-active="3"] .life-rings,
.journey[data-concept="rings"][data-active="4"] .life-rings,
.journey[data-concept="rings"][data-active="6"] .life-rings,
.journey[data-concept="rings"][data-active="7"] .life-rings { --rings-ink: rgba(16,41,35,.8); --rings-line: rgba(16,41,35,.17); }

.journey.star-concept .rings-stack { display: none; }
.journey.star-concept .rings-core { opacity: 0 !important; visibility: hidden; }
.journey.star-concept .rings-title { opacity: .68; }
.journey.star-concept .life-rings { opacity: .88 !important; }
.journey.star-concept .regulus-field { inset: -10%; opacity: 1 !important; transform: scale(1.04); }
.journey.star-concept .regulus-star::before { inset: -5%; opacity: .96; filter: drop-shadow(0 0 15px rgba(159,212,241,.86)); }
.journey.star-concept .regulus-star::after { width: 15px; height: 15px; box-shadow: 0 0 10px #fff, 0 0 32px color-mix(in srgb, var(--regulus-accent) 96%, white), 0 0 80px color-mix(in srgb, var(--regulus-accent) 82%, transparent), 0 0 170px color-mix(in srgb, var(--regulus-accent) 55%, transparent), 0 0 260px color-mix(in srgb, var(--regulus-secondary) 18%, transparent); }
.journey.star-concept .rings-aura { inset: 3%; opacity: .8; background: radial-gradient(circle at 50% 50%, rgba(159,212,241,.24), rgba(255,107,97,.09) 28%, transparent 62%); filter: blur(34px); }
.journey.star-concept .ring-detail { background: rgba(6,25,23,.72); color: #fbfaf6; border-color: rgba(251,250,246,.26); box-shadow: 0 17px 55px rgba(0,0,0,.18); }
.journey.star-concept[data-active="1"] .life-rings { opacity: .22 !important; }
.journey.star-concept[data-active="2"] .life-rings,
.journey.star-concept[data-active="3"] .life-rings,
.journey.star-concept[data-active="4"] .life-rings,
.journey.star-concept[data-active="5"] .life-rings,
.journey.star-concept[data-active="6"] .life-rings { opacity: .42 !important; }
.journey.star-concept[data-active="7"] .life-rings { opacity: .52 !important; }
.journey.star-concept[data-active="7"] .regulus-field { transform: scale(.9); }
.journey.star-concept[data-active="7"] .rings-answer { box-shadow: 0 25px 75px rgba(16,41,35,.22), 0 0 95px rgba(159,212,241,.38); }
.journey.star-concept[data-active="2"] .regulus-field { --regulus-accent: #ff8177; --regulus-secondary: #9fd4f1; }
.journey.star-concept[data-active="3"] .regulus-field { --regulus-accent: #75bee5; --regulus-secondary: #ff8d7f; }
.journey.star-concept[data-active="4"] .regulus-field { --regulus-accent: #69d49a; --regulus-secondary: #9fd4f1; }
.journey.star-concept[data-active="5"] .regulus-field { --regulus-accent: #bca9ff; --regulus-secondary: #ff8d7f; }
.journey.star-concept[data-active="6"] .regulus-field { --regulus-accent: #f3c95b; --regulus-secondary: #ff8177; }
.journey.star-concept[data-active="6"] .regulus-star::after { animation: regulus-alert-pulse 1.45s ease-out infinite; }
.journey.star-concept[data-active="7"] .regulus-field { --regulus-accent: #9fd4f1; --regulus-secondary: #bca9ff; }
.journey.star-concept[data-active="7"] .regulus-corona { opacity: .95; transform: translate(-50%, -50%) scale(1.18); }
.journey.star-concept[data-active="7"] .regulus-spectrum { opacity: .72; width: 76%; }

.journey-nav {
  position: absolute;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 21px 28px;
  color: currentColor;
}

.journey-logo {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  color: currentColor;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.055em;
  text-decoration: none;
}

.journey-logo-mark {
  position: relative;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.journey-logo-mark::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 12px;
  content: "";
  border: 1px solid currentColor;
  border-radius: 6px;
  transform: translate(-50%, -58%);
}

.journey-logo-mark::after {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 11px;
  height: 5px;
  content: "";
  border-bottom: 1px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.journey-nav-links { display: flex; gap: 27px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.journey-nav-links a { color: currentColor; opacity: .68; text-decoration: none; transition: opacity .2s ease; }
.journey-nav-links a:hover { opacity: 1; }

.journey-nav-cta {
  justify-self: end;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid currentColor;
  color: currentColor;
  text-decoration: none;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}

.journey-nav-cta:hover { color: var(--night); background: var(--white); }
.journey[data-active="2"] .journey-nav-cta:hover,
.journey[data-active="3"] .journey-nav-cta:hover,
.journey[data-active="4"] .journey-nav-cta:hover,
.journey[data-active="6"] .journey-nav-cta:hover,
.journey[data-active="7"] .journey-nav-cta:hover { color: var(--white); background: var(--night); }

.journey-stage { position: absolute; z-index: 10; inset: 64px 0 62px; }

.journey-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
}

.journey-scene:first-child { opacity: 1; visibility: visible; pointer-events: auto; }
.journey-scene[aria-hidden="false"] .scene-frame { animation: scene-focus .38s var(--ease) both; }

.scene-frame {
  position: relative;
  width: min(1440px, calc(100% - 56px));
  height: 100%;
  margin: 0 auto;
}

.scene-frame h1,
.scene-frame h2 {
  margin: 17px 0 0;
  color: currentColor;
  font-size: clamp(63px, 8.8vw, 128px);
  font-weight: 500;
  letter-spacing: -.072em;
  line-height: .82;
  text-transform: uppercase;
}

.scene-frame h1 em,
.scene-frame h2 em { color: var(--coral); font-style: normal; }

.intro-frame { display: flex; flex-direction: column; justify-content: center; padding-bottom: 3%; }
.intro-frame h1 { position: relative; z-index: 2; width: 90%; }
.intro-copy { width: min(530px, 45%); margin: 25px 0 0; font-size: 18px; letter-spacing: -.026em; line-height: 1.3; }
.store-actions { display: flex; gap: 8px; margin-top: 25px; }

.store-action {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid var(--white);
  color: var(--night);
  background: var(--white);
  text-decoration: none;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}

.store-action.outline { color: var(--white); background: transparent; }
.store-action:hover { color: var(--white); background: transparent; }
.store-action.outline:hover { color: var(--night); background: var(--white); }
.intro-trust { position: absolute; right: 0; bottom: 1%; margin: 0; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }

.split-frame { display: grid; grid-template-columns: .86fr 1.14fr; gap: 60px; align-items: center; }
.scene-heading { position: relative; z-index: 2; }
.scene-heading h2 { font-size: clamp(58px, 7.7vw, 110px); }
.scene-heading > p { max-width: 420px; margin: 23px 0 0; font-size: 17px; letter-spacing: -.024em; line-height: 1.35; }

.voice-moment { position: relative; z-index: 2; align-self: center; padding: 28px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.voice-moment > p { margin: 0; font-size: clamp(25px, 3.15vw, 45px); letter-spacing: -.04em; line-height: 1.06; }
.voice-wave { display: flex; height: 44px; align-items: center; gap: 5px; margin-top: 20px; }
.voice-wave i { width: 2px; height: var(--wave-height, 14px); background: currentColor; animation: voice-wave 1s ease-in-out infinite alternate; }
.voice-wave i:nth-child(1) { --wave-height: 12px; }
.voice-wave i:nth-child(2) { --wave-height: 29px; animation-delay: -.2s; }
.voice-wave i:nth-child(3) { --wave-height: 18px; animation-delay: -.4s; }
.voice-wave i:nth-child(4) { --wave-height: 42px; background: var(--coral); animation-delay: -.6s; }
.voice-wave i:nth-child(5) { --wave-height: 26px; animation-delay: -.3s; }
.voice-wave i:nth-child(6) { --wave-height: 37px; animation-delay: -.5s; }
.voice-wave i:nth-child(7) { --wave-height: 20px; animation-delay: -.1s; }
.voice-wave i:nth-child(8) { --wave-height: 31px; background: var(--coral); animation-delay: -.45s; }
.voice-wave i:nth-child(9) { --wave-height: 10px; animation-delay: -.25s; }

.event-output { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-light); }
.event-output > div { min-height: 92px; padding: 16px 18px 11px 0; border-right: 1px solid var(--line-light); }
.event-output > div + div { padding-left: 18px; }
.event-output > div:last-child { border-right: 0; }
.event-output span,
.event-output small { display: block; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.event-output span { color: var(--coral); }
.event-output strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; letter-spacing: -.025em; }
.event-output small { margin-top: 5px; opacity: .55; }

.organize-frame { padding-top: 3%; }
.organize-frame h2 { position: relative; z-index: 2; width: 82%; font-size: clamp(58px, 8vw, 116px); }
.organize-source { position: absolute; top: 51%; left: 0; width: min(560px, 48%); margin: 0; padding: 18px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); font-size: 20px; letter-spacing: -.028em; line-height: 1.35; }
.scene-organize .event-output { border-color: var(--line-dark); }
.scene-organize .event-output > div { border-color: var(--line-dark); }

.work-frame { padding-top: 3%; }
.work-frame h2 { width: 78%; font-size: clamp(58px, 8vw, 116px); }
.work-quote { position: absolute; z-index: 2; top: 8%; right: 0; width: 30%; margin: 0; font-size: 19px; letter-spacing: -.027em; line-height: 1.25; }
.work-ledger { position: absolute; right: 0; bottom: 1%; left: 0; border-top: 1px solid var(--line-dark); }
.work-ledger > div { display: grid; grid-template-columns: 145px 1fr auto; gap: 20px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line-dark); }
.work-ledger span,
.work-ledger small { font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.work-ledger span { color: #b84642; }
.work-ledger strong { font-size: 19px; font-weight: 500; letter-spacing: -.027em; }
.work-ledger small { opacity: .57; }

.wellness-frame { display: grid; grid-template-columns: .88fr 1.12fr; gap: 40px; align-items: center; }
.progress-rings { position: relative; height: 73%; }
.progress-ring {
  --ring-progress: 0%;
  position: absolute;
  display: grid;
  width: var(--ring-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--ring-progress), rgba(16,41,35,.1) 0);
  transition: --ring-progress 1.2s var(--ease);
}

.journey[data-active="4"] .progress-ring { --ring-progress: var(--ring-value); }
.progress-ring::after { position: absolute; inset: 10px; content: ""; border-radius: 50%; background: #e4f2e5; }
.progress-ring span { position: relative; z-index: 1; text-align: center; }
.progress-ring strong { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.04em; }
.progress-ring small { display: block; margin-top: 3px; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.progress-ring.calories { top: 1%; left: 23%; --ring-size: 138px; --ring-value: 71%; --ring-color: var(--coral); }
.progress-ring.workout { top: 27%; right: 3%; --ring-size: 118px; --ring-value: 84%; --ring-color: #3d9fc7; }
.progress-ring.cycling { bottom: 1%; left: 14%; --ring-size: 148px; --ring-value: 62%; --ring-color: #4bad7b; }
.progress-ring.protein { right: 20%; bottom: 0; --ring-size: 96px; --ring-value: 67%; --ring-color: #d89f38; }
.wellness-voice { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 16px; letter-spacing: -.02em; }

.journal-frame { padding-top: 3%; }
.journal-frame h2 { width: 80%; font-size: clamp(58px, 8vw, 116px); }
.journal-frame blockquote { position: absolute; right: 0; bottom: 13%; width: 67%; margin: 0; font-size: clamp(23px, 3.05vw, 43px); letter-spacing: -.04em; line-height: 1.07; }
.journal-context { position: absolute; bottom: 2%; left: 0; display: flex; flex-wrap: wrap; gap: 7px; max-width: 68%; }
.journal-context span { padding: 7px 9px; border: 1px solid var(--line-light); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.journal-note { position: absolute; right: 0; bottom: 1%; width: 25%; margin: 0; font-size: 14px; line-height: 1.28; opacity: .68; }

.proactive-frame { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: center; }
.proactive-frame .scene-heading h2 { font-size: clamp(57px, 7.4vw, 106px); }
.proactive-frame .scene-heading h2 em { color: #b74642; }
.briefing-list { position: relative; z-index: 2; }
.briefing-list > div { display: grid; grid-template-columns: 64px 1fr; gap: 17px; min-height: 65px; align-items: center; border-top: 1px solid var(--line-dark); }
.briefing-list > div:last-child { border-bottom: 1px solid var(--line-dark); }
.briefing-list time,
.briefing-list small { font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.briefing-list strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
.briefing-list small { display: block; margin-top: 3px; opacity: .57; }
.notification-pulse { position: absolute; right: 0; bottom: 1%; display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; width: min(470px, 48%); align-items: center; padding: 12px; color: var(--white); background: var(--night); box-shadow: 0 18px 42px rgba(16,41,35,.18); }
.notification-pulse > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--night); background: var(--coral); font-family: "DM Mono", monospace; }
.notification-pulse p { margin: 0; }
.notification-pulse strong { display: block; font-size: 11px; font-weight: 500; }
.notification-pulse small { display: block; margin-top: 3px; color: rgba(251,250,246,.58); font-family: "DM Mono", monospace; font-size: 7px; text-transform: uppercase; }
.notification-pulse time { font-family: "DM Mono", monospace; font-size: 7px; opacity: .55; }

.recall-frame { padding-top: 4%; }
.recall-label { margin: 8% 0 0; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.recall-frame h2 { position: relative; z-index: 2; width: 88%; margin-top: 14px; font-size: clamp(49px, 7vw, 100px); line-height: .88; text-transform: none; }
.recall-answer { position: absolute; right: 0; bottom: 14%; width: 67%; margin: 0; font-size: clamp(22px, 2.8vw, 40px); letter-spacing: -.04em; line-height: 1.06; }
.recall-answer mark { padding: 0; color: inherit; background: transparent; border-bottom: 3px solid var(--coral); }
.recall-sources { position: absolute; bottom: 1%; left: 0; display: flex; max-width: 52%; flex-wrap: wrap; gap: 7px; }
.recall-sources span { padding: 7px 9px; border: 1px solid var(--line-dark); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.recall-actions { position: absolute; right: 0; bottom: 1%; display: flex; gap: 7px; }
.recall-actions a { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; padding: 0 13px; border: 1px solid var(--ink); color: var(--white); background: var(--ink); text-decoration: none; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.recall-actions a + a { color: var(--ink); background: transparent; }

.journey-status {
  position: absolute;
  z-index: 90;
  right: 28px;
  bottom: 17px;
  left: 28px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 430px) minmax(80px, 1fr);
  gap: 20px;
  align-items: center;
  color: currentColor;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .06em;
}

.journey-chapter { display: grid; width: max-content; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.journey-chapter > span { grid-row: 1 / span 2; }
.journey-chapter b { font-weight: 500; }
.journey-chapter strong { font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; }
.journey-chapter small { opacity: .54; font-size: 7px; letter-spacing: .045em; text-transform: uppercase; }
.status-divider { margin: 0 5px; opacity: .4; }
.journey-progress { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.journey-progress button { position: relative; z-index: 2; height: 12px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.journey-progress button::before { position: absolute; top: 5px; right: 0; left: 0; height: 1px; content: ""; background: currentColor; opacity: .22; }
.journey-progress button[aria-current="step"]::before { opacity: .8; }
.journey-progress i { position: absolute; z-index: 3; top: 4px; left: 0; width: 0; height: 3px; background: var(--coral); pointer-events: none; }
.journey-arrows { justify-self: end; display: flex; gap: 6px; }
.journey-arrows button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid currentColor; border-radius: 0; color: currentColor; background: transparent; cursor: pointer; transition: color .2s ease, background .2s ease, opacity .2s ease; }
.journey-arrows button:hover:not(:disabled) { color: var(--night); background: var(--white); }
.journey-arrows button:disabled { opacity: .2; cursor: default; }

.product-story { padding: 135px 0; color: var(--white); background: var(--night); }
.product-story-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 70px; align-items: center; }
.product-copy h2,
.ways-heading h2,
.difference h2,
.privacy-section h2,
.pricing-heading h2,
.faq-section h2,
.download-section h2 { margin: 18px 0 0; font-size: clamp(46px, 6vw, 86px); font-weight: 500; letter-spacing: -.065em; line-height: .91; text-transform: uppercase; }
.product-copy h2 em,
.ways-heading h2 em,
.difference h2 em,
.privacy-section h2 em,
.pricing-heading h2 em,
.faq-section h2 em,
.download-section h2 em { color: var(--coral); font-style: normal; }
.product-copy > p { margin: 24px 0 0; color: rgba(251,250,246,.67); font-size: 17px; line-height: 1.55; }
.product-copy ul { display: grid; gap: 11px; margin: 27px 0 0; padding: 0; list-style: none; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.product-copy li { display: flex; align-items: center; gap: 9px; }
.product-copy li::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--mint); }

.product-video { position: relative; margin: 0; }
.product-video video { width: 100%; border: 1px solid rgba(251,250,246,.2); background: #11211e; }
.product-video figcaption { margin-top: 11px; color: rgba(251,250,246,.55); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.video-toggle { position: absolute; top: 13px; right: 13px; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(251,250,246,.5); color: var(--white); background: rgba(6,25,23,.72); cursor: pointer; backdrop-filter: blur(8px); }

.ways { padding: 140px 0; background: var(--paper); }
.ways-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 70px; align-items: end; padding-bottom: 60px; }
.ways-heading h2 { grid-column: 1; }
.ways-heading > p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.ways-list { border-top: 1px solid var(--line-dark); }
.ways-list a { display: grid; grid-template-columns: 70px .55fr 1fr auto; gap: 25px; align-items: center; min-height: 114px; border-bottom: 1px solid var(--line-dark); text-decoration: none; transition: padding .35s var(--ease), color .25s ease; }
.ways-list a:hover { padding-right: 12px; padding-left: 12px; color: #b74843; }
.ways-list span,
.ways-list b { font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.ways-list strong { font-size: 24px; font-weight: 500; letter-spacing: -.035em; }
.ways-list p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }

.difference { padding: 140px 0; color: var(--white); background: var(--navy); }
.difference-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.difference-list { border-top: 1px solid var(--line-light); }
.difference-list > div { display: grid; grid-template-columns: 55px 130px 1fr; gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line-light); }
.difference-list span { font-family: "DM Mono", monospace; font-size: 9px; }
.difference-list strong { color: var(--mint); font-size: 19px; font-weight: 500; }
.difference-list p { margin: 0; color: rgba(251,250,246,.64); font-size: 15px; line-height: 1.5; }

.privacy-section { padding: 135px 0; background: var(--cloud); }
.privacy-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: end; }
.privacy-copy > p { margin: 0; font-size: 21px; letter-spacing: -.028em; line-height: 1.38; }
.privacy-points { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.privacy-points span { padding: 8px 10px; border: 1px solid var(--line-dark); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.privacy-copy > a { display: inline-block; margin-top: 25px; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; text-underline-offset: 5px; }

.pricing-section { padding: 140px 0; background: var(--paper); }
.pricing-heading { max-width: 780px; }
.pricing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 60px; }
.pricing-options article { padding: 34px; border: 1px solid var(--line-dark); }
.pricing-options article.featured-plan { color: var(--white); background: var(--night); border-color: var(--night); }
.pricing-options article > div { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.pricing-options article > div > span { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pricing-options article > div > strong { font-size: 54px; font-weight: 500; letter-spacing: -.06em; }
.pricing-options article > div > small { grid-column: 2; text-align: right; opacity: .55; }
.pricing-options article > p { max-width: 480px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.pricing-options .featured-plan > p { color: rgba(251,250,246,.65); }
.pricing-options ul { display: grid; gap: 10px; margin: 27px 0 0; padding: 0; list-style: none; font-size: 14px; }
.pricing-options li::before { margin-right: 9px; color: var(--coral); content: "✓"; }
.pricing-options article > a { display: inline-flex; min-height: 46px; align-items: center; margin-top: 30px; padding: 0 14px; border: 1px solid currentColor; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }

.faq-section { padding: 140px 0; background: #ece8df; }
.faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; }
.faq-list { border-top: 1px solid var(--line-dark); }
.faq-list article { border-bottom: 1px solid var(--line-dark); }
.faq-list button { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 23px 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.faq-list button span { font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.faq-list button i { font-family: "DM Mono", monospace; font-style: normal; }
.faq-list article > div { padding: 0 50px 24px 0; }
.faq-list article > div[hidden] { display: none; }
.faq-list p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.download-section { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; color: var(--ink); background: var(--coral); text-align: center; }
.download-section::before { position: absolute; inset: 0; content: ""; opacity: .16; background-image: linear-gradient(90deg, transparent calc(8.333% - .5px), currentColor calc(8.333% - .5px), currentColor calc(8.333% + .5px), transparent calc(8.333% + .5px)); background-size: 8.333% 100%; }
.download-content { position: relative; z-index: 2; width: min(1100px, calc(100% - 40px)); }
.download-section h2 { font-size: clamp(68px, 10vw, 144px); line-height: .8; }
.download-section h2 em { color: var(--white); }
.download-section p { margin: 25px 0 0; font-size: 18px; letter-spacing: -.025em; }
.download-actions { display: flex; justify-content: center; gap: 8px; margin-top: 27px; }
.download-actions a { display: inline-flex; min-height: 53px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid var(--ink); color: var(--white); background: var(--ink); text-decoration: none; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; transition: color .25s ease, background .25s ease; }
.download-actions a + a { color: var(--ink); background: transparent; }
.download-actions a:hover { color: var(--ink); background: var(--white); }
.download-section small { display: block; margin-top: 19px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.download-orbit { position: absolute; top: 50%; left: 50%; width: min(76vw, 920px); aspect-ratio: 1; opacity: .19; transform: translate(-50%, -50%) rotate(18deg); }
.download-orbit i { position: absolute; inset: var(--download-inset); border: 1px solid var(--ink); border-radius: var(--download-radius); transform: rotate(var(--download-rotate)); }
.download-orbit i:nth-child(1) { --download-inset: 3%; --download-radius: 45% 55% 61% 39% / 52% 39% 61% 48%; --download-rotate: 8deg; }
.download-orbit i:nth-child(2) { --download-inset: 13%; --download-radius: 59% 41% 45% 55% / 37% 56% 44% 63%; --download-rotate: -14deg; }
.download-orbit i:nth-child(3) { --download-inset: 25%; --download-radius: 40% 60% 54% 46% / 62% 41% 59% 38%; --download-rotate: 23deg; }
.download-orbit span { position: absolute; inset: 36%; border-radius: 44% 56% 64% 36% / 49% 37% 63% 51%; background: var(--ink); }

.site-footer { padding: 70px 32px 25px; color: var(--white); background: var(--night); }
.footer-main { display: grid; grid-template-columns: .5fr 1fr 1fr; gap: 50px; align-items: start; padding-bottom: 50px; }
.footer-logo { font-size: 30px; font-weight: 500; letter-spacing: -.06em; text-decoration: none; }
.footer-main > p { max-width: 430px; margin: 0; color: rgba(251,250,246,.62); font-size: 16px; line-height: 1.5; }
.footer-main > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 25px; }
.footer-main > div a,
.footer-discovery a { color: rgba(251,250,246,.66); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .05em; text-underline-offset: 4px; text-transform: uppercase; }
.footer-discovery { display: flex; flex-wrap: wrap; gap: 11px 22px; padding: 25px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 23px; color: rgba(251,250,246,.45); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }

@keyframes flow-core-breathe {
  from { border-radius: 47% 53% 58% 42% / 54% 45% 55% 46%; transform: translate(-50%, -50%) rotate(-2deg) scale(.97); }
  to { border-radius: 56% 44% 47% 53% / 43% 57% 43% 57%; transform: translate(-50%, -50%) rotate(3deg) scale(1.03); }
}

@keyframes flow-orbit-drift {
  from { border-radius: 50%; transform: rotate(-4deg) scale(.985); }
  to { border-radius: 44% 56% 52% 48% / 53% 45% 55% 47%; transform: rotate(6deg) scale(1.015); }
}

@keyframes memory-pulse {
  0%, 100% { opacity: .34; transform: scale(.86); }
  50% { opacity: .78; transform: scale(1.08); }
}

@keyframes flow-wave {
  from { height: 3px; opacity: .4; }
  to { height: var(--wave-height); opacity: 1; }
}

@keyframes flow-node-pulse {
  0% { opacity: .75; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes ribbon-seed-breathe {
  from { border-radius: 48% 52% 57% 43% / 43% 56% 44% 57%; transform: translate(-50%, -50%) rotate(-3deg) scale(.97); }
  to { border-radius: 56% 44% 46% 54% / 54% 43% 57% 46%; transform: translate(-50%, -50%) rotate(3deg) scale(1.03); }
}

@keyframes ribbon-glow-breathe {
  from { opacity: .32; transform: rotate(-3deg) scale(.95); }
  to { opacity: .56; transform: rotate(4deg) scale(1.04); }
}

@keyframes ribbon-reminder-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,201,91,.2), 0 17px 45px rgba(16,41,35,.15); }
  50% { box-shadow: 0 0 0 13px rgba(243,201,91,0), 0 22px 55px rgba(16,41,35,.2); }
}

@keyframes rings-core-float {
  from { transform: translate(-50%, -50%) rotate(-3deg) scale(.97); }
  to { transform: translate(-50%, -50%) rotate(3deg) scale(1.03); }
}

@keyframes rings-aura-breathe {
  from { opacity: .35; transform: scale(.92); }
  to { opacity: .62; transform: scale(1.07); }
}

@keyframes ring-detail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,201,91,.2), 0 15px 40px rgba(16,41,35,.12); }
  50% { box-shadow: 0 0 0 12px rgba(243,201,91,0), 0 20px 50px rgba(16,41,35,.18); }
}

@keyframes regulus-rays {
  from { opacity: .48; transform: rotate(-1deg) scale(.94); }
  to { opacity: .9; transform: rotate(1deg) scale(1.04); }
}

@keyframes regulus-pulse {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(.82); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes regulus-corona-drift {
  from { border-radius: 44% 56% 63% 37% / 52% 39% 61% 48%; transform: translate(-50%, -50%) rotate(-5deg) scale(.91); }
  to { border-radius: 59% 41% 46% 54% / 39% 58% 42% 61%; transform: translate(-50%, -50%) rotate(7deg) scale(1.09); }
}

@keyframes regulus-spectrum-shift {
  from { opacity: .25; transform: translate(-50%, -50%) rotate(-5deg) scaleX(.88); }
  to { opacity: .54; transform: translate(-50%, -50%) rotate(-3deg) scaleX(1.08); }
}

@keyframes regulus-dust-drift {
  from { opacity: .2; transform: translate(-8px, 7px) scale(.7); }
  to { opacity: .82; transform: translate(9px, -8px) scale(1.15); }
}

@keyframes regulus-alert-pulse {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: .65; transform: translate(-50%, -50%) scale(1.85); }
}

@keyframes voice-wave {
  from { transform: scaleY(.18); opacity: .35; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes scene-focus {
  from { opacity: .35; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1040px) {
  .journey-nav-links { display: none; }
  .journey-nav { grid-template-columns: 1fr 1fr; }
  .scene-frame h1,
  .scene-frame h2 { font-size: clamp(58px, 9.5vw, 98px); }
  .split-frame,
  .wellness-frame,
  .proactive-frame { gap: 35px; }
  .product-story-grid,
  .difference-grid,
  .privacy-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .product-copy { max-width: 760px; }
  .ways-heading { grid-template-columns: 1fr; gap: 22px; }
  .ways-heading > p { grid-column: 1; grid-row: auto; max-width: 680px; }
  .ways-list a { grid-template-columns: 55px .7fr 1fr; }
  .ways-list b { display: none; }
}

@media (max-width: 760px) {
  .section-shell { width: min(100% - 32px, 1380px); }
  .section-label,
  .scene-kicker { font-size: 8px; }
  .journey { height: 730svh; }
  .journey-world { min-height: 610px; }
  .journey-grid { background-size: 25% 100%; }
  .journey-nav { padding: 16px; }
  .journey-logo { font-size: 17px; }
  .journey-nav-cta { min-height: 36px; padding: 0 10px; font-size: 8px; }
  .journey-stage { inset: 55px 0 88px; }
  .scene-frame { width: calc(100% - 30px); }
  .scene-frame h1,
  .scene-frame h2 { font-size: clamp(45px, 14.4vw, 72px); line-height: .85; }
  .intro-frame { justify-content: flex-start; padding-top: 9%; }
  .intro-frame h1 { width: 100%; }
  .intro-copy { position: absolute; bottom: 20%; width: 92%; margin: 0; font-size: 14px; }
  .store-actions { position: absolute; right: 0; bottom: 8%; left: 0; margin: 0; }
  .store-action { min-height: 43px; padding: 0 11px; font-size: 8px; }
  .intro-trust { display: none; }
  .chela-flow { top: 53%; left: 72%; width: min(90vw, 360px); opacity: .58; }
  .chela-flow .flow-caption,
  .chela-flow .flow-node span { display: none; }
  .chela-flow .flow-node > i { width: 9px; height: 9px; border-width: 1px; }
  .chela-flow .flow-answer { width: 58%; padding: 10px; }
  .journey[data-active="1"] .chela-flow { top: 52%; left: 55%; width: min(104vw, 420px); opacity: .13; }
  .journey[data-active="2"] .chela-flow { top: 59%; left: 84%; width: min(83vw, 330px); opacity: .24; }
  .journey[data-active="3"] .chela-flow { top: 59%; left: 95%; width: min(76vw, 300px); opacity: .22; }
  .journey[data-active="4"] .chela-flow { top: 60%; left: 80%; width: min(78vw, 310px); opacity: .24; }
  .journey[data-active="5"] .chela-flow { top: 56%; left: 4%; width: min(72vw, 285px); opacity: .2; }
  .journey[data-active="6"] .chela-flow { top: 58%; left: 1%; width: min(66vw, 260px); opacity: .2; }
  .journey[data-active="7"] .chela-flow { top: 58%; left: 95%; width: min(76vw, 300px); opacity: .3; }
  .journey[data-concept="ribbon"] .memory-ribbon { top: 54%; left: 73%; width: min(88vw, 350px); opacity: .54; }
  .memory-ribbon .ribbon-title,
  .memory-ribbon .ribbon-event strong { display: none; }
  .memory-ribbon .ribbon-event { min-width: 0; width: 44px; height: 27px; padding: 6px; backdrop-filter: none; }
  .memory-ribbon .ribbon-event time { top: -10px; font-size: 5px; }
  .memory-ribbon .ribbon-event span { font-size: 5px; }
  .memory-ribbon .ribbon-recall { width: 68%; padding: 12px; }
  .memory-ribbon .ribbon-recall strong { font-size: 12px; }
  .journey[data-concept="ribbon"][data-active="1"] .memory-ribbon { top: 52%; left: 55%; width: min(102vw, 410px); opacity: .12; }
  .journey[data-concept="ribbon"][data-active="2"] .memory-ribbon { top: 58%; left: 84%; width: min(82vw, 328px); opacity: .2; }
  .journey[data-concept="ribbon"][data-active="3"] .memory-ribbon { top: 58%; left: 95%; width: min(74vw, 295px); opacity: .19; }
  .journey[data-concept="ribbon"][data-active="4"] .memory-ribbon { top: 59%; left: 80%; width: min(78vw, 310px); opacity: .21; }
  .journey[data-concept="ribbon"][data-active="5"] .memory-ribbon { top: 56%; left: 4%; width: min(70vw, 280px); opacity: .18; }
  .journey[data-concept="ribbon"][data-active="6"] .memory-ribbon { top: 57%; left: 1%; width: min(65vw, 258px); opacity: .2; }
  .journey[data-concept="ribbon"][data-active="7"] .memory-ribbon { top: 58%; left: 94%; width: min(76vw, 300px); opacity: .28; }
  .journey[data-concept="rings"] .life-rings { top: 55%; left: 73%; width: min(88vw, 350px); opacity: .56; }
  .life-rings .rings-title,
  .life-rings .ring-detail { display: none; }
  .life-rings .regulus-field { inset: -12%; opacity: .5; }
  .life-rings .regulus-field > span { display: none; }
  .life-rings .rings-answer { width: 68%; padding: 12px; }
  .life-rings .rings-answer strong { font-size: 12px; }
  .life-rings .rings-core { width: 31%; }
  .life-rings .rings-core strong { font-size: 10px; }
  .life-rings .rings-core small { display: none; }
  .journey[data-concept="rings"][data-active="1"] .life-rings { top: 52%; left: 55%; width: min(102vw, 410px); opacity: .11; }
  .journey[data-concept="rings"][data-active="2"] .life-rings { top: 58%; left: 84%; width: min(82vw, 328px); opacity: .21; }
  .journey[data-concept="rings"][data-active="3"] .life-rings { top: 58%; left: 95%; width: min(74vw, 295px); opacity: .2; }
  .journey[data-concept="rings"][data-active="4"] .life-rings { top: 59%; left: 80%; width: min(78vw, 310px); opacity: .23; }
  .journey[data-concept="rings"][data-active="5"] .life-rings { top: 56%; left: 4%; width: min(70vw, 280px); opacity: .19; }
  .journey[data-concept="rings"][data-active="6"] .life-rings { top: 57%; left: 1%; width: min(65vw, 258px); opacity: .21; }
  .journey[data-concept="rings"][data-active="7"] .life-rings { top: 58%; left: 94%; width: min(76vw, 300px); opacity: .3; }
  .journey.star-concept .life-rings { opacity: .72 !important; }
  .journey.star-concept .regulus-field { inset: -24%; opacity: 1 !important; }
  .journey.star-concept .regulus-star::after { width: 12px; height: 12px; }
  .journey.star-concept .rings-aura { inset: -2%; }
  .journey.star-concept .regulus-corona { width: 58%; filter: blur(18px); }
  .journey.star-concept .regulus-spectrum { width: 72%; opacity: .34; }
  .journey.star-concept .regulus-dust i:nth-child(n+6) { display: none; }
  .journey.star-concept[data-active="1"] .life-rings { opacity: .14 !important; }
  .journey.star-concept[data-active="2"] .life-rings,
  .journey.star-concept[data-active="3"] .life-rings,
  .journey.star-concept[data-active="4"] .life-rings,
  .journey.star-concept[data-active="5"] .life-rings,
  .journey.star-concept[data-active="6"] .life-rings { opacity: .27 !important; }
  .journey.star-concept[data-active="7"] .life-rings { opacity: .36 !important; }
  .split-frame,
  .wellness-frame,
  .proactive-frame { display: block; }
  .scene-heading { padding-top: 5%; }
  .scene-heading > p { margin-top: 15px; font-size: 13px; }
  .voice-moment { position: absolute; right: 0; bottom: 22%; left: 0; padding: 17px 0; }
  .voice-moment > p { font-size: clamp(20px, 6.2vw, 29px); }
  .voice-wave { height: 29px; margin-top: 10px; }
  .event-output { grid-template-columns: repeat(2, 1fr); }
  .event-output > div { min-height: 62px; padding: 8px 9px 7px 0; }
  .event-output > div:nth-child(2) { border-right: 0; }
  .event-output > div:nth-child(n+3) { border-top: 1px solid var(--line-light); }
  .event-output > div + div { padding-left: 9px; }
  .event-output strong { margin-top: 4px; font-size: 11px; }
  .event-output span,
  .event-output small { font-size: 6px; }
  .organize-frame { padding-top: 5%; }
  .organize-frame h2 { width: 100%; }
  .organize-source { top: 48%; width: 92%; padding: 13px 0; font-size: 15px; }
  .work-frame { padding-top: 5%; }
  .work-frame h2 { width: 100%; }
  .work-quote { top: 36%; right: 0; width: 90%; font-size: 15px; }
  .work-ledger > div { grid-template-columns: 73px 1fr; gap: 8px; min-height: 52px; }
  .work-ledger small { display: none; }
  .work-ledger span { font-size: 7px; }
  .work-ledger strong { font-size: 13px; }
  .progress-rings { position: absolute; top: 35%; right: 0; left: 0; height: 44%; }
  .progress-ring.calories { top: 0; left: 3%; --ring-size: 96px; }
  .progress-ring.workout { top: 2%; right: 3%; --ring-size: 84px; }
  .progress-ring.cycling { bottom: 0; left: 24%; --ring-size: 104px; }
  .progress-ring.protein { right: 14%; bottom: 3%; --ring-size: 75px; }
  .progress-ring::after { inset: 7px; }
  .progress-ring strong { font-size: 13px; }
  .progress-ring small { font-size: 6px; }
  .wellness-voice { font-size: 11px; }
  .journal-frame { padding-top: 5%; }
  .journal-frame h2 { width: 100%; }
  .journal-frame blockquote { right: 0; bottom: 25%; width: 92%; font-size: clamp(19px, 5.8vw, 27px); }
  .journal-context { bottom: 5%; max-width: 100%; }
  .journal-context span { padding: 5px 7px; font-size: 6px; }
  .journal-note { display: none; }
  .proactive-frame .scene-heading h2 { font-size: clamp(43px, 13.5vw, 66px); }
  .briefing-list { position: absolute; right: 0; bottom: 14%; left: 9%; }
  .briefing-list > div { grid-template-columns: 47px 1fr; min-height: 50px; gap: 8px; }
  .briefing-list time { font-size: 7px; }
  .briefing-list strong { font-size: 12px; }
  .briefing-list small { font-size: 6px; }
  .notification-pulse { right: 0; bottom: 0; width: 92%; grid-template-columns: 31px 1fr auto; padding: 8px; }
  .notification-pulse > span { width: 31px; height: 31px; }
  .recall-frame { padding-top: 5%; }
  .recall-label { margin-top: 14%; font-size: 8px; }
  .recall-frame h2 { width: 100%; font-size: clamp(38px, 12vw, 58px); }
  .recall-answer { bottom: 29%; width: 91%; font-size: clamp(18px, 5.4vw, 25px); }
  .recall-sources { bottom: 17%; max-width: 100%; flex-wrap: wrap; }
  .recall-sources span { padding: 5px 6px; font-size: 6px; }
  .recall-actions { right: 0; bottom: 1%; left: 0; }
  .recall-actions a { min-height: 39px; flex: 1; padding: 0 8px; font-size: 7px; }
  .journey-status { right: 15px; bottom: 10px; left: 15px; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; font-size: 7px; }
  .journey-chapter { grid-column: 1; grid-row: 1; gap: 1px 9px; }
  .journey-chapter strong { font-size: 8px; }
  .journey-chapter small { font-size: 6px; }
  .journey-progress { gap: 4px; }
  .journey-status .journey-progress { grid-column: 1 / -1; grid-row: 2; }
  .journey-progress i { display: none; }
  .journey-arrows { grid-column: 2; grid-row: 1; gap: 4px; }
  .journey-arrows button { width: 32px; height: 32px; }
  .product-story,
  .ways,
  .difference,
  .privacy-section,
  .pricing-section,
  .faq-section { padding: 90px 0; }
  .product-story-grid { gap: 45px; }
  .product-copy h2,
  .ways-heading h2,
  .difference h2,
  .privacy-section h2,
  .pricing-heading h2,
  .faq-section h2 { font-size: 45px; }
  .product-copy > p { font-size: 15px; }
  .ways-heading { padding-bottom: 35px; }
  .ways-heading > p { font-size: 15px; }
  .ways-list a { grid-template-columns: 35px 1fr; gap: 10px; padding: 18px 0; }
  .ways-list a > p { grid-column: 2; font-size: 13px; }
  .ways-list strong { font-size: 19px; }
  .difference-grid,
  .privacy-grid,
  .faq-grid { gap: 45px; }
  .difference-list > div { grid-template-columns: 35px 90px 1fr; gap: 8px; padding: 19px 0; }
  .difference-list strong { font-size: 15px; }
  .difference-list p { font-size: 12px; }
  .privacy-copy > p { font-size: 17px; }
  .pricing-options { grid-template-columns: 1fr; margin-top: 40px; }
  .pricing-options article { padding: 25px; }
  .faq-list button span { font-size: 16px; }
  .download-section h2 { font-size: clamp(55px, 17vw, 82px); }
  .download-section p { font-size: 15px; }
  .download-actions { flex-direction: column; max-width: 290px; margin-right: auto; margin-left: auto; }
  .site-footer { padding: 55px 16px 20px; }
  .footer-main { grid-template-columns: 1fr; gap: 25px; }
  .footer-bottom { gap: 20px; }
}

@media (max-width: 380px) {
  .journey-nav-cta { border: 0; padding: 0; }
  .scene-frame h1,
  .scene-frame h2 { font-size: 43px; }
  .store-action { padding: 0 8px; font-size: 7px; }
  .work-frame h2,
  .journal-frame h2 { font-size: 42px; }
  .recall-frame h2 { font-size: 36px; }
  .product-copy h2,
  .ways-heading h2,
  .difference h2,
  .privacy-section h2,
  .pricing-heading h2,
  .faq-section h2 { font-size: 40px; }
  .difference-list > div { grid-template-columns: 30px 75px 1fr; }
  .download-section h2 { font-size: 51px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .journey { height: auto; }
  .journey-world { position: relative; height: auto; min-height: 0; overflow: visible; color: var(--white); background: var(--night); }
  .journey-tones,
  .journey-grid,
  .journey-noise,
  .chela-flow,
  .memory-ribbon,
  .life-rings,
  .journey-status { display: none; }
  .journey-nav { position: sticky; color: var(--white); background: var(--night); }
  .journey-stage { position: relative; inset: auto; }
  .journey-scene { position: relative; min-height: 760px; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; filter: none !important; }
  .journey-scene:nth-child(even) { color: var(--ink); background: var(--paper); }
  .scene-frame { min-height: inherit; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}