/* ════════════════════════════════════════════════════════════════════
   OUTLIVED PAGE STYLES - outlived/outlived.css
   Ported from the Outlived subdomain experience and scoped under
   body.outlived-page so this file NEVER bleeds into the site chrome
   (header / footer / dialogs are styled by style.css only).

   The original page was built on the Tailwind CDN (a runtime compiler).
   This file replaces it with a hand-compiled, static set of the exact
   utility classes the page uses - no CDN, works under the site's CSP.

   Fonts (Cinzel / Playfair Display / Quicksand) are vendored locally in
   outlived/fonts/ (see fonts.css @font-face rules) so the app's chosen
   typography is preserved exactly.
   ════════════════════════════════════════════════════════════════════ */

/* ── Page scope: body class set on outlived.html ──────────────────── */
body.outlived-page {
  --ol-accent: #bc1313;
  --ol-gold: #c5a059;
  --ol-bg: #050505;
  background-color: var(--ol-bg);
  color: #e5e7eb;
  font-family: "Quicksand", "BlueCurve", sans-serif;
  overflow-x: hidden;
}

/* ── Base (ported from base.css, scoped) ──────────────────────────── */
/* Fullscreen cinematic scenes keep their format, but each scene's
   content box now uses the SAME geometry as style.css's .container:
   min(1290px, 92vw), centred - so on ultrawide the Outlived scenes hit
   exactly the same 1290px column as the rest of the site (previously
   10% gutters let them spread unbounded). The 5% floor keeps a
   phone-safe gutter; section block rhythm (80px/50px scene padding)
   is part of the cinematic format and is left untouched. */
.outlived-page section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 50px;
  padding-inline: max(5%, calc((100vw - min(1290px, 92vw)) / 2));
  position: relative;
  overflow: hidden;
}

.outlived-page #ol-hero { padding-top: 0; }
.outlived-page #download {
  padding-bottom: clamp(48px, 7vw, 96px);
}


.outlived-page h1,
.outlived-page h2,
.outlived-page .cinematic {
  font-family: "Cinzel", serif;
  letter-spacing: 0.1em;
}

.outlived-page .serif-italic {
  font-family: "Playfair Display", serif;
  font-style: italic;
}

/* ── Canvas / grain / vignette (ported from animations.css) ───────── */
.outlived-page #canvas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Privacy oracle was removed from the Outlived page (dedicated button no
   longer used - the dialog is still reachable via the site footer links). */

.outlived-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

.outlived-page .scroll-reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(32px) scale(0.97);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.1s;
}

.outlived-page .scroll-reveal.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.outlived-page .delay-1 { transition-delay: 0.1s; }
.outlived-page .delay-2 { transition-delay: 0.25s; }
.outlived-page .delay-3 { transition-delay: 0.4s; }

.outlived-page section:not(.is-visible) .scroll-reveal {
  opacity: 0;
  transform: translateY(-16px) scale(1.01);
  transition-duration: 0.6s;
}

@keyframes ol-heartbeat {
  0%   { transform: scale(1); opacity: 1; }
  14%  { transform: scale(1.05); opacity: 0.9; }
  28%  { transform: scale(1); opacity: 1; }
  42%  { transform: scale(1.03); opacity: 0.95; }
  70%  { transform: scale(1); opacity: 1; }
}

.outlived-page .heartbeat-text {
  animation: ol-heartbeat 2s ease-in-out infinite;
  display: inline-block;
}

.outlived-page .vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 5;
  pointer-events: none;
}

@keyframes ol-audio-pulse {
  0%   { box-shadow: 0 0 0 rgba(197, 160, 89, 0); transform: scale(1); }
  50%  { box-shadow: 0 0 15px rgba(197, 160, 89, 0.4); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 rgba(197, 160, 89, 0); transform: scale(1); }
}

.outlived-page .audio-active {
  animation: ol-audio-pulse 2s infinite ease-in-out !important;
  border-color: rgba(197, 160, 89, 0.6) !important;
  color: #c5a059 !important;
  background: rgba(197, 160, 89, 0.1) !important;
}

