:root {
  --vxbe-void: #080705;
  --vxbe-obsidian: #100d09;
  --vxbe-umber: #241910;
  --vxbe-bronze: #9b663c;
  --vxbe-copper: #c68a52;
  --vxbe-gold: #e6bb75;
  --vxbe-champagne: #f0d9ad;
  --vxbe-alabaster: #f6efe3;
  --vxbe-smoke: rgba(246, 239, 227, 0.72);
  --vxbe-faint: rgba(246, 239, 227, 0.62);
  --vxbe-warm-line: rgba(230, 187, 117, 0.2);
  --vxbe-warm-line-strong: rgba(240, 217, 173, 0.36);
  --vxbe-header-height: 76px;
  --anchor-offset: calc(var(--vxbe-header-height) + 32px);
  --scene-overlap: clamp(260px, 26vw, 440px);
  --scene-pointer-x: 50%;
  --scene-pointer-y: 42%;
}

html {
  background: var(--vxbe-void);
  color-scheme: dark;
  scroll-padding-top: var(--anchor-offset);
}

body {
  color: var(--vxbe-alabaster);
  background: var(--vxbe-void);
}

::selection {
  color: var(--vxbe-void);
  background: var(--vxbe-gold);
}

.world {
  display: none;
}

.page,
.vxbe-procession {
  background: var(--vxbe-void);
}

.scroll-meter {
  background: rgba(246, 239, 227, 0.06);
}

.scroll-meter::after {
  background: linear-gradient(90deg, #6b452d, var(--vxbe-copper), var(--vxbe-champagne));
  box-shadow: 0 0 14px rgba(230, 187, 117, 0.42);
}

.site-header {
  min-height: var(--vxbe-header-height);
}

.site-header.is-after-hero,
.site-header.is-after-hero.is-scrolled {
  border-bottom-color: rgba(230, 187, 117, 0.13);
  color: var(--vxbe-alabaster);
  background: rgba(8, 7, 5, 0.78);
  backdrop-filter: blur(20px);
}

.site-header.is-after-hero .site-nav {
  color: rgba(246, 239, 227, 0.64);
}

.site-header.is-after-hero .wordmark img {
  filter: invert(1) brightness(1.2) sepia(0.06);
}

.hero {
  padding: 0;
  background: var(--vxbe-void);
}

.hero-handoff {
  right: 0;
  bottom: -2px;
  left: 0;
  height: clamp(90px, 10vw, 150px);
  background: linear-gradient(180deg, transparent, rgba(8, 7, 5, 0.72) 66%, var(--vxbe-void));
  clip-path: none;
}

.procession-scene {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: var(--vxbe-alabaster);
  background: var(--vxbe-void);
  --scene-pointer-x: 50%;
  --scene-pointer-y: 42%;
}

.procession-scene::after {
  display: none;
}

.scene-art {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--scene-overlap));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--vxbe-void);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 48px, #000 calc(var(--scene-overlap) - 20px), #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 48px, #000 calc(var(--scene-overlap) - 20px), #000 100%);
}

.scene-art picture,
.scene-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene-art img {
  object-fit: cover;
  filter: saturate(0.68) contrast(1.08) brightness(0.62) sepia(0.06);
}

.scene-art::before,
.scene-art__atmosphere,
.scene-art__glow {
  position: absolute;
  content: "";
  pointer-events: none;
}

.scene-art::before {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.7) 0%, rgba(8, 7, 5, 0.18) 16%, rgba(8, 7, 5, 0.08) 66%, rgba(8, 7, 5, 0.44) 100%),
    linear-gradient(90deg, rgba(8, 7, 5, 0.76), transparent 46%, rgba(8, 7, 5, 0.34));
}

.scene-art__atmosphere {
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(240, 217, 173, 0.12), transparent 36%),
    linear-gradient(115deg, transparent 28%, rgba(230, 187, 117, 0.055) 49%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0.42;
}