@keyframes ol-prompt-flash {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.6; }
}

.outlived-page .prompt-active { animation: ol-prompt-flash 6s infinite; }

/* ── Components (ported from components.css, scoped) ───────────────── */
.outlived-page .image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.2);
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.8);
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
}

.outlived-page .image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 15s linear;
}

.outlived-page .image-frame:hover img { transform: scale(1.1); }

.outlived-page .stat-glow {
  color: var(--ol-gold);
  text-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

.outlived-page .nav-arrows {
  position: fixed;
  right: 3rem;
  bottom: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 100;
}

.outlived-page .nav-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: white;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(5px);
}

.outlived-page .nav-arrow:hover {
  border-color: var(--ol-gold);
  color: var(--ol-gold);
  background: rgba(197, 160, 89, 0.15);
  transform: scale(1.1);
}

.outlived-page .progress-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: 0.5s;
  cursor: pointer;
}

.outlived-page .progress-dot.active {
  background: var(--ol-gold);
  box-shadow: 0 0 10px var(--ol-gold);
  transform: scale(2.5);
}

.outlived-page .ledger-counter {
  margin-top: 3.5rem;
  margin-bottom: 4.5rem;
  font-family: "Cinzel", serif;
  letter-spacing: 0.3em;
  color: var(--ol-gold);
  text-shadow: 0 0 20px rgba(197, 160, 89, 0.6);
}

.outlived-page .ledger-count {
  font-weight: 900;
  font-size: 1.5rem;
}

.outlived-page .store-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  color: #fff;
}

.outlived-page .store-btn:not([aria-disabled="true"]),
.outlived-page .store-btn--active {
  color: var(--ol-gold);
  border-color: rgba(197, 160, 89, 0.35);
}

.outlived-page .store-btn:not([aria-disabled="true"]):hover,
.outlived-page .store-btn--active:hover {
  border-color: var(--ol-gold);
  background: rgba(197, 160, 89, 0.08);
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.22);
  transform: translateY(-5px);
}

.outlived-page .store-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.6);
}

.outlived-page .store-btn[aria-disabled="true"]:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transform: none;
  box-shadow: none;
}

.outlived-page .carousel-track {
  position: relative;
  height: 240px;
  width: 100%;
  max-width: 1200px;
  margin: 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
  cursor: grab;
  user-select: none;
}

.outlived-page .carousel-track:active { cursor: grabbing; }

@media (min-height: 700px) { .outlived-page .carousel-track { height: 280px; } }
@media (min-width: 768px)  { .outlived-page .carousel-track { height: 600px; margin: 4rem 0; } }
@media (min-width: 1024px) { .outlived-page .carousel-track { height: 50vh; } }