.scene-art__glow {
  z-index: 3;
  inset: -28%;
  background: radial-gradient(circle at var(--scene-pointer-x) var(--scene-pointer-y), rgba(246, 225, 187, 0.21), rgba(198, 138, 82, 0.08) 12%, transparent 31%);
  mix-blend-mode: screen;
  opacity: 0.16;
  transform: translate3d(0, 0, 0);
  transition: opacity 900ms ease;
  animation: procession-light 15s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.procession-scene.is-scene-active .scene-art__glow {
  opacity: 0.52;
  animation-play-state: running;
}

.vxbe-procession.is-motion-paused .scene-art__glow {
  animation-play-state: paused;
}

.scene-body > :not(.scene-art),
.chapter > :not(.scene-art),
.final > :not(.scene-art) {
  position: relative;
  z-index: 2;
}

.scene-body--work {
  min-height: max(1160px, 132svh);
  padding: clamp(136px, 14vw, 210px) 0 clamp(150px, 16vw, 240px);
}

.chapter {
  min-height: max(1080px, 122svh);
  padding: clamp(150px, 15vw, 220px) 0 clamp(170px, 17vw, 250px);
}

.scene--memory {
  min-height: max(1240px, 138svh);
}

.scene--receipt {
  min-height: max(1180px, 128svh);
}

.scene-art--work img {
  object-position: 52% 56%;
  filter: saturate(0.7) contrast(1.1) brightness(0.56) sepia(0.08);
}

.scene-art--trust img {
  object-position: 50% 43%;
}

.scene-art--memory img {
  object-position: 53% 66%;
  filter: saturate(0.52) contrast(1.12) brightness(0.54) sepia(0.14);
}

.scene-art--reach img {
  object-position: 64% 62%;
  filter: saturate(0.56) contrast(1.08) brightness(0.53) sepia(0.12);
}

.scene-art--receipt img {
  object-position: 57% 68%;
  filter: saturate(0.58) contrast(1.12) brightness(0.48) sepia(0.12);
}

.scene-art--opening img {
  object-position: 50% 55%;
  filter: saturate(0.6) contrast(1.03) brightness(0.66) sepia(0.08);
}

.scene-art--trust::before {
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.68), rgba(8, 7, 5, 0.1) 22%, rgba(8, 7, 5, 0.26) 72%, rgba(8, 7, 5, 0.46)),
    linear-gradient(90deg, rgba(8, 7, 5, 0.82), rgba(8, 7, 5, 0.16) 54%, rgba(8, 7, 5, 0.58));
}

.scene-art--memory::before {
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.68), rgba(8, 7, 5, 0.18) 20%, rgba(8, 7, 5, 0.18) 66%, rgba(8, 7, 5, 0.46)),
    linear-gradient(90deg, rgba(8, 7, 5, 0.76), rgba(8, 7, 5, 0.14) 52%, rgba(8, 7, 5, 0.7));
}

.scene-art--reach::before,
.scene-art--receipt::before {
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.68), rgba(8, 7, 5, 0.16) 22%, rgba(8, 7, 5, 0.2) 68%, rgba(8, 7, 5, 0.46)),
    linear-gradient(90deg, rgba(8, 7, 5, 0.72), rgba(8, 7, 5, 0.1) 55%, rgba(8, 7, 5, 0.56));
}

.scene-art--opening::before {
  background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.28), rgba(8, 7, 5, 0.32) 17%, rgba(8, 7, 5, 0.22) 62%, rgba(8, 7, 5, 0.9) 100%),
    radial-gradient(ellipse at center 52%, transparent 12%, rgba(8, 7, 5, 0.38) 74%);
}

.chapter-heading,
.scene-heading {
  width: var(--content);
  margin: 0 auto clamp(58px, 7vw, 94px);
  color: var(--vxbe-alabaster);
}

.chapter-heading:target {
  opacity: 1;
  transform: none;
  transition: none;
}

.scene-heading--work,
.chapter-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.56fr);
  align-items: end;
  gap: clamp(42px, 7vw, 112px);
}

.chapter-heading .eyebrow,
.scene-heading .eyebrow {
  margin-bottom: 18px;
  color: var(--vxbe-copper);
}

.chapter-heading h2,
.scene-heading h2,
.final h2 {
  max-width: 1040px;
  margin: 0;
  color: var(--vxbe-alabaster);
  font-family: var(--display);
  font-size: clamp(3.7rem, 6.6vw, 7.4rem);
  font-weight: 350;
  letter-spacing: -0.055em;
  line-height: 0.91;
  text-wrap: balance;
}