.outlived-page .carousel-item {
  position: absolute;
  width: 110px;
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

@media (min-height: 700px) and (min-width: 360px) {
  .outlived-page .carousel-item { width: 135px; }
}
@media (min-width: 768px)  { .outlived-page .carousel-item { width: 380px; } }
@media (min-width: 1024px) { .outlived-page .carousel-item { width: 440px; } }

.outlived-page .carousel-item.active {
  opacity: 1;
  transform: translateZ(80px);
  z-index: 10;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .outlived-page .carousel-item.active { transform: translateZ(300px); }
}

.outlived-page .carousel-item.prev {
  opacity: 0.3;
  transform: translateX(-65%) translateZ(-150px) rotateY(15deg);
}

.outlived-page .carousel-item.next {
  opacity: 0.3;
  transform: translateX(65%) translateZ(-150px) rotateY(-15deg);
}

@media (min-width: 768px) {
  .outlived-page .carousel-item.prev {
    opacity: 0.4;
    transform: translateX(-100%) translateZ(-200px) rotateY(30deg);
  }
  .outlived-page .carousel-item.next {
    opacity: 0.4;
    transform: translateX(100%) translateZ(-200px) rotateY(-30deg);
  }
}

.outlived-page .gallery-image {
  width: 100%;
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.outlived-page .gallery-image.portrait { aspect-ratio: 9 / 16; }
.outlived-page .gallery-image.landscape { aspect-ratio: 16 / 9; }

@media (min-width: 768px) {
  .outlived-page .gallery-image.portrait { max-height: 45vh; width: auto; margin: 0 auto; }
}

.outlived-page .gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.outlived-page .carousel-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  z-index: 100;
  position: relative;
  padding: 0 1rem;
}

@media (min-height: 700px) { .outlived-page .carousel-controls { margin-top: 3rem; } }
@media (min-width: 768px)  { .outlived-page .carousel-controls { margin-top: 4rem; } }

.outlived-page .carousel-btn {
  padding: 0.8rem 1.5rem;
  min-width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.outlived-page .carousel-btn:hover {
  border-color: var(--ol-gold);
  color: var(--ol-gold);
  background: rgba(197, 160, 89, 0.1);
}

.outlived-page #lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}

.outlived-page #lightbox.active { display: flex; }

.outlived-page #lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 0 100px rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.outlived-page .lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
}

.outlived-page .lightbox-close:hover {
  opacity: 1;
  color: var(--ol-gold);
}

/* ── Hand-compiled utilities (Tailwind equivalents) ──────────────────
   Only the classes actually used in outlived.html. Values match
   Tailwind v3 defaults; gold is the app's #c5a059 accent. */

/* Position / layout */
.outlived-page .fixed   { position: fixed; }
.outlived-page .absolute{ position: absolute; }
.outlived-page .relative{ position: relative; }
.outlived-page .inset-0 { inset: 0; }
.outlived-page .top-0   { top: 0; }
.outlived-page .top-1\/2 { top: 50%; }
.outlived-page .left-8  { left: 2rem; }
.outlived-page .bottom-8{ bottom: 2rem; }

/* Nav controls rest 136px (8.5rem) up to match the footer-avoidance base in
   outlived.js - keeps them clear of the divider art that hangs ~40px up
   into the content above the footer seam. */
.outlived-page .nav-group {
  bottom: 8.5rem;
}
.outlived-page .right-8 { right: 2rem; }
.outlived-page .right-\[calc\(100\%\+2\.5rem\)\] { right: calc(100% + 2.5rem); }
.outlived-page .z-\[1000\] { z-index: 1000; }
.outlived-page .z-50 { z-index: 50; }
.outlived-page .z-10 { z-index: 10; }
.outlived-page .z-0  { z-index: 0; }

.outlived-page .overflow-hidden { overflow: hidden; }
.outlived-page .pointer-events-none { pointer-events: none; }
.outlived-page .pointer-events-auto { pointer-events: auto; }
.outlived-page .cursor-pointer { cursor: pointer; }
.outlived-page .whitespace-nowrap { white-space: nowrap; }
.outlived-page .hidden { display: none; }

/* Flex */
.outlived-page .flex { display: flex; }
.outlived-page .flex-col { flex-direction: column; }
.outlived-page .flex-wrap { flex-wrap: wrap; }
.outlived-page .items-center { align-items: center; }
.outlived-page .items-start { align-items: flex-start; }
.outlived-page .justify-center { justify-content: center; }
.outlived-page .justify-between { justify-content: space-between; }
.outlived-page .gap-3 { gap: 0.75rem; }
.outlived-page .gap-4 { gap: 1rem; }
.outlived-page .gap-5 { gap: 1.25rem; }
.outlived-page .gap-6 { gap: 1.5rem; }
.outlived-page .gap-8 { gap: 2rem; }
.outlived-page .gap-16 { gap: 4rem; }
.outlived-page .gap-x-6 { column-gap: 1.5rem; }
.outlived-page .gap-y-2 { row-gap: 0.5rem; }

/* Grid */
.outlived-page .grid { display: grid; }
@media (min-width: 768px) { .outlived-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Order */
.outlived-page .order-1 { order: 1; }
.outlived-page .order-2 { order: 2; }
@media (min-width: 768px) { .outlived-page .md\:order-1 { order: 1; } }
@media (min-width: 768px) { .outlived-page .md\:order-2 { order: 2; } }

/* Sizing */
.outlived-page .w-full { width: 100%; }
.outlived-page .w-9  { width: 2.25rem; }
.outlived-page .w-10 { width: 2.5rem; }
.outlived-page .w-72 { width: 18rem; }
.outlived-page .h-9  { height: 2.25rem; }
.outlived-page .h-10 { height: 2.5rem; }
.outlived-page .max-w-2xl { max-width: 42rem; }
.outlived-page .max-w-3xl { max-width: 48rem; }
.outlived-page .max-w-4xl { max-width: 56rem; }
.outlived-page .max-w-7xl { max-width: 80rem; }
@media (min-width: 768px) { .outlived-page .md\:w-80 { width: 20rem; } }

/* Spacing */
.outlived-page .p-4 { padding: 1rem; }
.outlived-page .p-6 { padding: 1.5rem; }
.outlived-page .p-8 { padding: 2rem; }
.outlived-page .px-4 { padding-left: 1rem; padding-right: 1rem; }
.outlived-page .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.outlived-page .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.outlived-page .mb-2 { margin-bottom: 0.5rem; }
.outlived-page .mb-3 { margin-bottom: 0.75rem; }
.outlived-page .mb-4 { margin-bottom: 1rem; }
.outlived-page .mb-6 { margin-bottom: 1.5rem; }
.outlived-page .mb-8 { margin-bottom: 2rem; }
.outlived-page .mb-10 { margin-bottom: 2.5rem; }
.outlived-page .mb-12 { margin-bottom: 3rem; }
.outlived-page .mb-14 { margin-bottom: 3.5rem; }
.outlived-page .mb-16 { margin-bottom: 4rem; }
.outlived-page .mb-20 { margin-bottom: 5rem; }
.outlived-page .mt-1\.5 { margin-top: 0.375rem; }
.outlived-page .mt-6 { margin-top: 1.5rem; }
.outlived-page .mt-8 { margin-top: 2rem; }
.outlived-page .mt-10 { margin-top: 2.5rem; }
.outlived-page .mt-12 { margin-top: 3rem; }
.outlived-page .mt-14 { margin-top: 3.5rem; }
.outlived-page .mt-16 { margin-top: 4rem; }
.outlived-page .mt-20 { margin-top: 5rem; }
.outlived-page .mt-24 { margin-top: 6rem; }
.outlived-page .my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.outlived-page .my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.outlived-page .my-14 { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.outlived-page .my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.outlived-page .mx-auto { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  .outlived-page .md\:p-8 { padding: 2rem; }
  .outlived-page .md\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
}

/* Typography */
.outlived-page .text-white { color: #fff; }
.outlived-page .text-gold { color: var(--ol-gold); }
.outlived-page .text-red-800 { color: #991b1b; }
.outlived-page .text-red-500 { color: #ef4444; }
.outlived-page .text-red-200\/70 { color: rgba(254, 202, 202, 0.7); }
.outlived-page .opacity-50 { opacity: 0.5; }
.outlived-page .opacity-75 { opacity: 0.75; }
.outlived-page .opacity-80 { opacity: 0.8; }
.outlived-page .text-center { text-align: center; }
.outlived-page .text-left { text-align: left; }
.outlived-page .uppercase { text-transform: uppercase; }
.outlived-page .italic { font-style: italic; }
.outlived-page .underline { text-decoration: underline; }
.outlived-page .underline-offset-4 { text-underline-offset: 4px; }
.outlived-page .font-bold { font-weight: 700; }
.outlived-page .font-black { font-weight: 900; }
.outlived-page .leading-none { line-height: 1; }
.outlived-page .leading-relaxed { line-height: 1.625; }
.outlived-page .tracking-tighter { letter-spacing: -0.05em; }
.outlived-page .tracking-tight { letter-spacing: -0.025em; }
.outlived-page .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.outlived-page .tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.outlived-page .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.outlived-page .tracking-\[0\.4em\] { letter-spacing: 0.4em; }
.outlived-page .tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.outlived-page .tracking-\[1em\] { letter-spacing: 1em; }

.outlived-page .text-\[6\.5px\] { font-size: 6.5px; }
.outlived-page .text-\[7\.5px\] { font-size: 7.5px; }
.outlived-page .text-\[8px\] { font-size: 8px; }
.outlived-page .text-\[9px\] { font-size: 9px; }
.outlived-page .text-\[10px\] { font-size: 10px; }
.outlived-page .text-\[11px\] { font-size: 11px; }
.outlived-page .text-\[12px\] { font-size: 12px; }
.outlived-page .text-xs { font-size: 0.75rem; }
.outlived-page .text-sm { font-size: 0.875rem; }
.outlived-page .text-base { font-size: 1rem; }
.outlived-page .text-lg { font-size: 1.125rem; }
.outlived-page .text-xl { font-size: 1.25rem; }
.outlived-page .text-2xl { font-size: 1.5rem; }
.outlived-page .text-3xl { font-size: 1.875rem; }
.outlived-page .text-4xl { font-size: 2.25rem; }
.outlived-page .text-5xl { font-size: 3rem; }
.outlived-page .text-6xl { font-size: 3.75rem; }
.outlived-page .text-9xl { font-size: 8rem; }
@media (min-width: 640px) {
  .outlived-page .sm\:text-2xl { font-size: 1.5rem; }
  .outlived-page .sm\:text-3xl { font-size: 1.875rem; }
  .outlived-page .sm\:text-\[8px\] { font-size: 8px; }
}
@media (min-width: 768px) {
  .outlived-page .md\:text-2xl { font-size: 1.5rem; }
  .outlived-page .md\:text-3xl { font-size: 1.875rem; }
  .outlived-page .md\:text-5xl { font-size: 3rem; }
  .outlived-page .md\:text-6xl { font-size: 3.75rem; }
  .outlived-page .md\:text-9xl { font-size: 8rem; }
  .outlived-page .md\:text-base { font-size: 1rem; }
  .outlived-page .md\:text-lg { font-size: 1.125rem; }
  .outlived-page .md\:text-sm { font-size: 0.875rem; }
}

/* Visual */
.outlived-page .rounded-sm { border-radius: 0.125rem; }
.outlived-page .rounded-full { border-radius: 9999px; }
.outlived-page .rounded-xl { border-radius: 0.75rem; }
.outlived-page .border { border-width: 1px; }
.outlived-page .border-l-4 { border-left-width: 4px; }
.outlived-page .border-solid { border-style: solid; }
.outlived-page .border-gold\/30 { border-color: rgba(197, 160, 89, 0.3); }
.outlived-page .border-red-900 { border-color: #7f1d1d; }
.outlived-page .border-red-900\/30 { border-color: rgba(127, 29, 29, 0.3); }
.outlived-page .border-l-red-800 { border-left-color: #991b1b; }
.outlived-page .bg-gold\/5 { background: rgba(197, 160, 89, 0.05); }
.outlived-page .bg-white\/5 { background: rgba(255, 255, 255, 0.05); }
.outlived-page .bg-black\/80 { background: rgba(0, 0, 0, 0.8); }
.outlived-page .bg-red-950\/10 { background: rgba(69, 10, 10, 0.1); }
.outlived-page .backdrop-blur-md { backdrop-filter: blur(12px); }
.outlived-page .backdrop-blur { backdrop-filter: blur(8px); }
.outlived-page .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops, transparent)); }
.outlived-page .from-transparent { --tw-gradient-from: transparent; }
.outlived-page .via-gold\/20 { --tw-gradient-stops: var(--tw-gradient-from, transparent), rgba(197, 160, 89, 0.2), var(--tw-gradient-to, transparent); }
.outlived-page .to-transparent { --tw-gradient-to: transparent; }

.outlived-page .opacity-0 { opacity: 0; }
.outlived-page .opacity-20 { opacity: 0.2; }
.outlived-page .opacity-40 { opacity: 0.4; }
.outlived-page .opacity-50 { opacity: 0.5; }
.outlived-page .opacity-60 { opacity: 0.6; }
.outlived-page .opacity-70 { opacity: 0.7; }
.outlived-page .opacity-80 { opacity: 0.8; }
.outlived-page .opacity-90 { opacity: 0.9; }

/* Transforms / transitions */
.outlived-page .translate-x-\[-100\%\] { transform: translateX(-100%); }
.outlived-page .group-hover\:translate-x-\[100\%\] { transform: translateX(100%); }
.outlived-page .-translate-x-4 { transform: translateX(-1rem); }
.outlived-page .group-hover\:translate-x-0 { transform: translateX(0); }
.outlived-page .-translate-y-1\/2 { transform: translateY(-50%); }
.outlived-page .group-hover\:opacity-60 { opacity: 0.6; }
.outlived-page .group-hover\:border-gold { border-color: var(--ol-gold); }
.outlived-page .group-hover\:shadow-\[0_0_20px_rgba\(197\,160\,89\,0\.4\)\] { box-shadow: 0 0 20px rgba(197, 160, 89, 0.4); }
.outlived-page .hover\:text-gold:hover { color: var(--ol-gold); }
.outlived-page .hover\:opacity-100:hover { opacity: 1; }
.outlived-page .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.outlived-page .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.outlived-page .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.outlived-page .duration-500 { transition-duration: 500ms; }
.outlived-page .duration-1000 { transition-duration: 1000ms; }

@media (min-width: 768px) {
  .outlived-page .md\:inline { display: inline; }
  .outlived-page .md\:flex-row { flex-direction: row; }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .outlived-page .heartbeat-text { animation: none; }
  .outlived-page .scroll-reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition: none;
  }
  .outlived-page .audio-active { animation: none; }
  .outlived-page .prompt-active { animation: none; }
}

/* ── Gallery section: column layout (ported #gallery rule) ────────── */
.outlived-page #gallery {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 80px;
}

/* ── Discord Banner (Gothic Outlived theme) ─────────────────────────── */
.outlived-page .discord-banner__card {
  background:
    linear-gradient(120deg, rgba(88, 101, 242, 0.22), rgba(139, 0, 0, 0.28) 55%, rgba(197, 160, 89, 0.1)),
    rgba(10, 5, 8, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.outlived-page .discord-banner__card:hover {
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow: 0 18px 50px rgba(188, 19, 19, 0.25), 0 0 30px rgba(197, 160, 89, 0.2);
}
.outlived-page .discord-banner__icon {
  background: rgba(188, 19, 19, 0.2);
  border-color: rgba(197, 160, 89, 0.4);
  color: var(--ol-gold, #c5a059);
}
.outlived-page .discord-banner__title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.05em;
  color: #ffffff;
}
.outlived-page .discord-banner__sub {
  color: #c9cbcf;
}
.outlived-page .discord-banner__cta {
  background: var(--ol-gold, #c5a059);
  color: #0b090a;
}
.outlived-page .discord-banner__card:hover .discord-banner__cta,
.outlived-page .discord-banner__card:focus-visible .discord-banner__cta {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(197, 160, 89, 0.45);
}

/* ── Outlived Subscriptions Section ──────────────────────────────── */
.outlived-page .ol-tiers {
  min-height: auto;
  padding: clamp(80px, 10vw, 120px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.outlived-page .ol-tiers__head {
  max-width: 1120px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 48px);
  text-align: left;
}
.outlived-page .ol-tiers__head-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.outlived-page .ol-eyebrow {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ol-gold, #c5a059);
  margin-bottom: 12px;
}
.outlived-page .ol-tier-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(18, 20, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.outlived-page .ol-tier-toggle__btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 20px;
  font-family: "Cinzel", serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.25s ease;
}
.outlived-page .ol-tier-toggle__btn:hover {
  color: #fff;
}
.outlived-page .ol-tier-toggle__btn.is-active {
  background: #b84a1d;
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(184, 74, 29, 0.4);
}
.outlived-page .ol-tiers__intro {
  color: rgba(229, 231, 235, 0.75);
  line-height: 1.7;
  font-size: 0.95rem;
  max-width: 90ch;
  margin: 0;
}

/* ── Outlived Key Cards Grid ─────────────────────────────────────── */
.outlived-page .ol-key-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.5vw, 32px);
  max-width: 1120px;
  margin-inline: auto;
  width: 100%;
}
.outlived-page .ol-key {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  border-radius: 28px;
  background: #1c1e1f;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  text-align: left;
}
.outlived-page .ol-key:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.7);
}
.outlived-page .ol-key--gold {
  border-color: #b84a1d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 32px rgba(184, 74, 29, 0.18);
}
.outlived-page .ol-key--gold:hover {
  border-color: #d85c28;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75), 0 0 44px rgba(184, 74, 29, 0.28);
}

/* Card Header & Badges */
.outlived-page .ol-key__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.outlived-page .ol-key__name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
}
.outlived-page .ol-key__badge {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 8px;
}
.outlived-page .ol-key__badge--bronze,
.outlived-page .ol-key__badge--silver,
.outlived-page .ol-key__badge--gold {
  background: #b84a1d;
  color: #ffffff;
}

/* Pricing block */
.outlived-page .ol-key__pricing {
  margin-bottom: 16px;
  min-height: 72px;
}
.outlived-page .ol-key__price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.outlived-page .ol-key__price {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(2rem, 2.7vw, 2.5rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.outlived-page .ol-key__price--gold {
  color: #d85c28;
}
.outlived-page .ol-key__period {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 2px;
}
.outlived-page .ol-key__period--gold {
  color: rgba(216, 92, 40, 0.85);
}
.outlived-page .ol-key__orig {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
}
.outlived-page .ol-key__billed {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  min-height: 1.2em;
}
.outlived-page .ol-key__billed--empty {
  visibility: hidden;
}

/* Card Description & Divider */
.outlived-page .ol-key__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(229, 231, 235, 0.7);
  margin: 0 0 18px;
  min-height: 44px;
}
.outlived-page .ol-key__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 22px;
}

/* Checklist */
.outlived-page .ol-key__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 0 auto;
}
.outlived-page .ol-key__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f3f4f6;
  line-height: 1.4;
}
.outlived-page .ol-key__list li.ol-key__item--muted {
  color: rgba(255, 255, 255, 0.35);
}
.outlived-page .ol-key__item-main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.outlived-page .ol-key__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.outlived-page .ol-key__icon--check {
  color: #b84a1d;
}
.outlived-page .ol-key__icon--cross {
  color: rgba(255, 255, 255, 0.3);
}