.chapter-heading h2 em,
.scene-heading h2 em,
.final h2 em {
  color: var(--vxbe-gold);
  font-family: var(--display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: -0.04em;
}

.chapter-heading > p:last-child,
.scene-heading > p:last-child {
  max-width: 560px;
  margin: 0 0 7px;
  color: var(--vxbe-smoke);
  font-size: 16px;
  line-height: 1.75;
}

.chapter-heading:not(.chapter-heading--split) > p:last-child {
  margin-top: 28px;
}

.scene-fill {
  color: transparent !important;
  background: linear-gradient(90deg, var(--vxbe-gold) 0 49%, rgba(240, 217, 173, 0.24) 51% 100%);
  background-position: 100% 0;
  background-size: 210% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

.procession-scene.is-scene-active .scene-fill {
  animation: procession-copy-fill 1500ms var(--ease) 180ms both;
}

.product-stage,
.trust-stage,
.time-stage,
.reach-stage,
.receipt-stage {
  width: var(--content);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  color: var(--vxbe-alabaster);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.stage-topbar {
  min-height: 56px;
  padding: 0 4px;
  border-top: 1px solid var(--vxbe-warm-line);
  border-bottom: 1px solid var(--vxbe-warm-line);
  color: var(--vxbe-faint);
}

.stage-dot {
  display: none;
}

.stage-title {
  margin-left: 0;
}

.stage-status {
  color: var(--vxbe-champagne);
}

.stage-grid {
  min-height: 650px;
  margin-top: 18px;
  border: 0;
  background: transparent;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
}

.story-rail {
  padding: 26px 18px;
  border: 0;
  border-left: 1px solid var(--vxbe-warm-line-strong);
  background: linear-gradient(180deg, rgba(13, 10, 7, 0.78), rgba(13, 10, 7, 0.52));
  backdrop-filter: blur(14px);
}

.story-rail > p,
.rail-memory {
  color: var(--vxbe-faint);
}

.story-choice {
  border-left-color: transparent;
  color: var(--vxbe-smoke);
}

.story-choice:hover {
  color: var(--vxbe-alabaster);
  background: rgba(230, 187, 117, 0.04);
}

.story-choice[aria-pressed="true"] {
  border-left-color: var(--vxbe-gold);
  color: var(--vxbe-alabaster);
  background: linear-gradient(90deg, rgba(230, 187, 117, 0.1), transparent);
}

.rail-memory {
  border-top-color: var(--vxbe-warm-line);
}

.rail-memory span {
  color: var(--vxbe-gold);
}

.buddy-workspace {
  grid-template-columns: minmax(350px, 0.76fr) minmax(0, 1.24fr);
  gap: 18px;
}

.phone-column {
  padding: 34px 24px;
  border: 0;
  background: radial-gradient(circle at 50% 30%, rgba(230, 187, 117, 0.11), transparent 52%);
}

.phone {
  border-color: rgba(240, 217, 173, 0.27);
  color: var(--vxbe-alabaster);
  background: rgba(9, 8, 6, 0.9);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(230, 187, 117, 0.04) inset;
  backdrop-filter: blur(18px);
}

.phone::before,
.phone-header,
.conversation-state {
  border-color: var(--vxbe-warm-line);
}

.phone-header span,
.conversation-state {
  color: var(--vxbe-champagne);
}

.bubble {
  border-color: rgba(240, 217, 173, 0.16);
}

.bubble--user {
  border-color: rgba(230, 187, 117, 0.3);
  background: rgba(198, 138, 82, 0.1);
}

.bubble--buddy {
  background: rgba(246, 239, 227, 0.045);
}

.message-attachment {
  border-color: rgba(230, 187, 117, 0.24);
  background: rgba(8, 7, 5, 0.4);
}

.message-attachment iconify-icon,
.context-item iconify-icon {
  color: var(--vxbe-gold);
}

.work-column {
  padding: 34px 38px;
  border-top: 1px solid var(--vxbe-warm-line);
  border-left: 1px solid var(--vxbe-warm-line);
  background: linear-gradient(135deg, rgba(12, 9, 6, 0.82), rgba(12, 9, 6, 0.58));
  backdrop-filter: blur(16px);
}

.work-heading p,
.work-timeline time,
.work-timeline p,
.result-peek p {
  color: var(--vxbe-faint);
}

.work-heading h2,
.result-peek strong {
  color: var(--vxbe-alabaster);
  font-family: var(--display);
}

.work-badge {
  border-color: rgba(230, 187, 117, 0.3);
  color: var(--vxbe-champagne);
}

.context-item,
.work-timeline li,
.result-peek {
  border-color: var(--vxbe-warm-line);
}

.context-item {
  color: var(--vxbe-smoke);
  background: rgba(246, 239, 227, 0.025);
}

.work-timeline li::before {
  border-color: var(--vxbe-warm-line-strong);
  background: var(--vxbe-obsidian);
}

.work-timeline li.is-current::before {
  border-color: var(--vxbe-gold);
}

.work-timeline strong {
  color: var(--vxbe-alabaster);
}

.result-peek {
  background: linear-gradient(90deg, rgba(230, 187, 117, 0.1), rgba(230, 187, 117, 0.035));
}

.result-peek small {
  color: var(--vxbe-champagne);
}

.open-result {
  border-color: var(--vxbe-warm-line-strong);
}

.open-result:hover {
  color: var(--vxbe-void);
  background: var(--vxbe-gold);
}

.trust-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(44px, 8vw, 128px);
}

.trust-control {
  padding: 36px 34px;
  border: 0;
  border-left: 1px solid var(--vxbe-warm-line-strong);
  background: rgba(10, 8, 6, 0.68);
  backdrop-filter: blur(16px);
}

.trust-control .eyebrow,
.channel-control .eyebrow {
  color: var(--vxbe-copper);
}

.trust-control h3,
.channel-control h3,
.check-in h3,
.trust-result strong,
.receipt-inspector h3,
.receipt-detail h4 {
  color: var(--vxbe-alabaster);
  font-family: var(--display);
  font-weight: 350;
}

.trust-control > p,
.trust-setting-note,
.trust-work-top span,
.check-in p,
.trust-result {
  color: var(--vxbe-smoke);
}

.trust-option {
  border-color: var(--vxbe-warm-line);
  color: var(--vxbe-smoke);
}

.trust-option strong {
  color: var(--vxbe-alabaster);
}

.trust-option[aria-pressed="true"] {
  border-color: rgba(230, 187, 117, 0.5);
  color: var(--vxbe-alabaster);
  background: linear-gradient(90deg, rgba(230, 187, 117, 0.12), transparent);
}

.trust-setting-note {
  border-top-color: var(--vxbe-warm-line);
}

.trust-setting-note strong {
  color: var(--vxbe-champagne);
}

.trust-work {
  min-height: 600px;
  padding: 34px 0 0;
  border: 0;
  border-top: 1px solid var(--vxbe-warm-line);
  background: transparent;
}

.trust-path {
  margin: 58px 0;
}

.trust-step {
  border-top-color: var(--vxbe-warm-line-strong);
  color: var(--vxbe-faint);
}

.trust-step::before {
  border-color: var(--vxbe-warm-line-strong);
  background: var(--vxbe-void);
}

.trust-step.is-paused::before {
  border-color: var(--vxbe-gold);
  box-shadow: 0 0 0 7px rgba(230, 187, 117, 0.09), 0 0 26px rgba(230, 187, 117, 0.26);
}

.check-in,
.trust-result {
  align-self: start;
  padding: 28px;
  border-color: rgba(230, 187, 117, 0.34);
  background: rgba(12, 9, 6, 0.82);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
}

.check-in small {
  color: var(--vxbe-gold);
}

.check-actions button {
  border-color: var(--vxbe-warm-line-strong);
  color: var(--vxbe-alabaster);
}

.check-actions button:first-child {
  border-color: var(--vxbe-gold);
  color: var(--vxbe-void);
  background: var(--vxbe-gold);
}

.check-actions button:hover {
  color: var(--vxbe-void);
  background: var(--vxbe-alabaster);
}

.time-stage {
  overflow: visible;
}

.day-controls {
  width: 100%;
  margin: 0 0 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--vxbe-warm-line);
  border-radius: 0;
  background: transparent;
  gap: 0;
}

.day-control {
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--vxbe-faint);
}

.day-control[aria-pressed="true"] {
  color: var(--vxbe-alabaster);
  background: linear-gradient(180deg, transparent, rgba(230, 187, 117, 0.09));
  border-bottom-color: var(--vxbe-gold);
}

.time-scene {
  min-height: 650px;
  border: 0;
  background: transparent;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 7vw, 112px);
}

.memory-room {
  padding: 44px 40px;
  border: 0;
  border-left: 1px solid var(--vxbe-warm-line-strong);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.78), rgba(10, 8, 6, 0.48));
  backdrop-filter: blur(14px);
}

.profile-button {
  border-color: var(--vxbe-warm-line);
  color: var(--vxbe-smoke);
}

.profile-button[aria-pressed="true"] {
  border-color: rgba(230, 187, 117, 0.46);
  color: var(--vxbe-alabaster);
  background: rgba(230, 187, 117, 0.09);
}

.memory-room h3 {
  color: var(--vxbe-alabaster);
  font-family: var(--display);
  font-weight: 350;
}

.memory-room h3 em {
  color: var(--vxbe-gold);
  font-style: normal;
}

.memory-room > p,
.profile-facts dd,
.learned-note p,
.later-message p,
.schedule-spec dd {
  color: var(--vxbe-smoke);
}

.profile-facts,
.profile-facts > div,
.learned-note,
.later-message,
.quiet-return,
.schedule-disclosure,
.schedule-spec,
.schedule-spec > div {
  border-color: var(--vxbe-warm-line);
}

.profile-facts dt,
.learned-note small,
.date-stamp,
.later-message small,
.schedule-spec dt {
  color: var(--vxbe-faint);
}

.learned-note small,
.quiet-return iconify-icon,
.schedule-disclosure summary {
  color: var(--vxbe-gold);
}

.later-thread {
  padding: 48px 0;
  background: linear-gradient(90deg, transparent, rgba(8, 7, 5, 0.48) 18%, rgba(8, 7, 5, 0.72));
}