/* Action Button */
.outlived-page .ol-key__action {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: all 0.25s ease;
  margin-top: auto;
}
.outlived-page .ol-key__action--bronze {
  background: #383b3d;
  color: #ffffff;
}
.outlived-page .ol-key__action--bronze:hover {
  background: #484c4f;
  color: #ffffff;
}
.outlived-page .ol-key__action--silver {
  background: #b84a1d;
  color: #ffffff;
}
.outlived-page .ol-key__action--silver:hover {
  background: #cf5624;
  box-shadow: 0 6px 20px rgba(184, 74, 29, 0.4);
  color: #ffffff;
}
.outlived-page .ol-key__action--gold {
  background: #b84a1d;
  color: #ffffff;
}
.outlived-page .ol-key__action--gold:hover {
  background: #cf5624;
  box-shadow: 0 6px 20px rgba(184, 74, 29, 0.4);
  color: #ffffff;
}

/* Footer note */
.outlived-page .ol-tiers__foot {
  margin-top: 36px;
  text-align: center;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  max-width: 860px;
}
.outlived-page .ol-tiers__foot a {
  color: var(--ol-gold, #c5a059);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.outlived-page .ol-tiers__foot a:hover {
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .outlived-page .ol-key-row {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
  }
}

/* ── Content-visibility performance for offscreen sections ────────── */
.outlived-page #mechanics,
.outlived-page #features,
.outlived-page #gallery,
.outlived-page #tiers,
.outlived-page #download {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}