.later-message {
  background: rgba(8, 7, 5, 0.56);
  backdrop-filter: blur(10px);
}

.later-message--user {
  border-color: rgba(230, 187, 117, 0.28);
}

.later-message strong {
  color: var(--vxbe-alabaster);
}

.quiet-return {
  color: var(--vxbe-faint);
}

@media (min-width: 981px) {
  .day-controls {
    margin-bottom: 12px;
  }

  .day-control {
    min-height: 44px;
  }

  .time-scene {
    min-height: 520px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .memory-room {
    padding: 16px 24px;
  }

  .profile-switcher {
    margin-bottom: 12px;
  }

  .memory-room h3 {
    font-size: clamp(2.6rem, 3.35vw, 3.75rem);
    line-height: 0.96;
  }

  .memory-room > p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  .profile-facts {
    margin-top: 8px;
  }

  .profile-facts > div {
    padding: 6px 0;
    grid-template-columns: 76px 1fr;
    gap: 10px;
  }

  .profile-facts dd {
    font-size: 11px;
    line-height: 1.4;
  }

  .learned-note {
    margin-top: 10px;
    padding: 8px 0;
  }

  .learned-note strong {
    margin: 6px 0 2px;
    font-size: 14px;
  }

  .learned-note p {
    font-size: 12px;
  }

  .later-thread {
    padding: 8px 0;
    gap: 10px;
  }

  .later-message {
    padding: 14px 16px;
  }

  .later-message p {
    line-height: 1.55;
  }

  .quiet-return {
    margin-top: 10px;
    padding-top: 10px;
  }
}

.reach-stage {
  display: grid;
  grid-template-columns: minmax(280px, 0.64fr) minmax(0, 1.36fr);
  gap: clamp(42px, 8vw, 126px);
}

.channel-control {
  padding: 36px 0;
  border: 0;
  border-top: 1px solid var(--vxbe-warm-line);
  background: transparent;
}

.channel-control > p {
  color: var(--vxbe-smoke);
}

.channel-tabs {
  border-bottom: 1px solid var(--vxbe-warm-line);
}

.channel-tab {
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--vxbe-faint);
  background: transparent;
}

.channel-tab[aria-selected="true"] {
  border-bottom-color: var(--vxbe-gold);
  color: var(--vxbe-alabaster);
  background: linear-gradient(180deg, transparent, rgba(230, 187, 117, 0.08));
}

.channel-panels {
  min-height: 540px;
  border: 1px solid var(--vxbe-warm-line);
  background: rgba(9, 8, 6, 0.76);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.channel-header,
.channel-note,
.email-meta > div {
  border-color: var(--vxbe-warm-line);
}

.channel-header span,
.channel-header time,
.email-meta dt,
.email-meta dd,
.channel-note {
  color: var(--vxbe-faint);
}

.channel-message {
  border-color: rgba(230, 187, 117, 0.28);
  color: var(--vxbe-alabaster);
  background: rgba(198, 138, 82, 0.1);
}

.channel-reply {
  border-color: var(--vxbe-warm-line);
  color: var(--vxbe-smoke);
  background: rgba(246, 239, 227, 0.04);
}

.channel-reply strong {
  color: var(--vxbe-alabaster);
}

.channel-note iconify-icon {
  color: var(--vxbe-gold);
}

.receipt-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.76fr);
  gap: clamp(34px, 5vw, 80px);
}

.artifact {
  padding: clamp(42px, 5vw, 66px);
  color: #211a12;
  background: linear-gradient(135deg, rgba(248, 241, 228, 0.98), rgba(223, 207, 180, 0.97));
  box-shadow: 0 48px 130px rgba(0, 0, 0, 0.52), 0 0 66px rgba(230, 187, 117, 0.12);
}

.artifact-top,
.artifact-change {
  border-color: rgba(45, 33, 20, 0.18);
}

.artifact-top h3 {
  color: #1c1710;
  font-family: var(--display);
  font-weight: 350;
}

.artifact-summary {
  color: rgba(33, 26, 18, 0.8);
}

.artifact-change mark {
  background: rgba(198, 138, 82, 0.34);
}

.receipt-inspector {
  padding: 40px 0 0;
  border-top: 1px solid var(--vxbe-warm-line);
  color: var(--vxbe-alabaster);
  background: transparent;
}

.receipt-inspector > small,
.receipt-detail small {
  color: var(--vxbe-gold);
}

.receipt-rows,
.receipt-row {
  border-color: var(--vxbe-warm-line);
}

.receipt-row {
  color: var(--vxbe-smoke);
}

.receipt-row span {
  color: var(--vxbe-faint);
}

.receipt-row strong {
  color: var(--vxbe-alabaster);
}

.receipt-detail {
  border-color: var(--vxbe-warm-line);
  background: rgba(8, 7, 5, 0.52);
  backdrop-filter: blur(12px);
}

.receipt-detail p {
  color: var(--vxbe-smoke);
}

.final {
  min-height: max(850px, 108svh);
  padding: clamp(160px, 18vw, 260px) 32px 90px;
  color: var(--vxbe-alabaster);
  background: var(--vxbe-void);
}

.final-inner {
  width: min(980px, 100%);
}

.final .eyebrow {
  justify-content: center;
}

.final h2 {
  color: var(--vxbe-alabaster);
  font-size: clamp(4.2rem, 8.5vw, 9rem);
}

.final p {
  color: var(--vxbe-smoke);
}

.final-actions a {
  min-height: 58px;
  border-color: var(--vxbe-warm-line-strong);
  color: var(--vxbe-alabaster);
  background: rgba(8, 7, 5, 0.44);
  backdrop-filter: blur(12px);
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 260ms var(--ease), box-shadow 260ms ease;
}

.final-actions a:first-child {
  border-color: var(--vxbe-gold);
  color: var(--vxbe-void);
  background: var(--vxbe-gold);
  box-shadow: 0 22px 60px rgba(198, 138, 82, 0.22);
}

.final-actions a:hover {
  transform: translateY(-3px);
}

.final-actions a:first-child:hover {
  background: var(--vxbe-champagne);
  box-shadow: 0 28px 72px rgba(230, 187, 117, 0.3);
}

.footer-place {
  color: var(--vxbe-gold);
}

.footer-place span {
  color: var(--vxbe-faint);
}

.e2b-startups-badge img {
  filter: invert(1) grayscale(1) brightness(1.7);
}

@keyframes procession-light {
  0% { transform: translate3d(-3%, -1%, 0) scale(0.96); }
  55% { transform: translate3d(2%, 2%, 0) scale(1.03); }
  100% { transform: translate3d(4%, -2%, 0) scale(0.99); }
}

@keyframes procession-copy-fill {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/*
 * Layout modes intentionally overlap common device and zoom widths instead of
 * switching at 1280/1024/820/768 exactly. Browser scaling can resolve those
 * physical sizes to fractional CSS pixels; the safe bands prevent a one-pixel
 * half-desktop/half-tablet composition.
 */
@media (max-width: 1320px) {
  .scene-heading--work,
  .chapter-heading--split {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
    gap: 44px;
  }

  .stage-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "story"
      "switcher"
      "workspace";
  }

  .story-rail {
    display: grid;
    grid-area: story;
    padding: 14px;
    border: 0;
    border-top: 1px solid var(--vxbe-warm-line);
    border-bottom: 1px solid var(--vxbe-warm-line);
    background: rgba(8, 7, 5, 0.72);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .story-rail > p,
  .rail-memory {
    display: none;
  }

  .story-choice {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid var(--vxbe-warm-line);
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .story-choice[aria-pressed="true"] {
    border-color: var(--vxbe-gold);
  }

  .story-choice small,
  .story-choice strong {
    display: none;
  }

  .story-choice-short {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
  }

  .buddy-workspace {
    width: 100%;
    min-height: 0;
    grid-area: workspace;
    grid-template-columns: 1fr;
  }

  .mobile-stage-switcher {
    display: grid;
    width: 100%;
    grid-area: switcher;
    padding: 10px;
    border-bottom: 1px solid var(--vxbe-warm-line);
    background: rgba(8, 7, 5, 0.7);
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mobile-stage-tab {
    min-height: 44px;
    border: 1px solid var(--vxbe-warm-line);
    color: var(--vxbe-smoke);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-stage-tab[aria-selected="true"] {
    border-color: var(--vxbe-gold);
    color: var(--vxbe-void);
    background: var(--vxbe-gold);
  }

  .phone-column {
    display: flex;
    min-width: 0;
    padding: 0;
    align-items: stretch;
    background: transparent;
  }

  .phone {
    width: 100%;
    min-height: 0;
    padding: 30px 34px 22px;
    border-right: 1px solid var(--vxbe-warm-line);
    border-left: 1px solid var(--vxbe-warm-line);
    border-radius: 0;
    box-shadow: none;
  }

  .phone::before {
    display: none;
  }

  .phone-header,
  .phone-thread,
  .conversation-state {
    width: min(100%, 720px);
    margin-right: auto;
    margin-left: auto;
  }

  .phone-thread {
    min-height: 0;
    flex: 1;
    overflow: visible;
  }

  .bubble {
    max-width: min(82%, 620px);
  }

  .buddy-workspace[data-mobile-view="conversation"] .work-column {
    display: none;
  }

  .buddy-workspace[data-mobile-view="work"] .phone-column {
    display: none;
  }

  .trust-stage,
  .reach-stage {
    grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.34fr);
    gap: 44px;
  }

  .receipt-stage {
    grid-template-columns: 1fr;
  }

  .receipt-inspector {
    min-height: 480px;
  }
}

@media (max-width: 980px) {
  :root {
    --vxbe-header-height: 68px;
    --anchor-offset: calc(var(--vxbe-header-height) + 24px);
  }

  .site-header {
    padding: 12px 24px;
  }

  .site-nav {
    display: none;
  }

  .scene-heading--work,
  .chapter-heading--split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .chapter-heading > p:last-child,
  .scene-heading > p:last-child {
    margin: 0;
  }

  .trust-stage,
  .reach-stage,
  .time-scene {
    grid-template-columns: 1fr;
  }

  .trust-stage,
  .reach-stage {
    gap: 20px;
  }

  .trust-control {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(230px, 0.78fr) minmax(320px, 1.22fr);
    grid-template-areas:
      "trust-eyebrow trust-options"
      "trust-title trust-options"
      "trust-copy trust-options"
      "trust-note trust-note";
    column-gap: clamp(28px, 6vw, 64px);
    align-content: start;
  }

  .trust-control .eyebrow {
    grid-area: trust-eyebrow;
  }

  .trust-control h3 {
    grid-area: trust-title;
  }

  .trust-control > p {
    grid-area: trust-copy;
  }

  .trust-options {
    grid-area: trust-options;
    align-self: start;
  }

  .trust-setting-note {
    grid-area: trust-note;
    margin-top: 28px;
  }

  .trust-work {
    min-height: 520px;
  }

  .memory-room {
    max-width: none;
  }
}

@media (max-width: 800px) {
  :root {
    --content: calc(100% - 28px);
    --section-gap: 88px;
    --scene-overlap: 220px;
  }

  .scene-body--work,
  .chapter,
  .scene--memory,
  .scene--receipt {
    min-height: 0;
    padding: 112px 0 142px;
  }

  .scene--memory {
    padding-bottom: 96px;
  }

  .scene--reach {
    padding-top: 96px;
  }

  .scene-body--work {
    padding-top: 106px;
  }

  .scene-art img {
    object-position: 50% 50%;
    filter: saturate(0.6) contrast(1.08) brightness(0.48) sepia(0.08);
  }

  .scene-art::before {
    background:
      linear-gradient(180deg, rgba(8, 7, 5, 0.68), rgba(8, 7, 5, 0.3) 18%, rgba(8, 7, 5, 0.34) 68%, rgba(8, 7, 5, 0.48)),
      linear-gradient(90deg, rgba(8, 7, 5, 0.48), rgba(8, 7, 5, 0.2), rgba(8, 7, 5, 0.48));
  }

  .scene-art--memory img {
    filter: saturate(0.56) contrast(1.1) brightness(0.58) sepia(0.12);
  }

  .scene-art--reach img {
    filter: saturate(0.6) contrast(1.06) brightness(0.63) sepia(0.1);
  }

  .scene-art--memory::before {
    background:
      linear-gradient(180deg, rgba(8, 7, 5, 0.34), rgba(8, 7, 5, 0.16) 20%, rgba(8, 7, 5, 0.16) 70%, rgba(8, 7, 5, 0.3)),
      linear-gradient(90deg, rgba(8, 7, 5, 0.4), rgba(8, 7, 5, 0.12) 52%, rgba(8, 7, 5, 0.42));
  }

  .scene-art--reach::before {
    background:
      linear-gradient(180deg, rgba(8, 7, 5, 0.28), rgba(8, 7, 5, 0.12) 22%, rgba(8, 7, 5, 0.16) 70%, rgba(8, 7, 5, 0.34)),
      linear-gradient(90deg, rgba(8, 7, 5, 0.28), rgba(8, 7, 5, 0.08) 55%, rgba(8, 7, 5, 0.3));
  }

  .scene-art--opening img {
    filter: saturate(0.58) contrast(1.02) brightness(0.58) sepia(0.06);
  }

  .scene-art--opening::before {
    background: linear-gradient(180deg, rgba(8, 7, 5, 0.28), rgba(8, 7, 5, 0.34) 18%, rgba(8, 7, 5, 0.32) 66%, rgba(8, 7, 5, 0.92));
  }

  .scene-art__glow {
    opacity: 0.22;
  }

  .chapter-heading,
  .scene-heading {
    margin-bottom: 42px;
  }

  .chapter-heading h2,
  .scene-heading h2 {
    font-size: clamp(3rem, 13vw, 4.5rem);
    line-height: 0.94;
  }

  .chapter-heading > p:last-child,
  .scene-heading > p:last-child,
  .chapter-heading:not(.chapter-heading--split) > p:last-child {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.62;
  }

  .product-stage,
  .trust-stage,
  .time-stage,
  .reach-stage,
  .receipt-stage {
    width: calc(100% - 20px);
  }

  .stage-topbar {
    padding-inline: 8px;
  }

  .stage-status {
    display: none;
  }

  .stage-grid {
    margin-top: 10px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .buddy-workspace {
    min-height: 0;
  }

  .story-rail {
    padding: 8px;
    border: 0;
    border-bottom: 1px solid var(--vxbe-warm-line);
    background: rgba(8, 7, 5, 0.72);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-choice {
    border-color: var(--vxbe-warm-line);
  }

  .story-choice[aria-pressed="true"] {
    border-color: var(--vxbe-gold);
    background: rgba(230, 187, 117, 0.1);
  }

  .mobile-stage-switcher {
    background: rgba(8, 7, 5, 0.78);
  }

  .phone-column {
    padding: 0;
  }

  .phone {
    width: 100%;
    min-height: 0;
    padding: 22px 18px 16px;
    border: 0;
    border-radius: 0;
    background: rgba(8, 7, 5, 0.72);
    box-shadow: none;
  }

  .phone-header,
  .phone-thread,
  .conversation-state {
    width: 100%;
  }

  .phone-header {
    padding-top: 0;
  }

  .phone-thread {
    padding: 24px 0;
  }

  .conversation-state {
    margin-top: 4px;
    padding-inline: 4px;
  }

  .bubble {
    width: min(94%, 520px);
    max-width: none;
  }

  .work-column {
    padding: 24px 18px;
    border-right: 1px solid var(--vxbe-warm-line);
    background: rgba(8, 7, 5, 0.74);
  }

  .work-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-timeline li {
    grid-template-columns: 54px 1fr;
    gap: 10px;
  }

  .trust-stage,
  .reach-stage {
    gap: 14px;
  }

  .trust-control {
    display: flex;
    padding: 25px 20px;
    flex-direction: column;
    border-left-color: var(--vxbe-warm-line-strong);
  }

  .trust-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-option {
    min-height: 88px;
    padding: 12px 8px;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
  }

  .trust-option > span {
    display: block;
    margin-top: 4px;
  }

  .trust-option > span > span {
    display: none;
  }

  .trust-setting-note {
    display: block;
    font-size: 12px;
  }

  .trust-work {
    min-height: 0;
    padding: 26px 18px 0;
    background: rgba(8, 7, 5, 0.62);
  }

  .trust-path {
    margin: 28px 0;
  }

  .day-controls {
    display: flex;
    width: 100%;
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .day-controls::-webkit-scrollbar {
    display: none;
  }

  .day-control,
  .day-control:last-child {
    min-width: max-content;
    padding: 0 18px;
    grid-column: auto;
    scroll-snap-align: start;
  }

  .time-scene {
    gap: 16px;
  }

  .memory-room {
    padding: 26px 20px;
    border-bottom: 0;
  }

  .later-thread {
    padding: 26px 20px;
    background: rgba(8, 7, 5, 0.68);
  }

  .channel-control {
    padding: 8px;
    border-top: 0;
    background: rgba(8, 7, 5, 0.66);
  }

  .channel-control > .eyebrow,
  .channel-control > h3,
  .channel-control > p {
    display: none;
  }

  .channel-panels {
    min-height: 0;
    background: rgba(8, 7, 5, 0.74);
  }

  .receipt-mobile-switcher {
    border-color: var(--vxbe-warm-line);
    background: rgba(8, 7, 5, 0.84);
  }

  .receipt-mobile-tab {
    border-color: var(--vxbe-warm-line);
    color: var(--vxbe-smoke);
  }

  .receipt-mobile-tab[aria-selected="true"] {
    border-color: var(--vxbe-gold);
    color: var(--vxbe-void);
    background: var(--vxbe-gold);
  }

  .artifact {
    padding: 28px 20px;
  }

  .receipt-inspector {
    min-height: 0;
    padding: 26px 20px;
    background: rgba(8, 7, 5, 0.76);
  }

  .final {
    min-height: 100svh;
    padding: 142px 16px 64px;
  }

  .final h2 {
    font-size: clamp(4rem, 17vw, 6rem);
    line-height: 0.89;
  }

  .final-actions a {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-art__glow,
  .procession-scene.is-scene-active .scene-art__glow {
    opacity: 0.26;
    animation: none;
    transform: none;
  }

  .scene-fill,
  .procession-scene.is-scene-active .scene-fill {
    background-position: 0 0;
    animation: none;
  }

  .final-actions a:hover {
    transform: none;
  }
}