:root{
  /* Ghost Cathedral palette — ~20% brighter than original, same hue family. */
  --bg: #0a0d18;                              /* was #05060a — deeper indigo, slight warmth */
  --fg: rgba(245, 247, 255, 0.96);            /* was .92 */
  --fg-body: rgba(245, 247, 255, 0.82);       /* body copy one step brighter */
  --fg-dim: rgba(245, 247, 255, 0.66);        /* secondary/meta */
  --hair: rgba(245, 247, 255, 0.14);

  --c1: #6D28D9;                              /* purple (structure) */
  --c2: #22D3EE;                              /* cyan (base) */
  --c2-hi: #4FE4F0;                           /* cyan (hover/active) */
  --glow: rgba(79, 228, 240, 0.24);

  --radius: 14px;
  --shadow: 0 20px 80px rgba(0,0,0,.65);
  --blur: 14px;

  /* Pull UI slightly away from screen edges to avoid clipping on aggressive scaling / fullscreen.
     This keeps the "center corridor" visually clear while making panels more robust across devices. */
  --ui-inset: clamp(18px, 3.2vw, 64px);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow:hidden;
}

#world{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display:block;
}

.overlay{
  position: fixed;
  inset: 0;
  pointer-events:none;
  /* Ghost Cathedral: ~20% brighter radials; vignette softer so the nave reads taller */
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(34,211,238,0.15), transparent 62%),
    radial-gradient(1100px 900px at 80% 35%, rgba(34,211,238,0.095), transparent 70%),
    radial-gradient(1100px 900px at 20% 35%, rgba(109,40,217,0.085), transparent 70%),
    radial-gradient(1200px 900px at 50% 70%, rgba(255,255,255,0.065), transparent 72%),
    radial-gradient(100% 100% at 50% 50%, rgba(0,0,0,0.00), rgba(0,0,0,0.54));
  filter: saturate(1.04) contrast(1.02);
}

/* Background texture layers (subtle)
   - grid: very faint structure
   - noise: breaks banding and adds depth */
.overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.10;
  mask-image: radial-gradient(60% 55% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
}
.overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 2px, transparent 6px);
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Mobile-only blocks (hidden by default; enabled in mobile media query) */
.m-media, .m-footer{ display:none; }

/* Mobile-only blocks (hidden by default; enabled in mobile media query) */
.m-media, .m-footer, .m-info{ display:none; }

/* Big branding words */
.brandwords{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.bw{
  position: absolute;
  font: 900 clamp(56px, 7.5vw, 110px)/0.9 var(--mono);
  letter-spacing: 0.04em;
  color: rgba(245,247,255,0.09);
  text-shadow: 0 0 80px rgba(34,211,238,0.07);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .35s ease, transform .35s ease;
}
.bw.is-on{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.bw-memory{ left: 8vw; top: 18vh; }
.bw-replay{ right: 8vw; top: 22vh; text-align:right; }
.bw-structure{ left: 7vw; bottom: 18vh; }
.bw-edge{ right: 7vw; bottom: 16vh; text-align:right; }

/* top bar */
.topbar{
  position: fixed;
  top: 18px;
  left: var(--ui-inset);
  right: var(--ui-inset);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  z-index: 40;
  mix-blend-mode: screen;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--fg);
  opacity: .92;
}
.brand-logo{ width: 18px; height: 18px; }
.brand-text{ font-weight: 650; letter-spacing: 0.3px; }

.nav{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(5,6,10,0.14);
  backdrop-filter: blur(var(--blur));
}
.nav-item{
  border: 0;
  background: transparent;
  color: rgba(245,247,255,0.62);
  padding: 8px 12px;
  border-radius: 999px;
  font: 650 12px/1 var(--sans);
  letter-spacing: .35px;
  cursor:pointer;
}
.nav-item:hover{ color: var(--fg); background: rgba(255,255,255,0.06); }

.controls{ display:flex; align-items:center; gap: 10px; }

.socials{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.social{
  display:inline-flex;
  align-items:center;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,6,10,0.14);
  backdrop-filter: blur(var(--blur));
  color: rgba(245,247,255,0.62);
  text-decoration:none;
  font: 650 12px/1 var(--sans);
  letter-spacing: .25px;
}
.social:hover{
  color: var(--fg);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,6,10,0.18);
  color: rgba(245,247,255,0.62);
  cursor: pointer;
  backdrop-filter: blur(var(--blur));
}
.pill:hover{ color: var(--fg); }
.pill-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.pill[aria-pressed="false"] .pill-dot{
  background: rgba(34,211,238,0.85);
  box-shadow: 0 0 18px rgba(34,211,238,0.25);
}
.pill-text{ font: 650 12px/1 var(--sans); letter-spacing: .3px; }

.lang{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,6,10,0.16);
  color: rgba(245,247,255,0.62);
  backdrop-filter: blur(var(--blur));
  font: 650 12px/1 var(--sans);
  letter-spacing: .3px;
  position: relative;
}
.lang-label{ opacity: .65; }
.lang-select{
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(245,247,255,0.86);
  font: 650 12px/1 var(--sans);
  letter-spacing: .3px;
  cursor: pointer;
  padding-right: 14px;
}
.lang::after{
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(245,247,255,0.42);
  pointer-events: none;
  font: 700 12px/1 var(--sans);
}

/* UI */
.ui{
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events:none;
}

/* Hero / front branding (only visible before first scroll-enter).
   Ghost Cathedral: logo respects aspect ratio, softer drop shadow, calmer tag copy. */
.hero{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 22;
  pointer-events: none;

  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .55s ease, transform .55s ease;
}
.hero.is-off{
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  pointer-events: none;
  visibility: hidden; /* fully out of the way after enter — no layer conflicts with chapters */
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.hero-inner{
  text-align: center;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Logo asset is NOT square (365x291). We fix the height and let width auto to preserve ratio. */
.hero-logo{
  width: auto;
  height: clamp(96px, 13vw, 132px);
  max-width: 80vw;
  object-fit: contain;
  opacity: 0.96;
  filter: drop-shadow(0 22px 70px rgba(34,211,238,0.14));
  margin: 0;
  display: block;
}
.hero-word{
  font: 900 clamp(44px, 6.4vw, 86px)/0.92 var(--mono);
  letter-spacing: 0.06em;
  color: rgba(245,247,255,0.94);
  text-shadow: 0 0 80px rgba(34,211,238,0.14);
}
.hero-tag{
  margin-top: 2px;
  font: 700 13px/1.6 var(--mono);
  letter-spacing: 0.2px;
  color: var(--fg-dim);
}
.hero-scroll-hint{
  margin-top: 18px;
  font: 700 11px/1.3 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(34,211,238,0.75);
  opacity: 0;
  animation: heroHintFade 1.1s ease 1.4s forwards;
}
@keyframes heroHintFade{
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 0.85; transform: translate3d(0, 0, 0); }
}

/* Chapters — "Dossier" layout.
   No box. Title floats large in the upper-left as a display headline.
   Subtitle + bullets sit underneath in a thin column. A vertical stamp
   on the very-left edge marks the chapter as a record in the archive. */
.chapter{
  position: absolute;
  left: var(--ui-inset);
  top: clamp(96px, 16vh, 168px);
  bottom: auto;
  right: auto;
  width: min(720px, calc(100vw - (var(--ui-inset) * 2)));
  padding: 0 0 0 28px;       /* room for the vertical stamp on the left */
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;

  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  transition: opacity .55s ease, transform .55s ease;

  pointer-events: none;
}
/* Soft scrim — fades from dark on the left to transparent on the right.
   Gives text a legible base without drawing a visible box edge. */
.chapter{
  isolation: isolate;
  background-image:
    radial-gradient(140% 110% at 0% 18%,
      rgba(8,12,22,0.82) 0%,
      rgba(8,12,22,0.55) 32%,
      rgba(8,12,22,0.22) 60%,
      rgba(8,12,22,0.00) 86%);
  background-repeat: no-repeat;
}
.chapter > *{ position: relative; z-index: 2; }
.chapter.is-active{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events:auto;
}

/* Pre-entry: hide all chapter dossiers while the hero is still presented. */
body:not(.is-entered) .chapter,
body:not(.is-entered) .chapter.is-active{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Vertical edge stamp — archival marker, rotated 90° */
.chapter::before{
  content: attr(data-chapter);
  position: absolute;
  top: 4px;
  left: 0;
  font: 800 10.5px/1 var(--mono);
  letter-spacing: 3.2px;
  color: rgba(34,211,238,0.62);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  pointer-events: none;
}
/* Cyan tick line under the stamp */
.chapter::after{
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, rgba(34,211,238,0.85), rgba(34,211,238,0));
  pointer-events: none;
}
.chapter > *{
  position: relative;
  z-index: 1;
}

.chapter-kicker{
  font: 800 10.5px/1 var(--mono);
  letter-spacing: 2.2px;
  color: rgba(34,211,238,0.85);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(34,211,238,0.25);
}
.chapter-title{
  margin: 0 0 16px 0;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -1.1px;
  color: var(--fg);
  font-weight: 700;
  max-width: 18ch;
  text-shadow:
    0 0 28px rgba(8,12,22,0.85),
    0 0 60px rgba(34,211,238,0.12);
}
.chapter-sub{
  margin: 0 0 18px 0;
  color: var(--fg-body);
  font-size: 15px;
  line-height: 1.55;
  max-width: 48ch;
  text-shadow: 0 0 18px rgba(8,12,22,0.85);
}

/* (removed) desktop center positioning panels; positioning lives in 3D corridor plates */

.bullets{
  margin: 10px 0 14px;
  padding-left: 18px;
  color: rgba(245,247,255,0.72);
  font: 650 12px/1.55 var(--mono);
}
.bullets li{ margin: 6px 0; }

.status{
  margin-top: 6px;
  color: rgba(34,211,238,0.70);
  font: 800 11px/1.2 var(--mono);
  letter-spacing: .6px;
  text-transform: uppercase;
}

.chapter-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  pointer-events: none; /* only active chapter's actions clickable */
  margin: 6px 0 8px;
}
.chapter.is-active .chapter-actions{
  pointer-events: auto;
}

.btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font: 700 13px/1 var(--sans);
  letter-spacing: .2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.btn:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.btn.primary{
  border-color: rgba(34,211,238,0.22);
  background: linear-gradient(90deg, rgba(109,40,217,0.52), rgba(34,211,238,0.38));
  box-shadow: 0 12px 44px rgba(34,211,238,0.08);
}
.btn.primary:hover{ box-shadow: 0 18px 60px rgba(34,211,238,0.14); }
.btn.ghost{ background: rgba(255,255,255,0.03); }

.micro{
  color: rgba(245,247,255,0.55);
  font: 650 12px/1.4 var(--mono);
  letter-spacing: .2px;
}

/* Threshold value prop — 3-column "teaser" grid below title.
   Each item is a tiny dossier-card: index number + headline. */
.threshold-points{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 680px;
  counter-reset: tp;
}
.threshold-points li{
  counter-increment: tp;
  position: relative;
  padding: 14px 12px 12px;
  color: var(--fg-body);
  font: 600 12.5px/1.45 var(--sans);
  text-shadow: 0 0 14px rgba(8,12,22,0.85);
  border-top: 1px solid rgba(34,211,238,0.32);
  background: linear-gradient(180deg,
    rgba(34,211,238,0.06) 0%,
    rgba(34,211,238,0.00) 60%);
}
.threshold-points li::before{
  content: "0" counter(tp);
  display: block;
  font: 800 10px/1 var(--mono);
  letter-spacing: 1.6px;
  color: rgba(34,211,238,0.85);
  margin-bottom: 8px;
}
/* Thesis line — full-width statement, italic emphasis, no boxed border. */
.threshold-why{
  margin: 22px 0 0;
  max-width: 56ch;
  color: var(--fg);
  font: 600 italic 16px/1.45 var(--sans);
  letter-spacing: -0.1px;
  text-shadow: 0 0 16px rgba(8,12,22,0.85);
  position: relative;
  padding-left: 14px;
}
.threshold-why::before{
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(34,211,238,0.95) 0%,
    rgba(109,40,217,0.65) 100%);
}

/* ============================================================
   Primary Download CTA — top of Edge chapter, high-discoverability
   ============================================================ */
.download-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}
.download-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid rgba(34,211,238,0.55);
  background: linear-gradient(90deg,
    rgba(109,40,217,0.68),
    rgba(34,211,238,0.62));
  color: #06080f;
  text-decoration: none;
  font: 900 13.5px/1 var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow:
    0 14px 40px rgba(34,211,238,0.26),
    0 0 0 1px rgba(34,211,238,0.22);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
}
.download-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 20px 54px rgba(34,211,238,0.36),
    0 0 0 1px rgba(34,211,238,0.45);
}
.download-btn:active{ transform: translateY(0); }
.download-icon{
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 99px;
  background: rgba(6,8,14,0.35);
  color: #f5f7ff;
  font: 900 12px/1 var(--sans);
  animation: dlBob 2.8s ease-in-out infinite;
}
@keyframes dlBob{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(2px); }
}
.download-note{
  font: 600 12px/1.4 var(--mono);
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}

/* Mobile: download row stacks cleanly */
@media (max-width: 820px){
  .download-row{ gap: 10px; }
  .download-btn{ width: 100%; justify-content: center; padding: 14px 18px; }
  .download-note{ width: 100%; text-align: center; }
}

/* ============================================================
   Exhibition — 3D rotating ring of product shots
   ============================================================ */
.exhibit{
  --ex-count: 5;
  --ex-radius: 460px;
  --ex-angle: 0deg;
  position: relative;
  margin: 8px 0 18px;
  padding: 0;
  width: 100%;
}
.exhibit-stage{
  position: relative;
  width: 100%;
  height: clamp(280px, 38vh, 420px);
  perspective: 1600px;
  perspective-origin: 50% 50%;
  overflow: visible;
  /* Soft mask so side cards fade into the void instead of clipping hard */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.exhibit-ring{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 260px;
  margin: -130px 0 0 -230px;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--ex-radius) * -1)) rotateY(var(--ex-angle));
  transition: transform 0.75s cubic-bezier(.22, .9, .28, 1);
  will-change: transform;
}
.exhibit-card{
  position: absolute;
  top: 0;
  left: 0;
  width: 460px;
  height: 260px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8,12,22,0.82);
  cursor: pointer;
  transform:
    rotateY(calc(var(--i) * (360deg / var(--ex-count))))
    translateZ(var(--ex-radius));
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    filter .4s ease,
    opacity .4s ease;
  backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  filter: saturate(0.75) brightness(0.70);
  opacity: 0.72;
}
.exhibit-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
}
.exhibit-card::after{
  /* subtle scanline texture + vignette on non-active cards */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,22,0) 55%, rgba(8,12,22,0.55) 100%),
    repeating-linear-gradient(0deg, rgba(34,211,238,0.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
  transition: opacity .3s ease;
}
.exhibit-card.is-active{
  filter: saturate(1.05) brightness(1);
  opacity: 1;
  border-color: rgba(34,211,238,0.55);
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.25),
    0 30px 90px rgba(34,211,238,0.22),
    0 10px 30px rgba(0,0,0,0.55);
}
.exhibit-card.is-active::after{ opacity: 0.35; }
.exhibit-card:focus-visible{
  outline: 2px solid rgba(34,211,238,0.8);
  outline-offset: 3px;
}

.exhibit-caption{
  margin: 14px auto 0;
  text-align: center;
  max-width: 720px;
  padding: 0 16px;
  min-height: 64px;
}
.exhibit-counter{
  font: 800 10px/1 var(--mono);
  letter-spacing: 2.4px;
  color: rgba(34,211,238,0.85);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.exhibit-counter .exhibit-sep{ color: rgba(255,255,255,0.25); margin: 0 6px; }
.exhibit-title{
  font: 800 18px/1.25 var(--sans);
  letter-spacing: -0.3px;
  color: var(--fg);
  margin-bottom: 4px;
}
.exhibit-cap{
  font: 500 13.5px/1.5 var(--sans);
  color: var(--fg-body);
}

.exhibit-controls{
  position: absolute;
  top: clamp(140px, 19vh, 210px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 6px;
  z-index: 5;
}
.exhibit-arrow{
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,22,0.75);
  backdrop-filter: blur(10px);
  color: var(--fg);
  font: 700 22px/1 var(--sans);
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
  display: grid;
  place-items: center;
}
.exhibit-arrow:hover{
  transform: scale(1.06);
  border-color: rgba(34,211,238,0.55);
  background: rgba(10,14,26,0.92);
}
.exhibit-arrow:active{ transform: scale(0.96); }

@media (max-width: 820px){
  .exhibit{ --ex-radius: 320px; }
  .exhibit-ring,
  .exhibit-card{ width: 300px; height: 180px; }
  .exhibit-ring{ margin: -90px 0 0 -150px; }
  .exhibit-stage{ height: clamp(220px, 32vh, 300px); }
}

/* ============================================================
   Pricing — Edge chapter goes wide for the plan grid
   ============================================================ */
.chapter.chapter-wide{
  width: min(1180px, calc(100vw - (var(--ui-inset) * 2)));
  top: clamp(80px, 12vh, 132px);
}
.chapter.chapter-wide .chapter-title{ max-width: 22ch; }

/* Edge chapter can outgrow the viewport (exhibit + pricing + extras + beta strip).
   When active, turn it into its own scroll container. onWheel hands wheel events
   over once the rail reaches 1.0 so the user can scroll the pricing into view.
   Desktop only — on mobile the whole body scrolls naturally. */
@media (min-width: 821px){
  .chapter.chapter-wide.is-active{
    max-height: calc(100vh - clamp(100px, 14vh, 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,0.35) transparent;
  }
}
.chapter.chapter-wide.is-active::-webkit-scrollbar{ width: 8px; }
.chapter.chapter-wide.is-active::-webkit-scrollbar-track{ background: transparent; }
.chapter.chapter-wide.is-active::-webkit-scrollbar-thumb{
  background: rgba(34,211,238,0.28);
  border-radius: 99px;
}
.chapter.chapter-wide.is-active::-webkit-scrollbar-thumb:hover{ background: rgba(34,211,238,0.50); }

.pricing-grid{
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1140px;
}

.plan{
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg,
    rgba(10,14,26,0.78) 0%,
    rgba(8,12,22,0.92) 100%);
  backdrop-filter: blur(var(--blur));
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plan:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,0.30);
  box-shadow: 0 24px 70px rgba(34,211,238,0.10);
}

/* Featured plan — visual emphasis */
.plan.is-featured{
  border-color: rgba(34,211,238,0.42);
  background:
    linear-gradient(180deg,
      rgba(34,211,238,0.08) 0%,
      rgba(10,14,26,0.92) 60%,
      rgba(8,12,22,0.95) 100%);
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.20),
    0 24px 80px rgba(34,211,238,0.16);
}

.plan-flag{
  position: absolute;
  top: -10px;
  left: 18px;
  font: 800 9.5px/1 var(--mono);
  letter-spacing: 1.6px;
  padding: 5px 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(109,40,217,0.95), rgba(34,211,238,0.95));
  color: #06080f;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(34,211,238,0.32);
}

.plan-tag{
  font: 800 10px/1 var(--mono);
  letter-spacing: 2.2px;
  color: rgba(34,211,238,0.85);
  text-transform: uppercase;
}
.plan-pro .plan-tag{ color: rgba(34,211,238,0.95); }
.plan-elite .plan-tag{ color: rgba(255,210,138,0.92); }

.plan-name{
  font: 700 22px/1.1 var(--sans);
  letter-spacing: -0.5px;
  color: var(--fg);
  margin-top: 2px;
}

.plan-price{
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}
.plan-amount{
  font: 800 36px/1 var(--sans);
  letter-spacing: -1.2px;
  color: var(--fg);
}
.plan-cents{
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.75;
  vertical-align: super;
}
.plan-unit{
  font: 700 13px/1 var(--mono);
  color: var(--fg-dim);
  letter-spacing: 0.4px;
}

.plan-period{
  font: 600 12px/1.4 var(--mono);
  color: rgba(245,247,255,0.55);
  letter-spacing: 0.2px;
}

.plan-features{
  list-style: none;
  margin: 8px 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
}
.plan-features li{
  position: relative;
  padding-left: 18px;
  font: 600 13px/1.45 var(--sans);
  color: var(--fg-body);
}
.plan-features li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 8px;
  height: 1px;
  background: rgba(34,211,238,0.85);
}
.plan-elite .plan-features li::before{ background: rgba(255,210,138,0.92); }

.plan-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 10px;
  font: 800 12.5px/1 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.plan-cta-primary{
  border: 1px solid rgba(34,211,238,0.45);
  background: linear-gradient(90deg,
    rgba(109,40,217,0.55),
    rgba(34,211,238,0.50));
  color: var(--fg);
  box-shadow: 0 12px 36px rgba(34,211,238,0.18);
}
.plan-cta-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 50px rgba(34,211,238,0.30);
}
.plan-cta-ghost{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
}
.plan-cta-ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
}

/* Add-on + Lifetime row */
.pricing-extras{
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1140px;
}
.extra{
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,14,26,0.78);
  backdrop-filter: blur(var(--blur));
  display: grid;
  gap: 6px;
}
.extra-addon{
  border-color: rgba(255,210,138,0.32);
  background:
    linear-gradient(135deg,
      rgba(255,210,138,0.06) 0%,
      rgba(10,14,26,0.85) 60%);
}
.extra-lifetime{
  border-color: rgba(156,140,255,0.32);
  background:
    linear-gradient(135deg,
      rgba(156,140,255,0.06) 0%,
      rgba(10,14,26,0.85) 60%);
}
.extra-tag{
  font: 800 10px/1 var(--mono);
  letter-spacing: 2.0px;
  color: rgba(34,211,238,0.85);
  text-transform: uppercase;
}
.extra-addon .extra-tag{ color: rgba(255,210,138,0.92); }
.extra-lifetime .extra-tag{ color: rgba(196,178,255,0.92); }
.extra-name{
  font: 700 18px/1.1 var(--sans);
  letter-spacing: -0.3px;
  color: var(--fg);
}
.extra-body{
  font: 600 12.5px/1.5 var(--sans);
  color: var(--fg-body);
  max-width: 56ch;
}
.extra-price{
  font: 800 14px/1 var(--mono);
  color: var(--fg);
  letter-spacing: 0.4px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.extra-sep{ color: rgba(255,255,255,0.25); }

/* Beta status strip */
.beta-strip{
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  background: rgba(10,14,26,0.65);
  font: 700 11.5px/1 var(--mono);
  color: var(--fg-body);
  letter-spacing: 0.4px;
}
.beta-dot{
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(34,211,238,0.95);
  box-shadow: 0 0 12px rgba(34,211,238,0.65);
  animation: betaPulse 2.4s ease-in-out infinite;
}
@keyframes betaPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%    { opacity: .55; transform: scale(0.85); }
}
.beta-link{
  color: rgba(34,211,238,0.95);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.beta-link:hover{ text-shadow: 0 0 14px rgba(34,211,238,0.55); }

/* Mobile: pricing stacks */
@media (max-width: 820px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-extras{ grid-template-columns: 1fr; }
  .chapter.chapter-wide{ width: auto; }
}

/* Access CTA is Discord; no mailto gating needed */

/* ============================================================
   Persistent CTA pill in the topbar — visible from any chapter
   ============================================================ */
.cta-pill{
  border: 1px solid rgba(34,211,238,0.32);
  background: linear-gradient(90deg,
    rgba(109,40,217,0.34),
    rgba(34,211,238,0.30));
  color: var(--fg);
  font: 800 11.5px/1 var(--mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.05), 0 8px 28px rgba(34,211,238,0.10);
}
.cta-pill:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg,
    rgba(109,40,217,0.55),
    rgba(34,211,238,0.50));
  border-color: rgba(34,211,238,0.55);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.18), 0 14px 40px rgba(34,211,238,0.18);
}
.cta-pill .cta-arrow{
  font-size: 13px;
  color: rgba(34,211,238,0.95);
  text-shadow: 0 0 12px rgba(34,211,238,0.55);
}

/* ============================================================
   Vertical chapter progress rail — right edge
   ============================================================ */
.progress-rail{
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  z-index: 32;
  padding: 12px 0;
  pointer-events: auto;
}
.progress-rail .prog-line{
  position: absolute;
  right: 9px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}
.progress-rail .prog-fill{
  position: absolute;
  right: 9px;
  top: 18px;
  width: 1px;
  height: 0%;
  background: linear-gradient(180deg,
    rgba(34,211,238,0.95),
    rgba(109,40,217,0.65));
  box-shadow: 0 0 8px rgba(34,211,238,0.55);
  transition: height .35s ease;
  pointer-events: none;
}
.prog-dot{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fg-dim);
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: color .2s ease;
}
.prog-dot .prog-label{
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease;
  text-shadow: 0 0 12px rgba(8,12,22,0.85);
  white-space: nowrap;
}
.prog-dot .prog-tick{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(245,247,255,0.20);
  box-shadow: 0 0 0 1px rgba(245,247,255,0.10);
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.prog-dot:hover{ color: var(--fg); }
.prog-dot:hover .prog-label{ opacity: 1; transform: translateX(0); }
.prog-dot:hover .prog-tick{ background: rgba(34,211,238,0.65); transform: scale(1.15); }
.prog-dot.is-active{ color: var(--fg); }
.prog-dot.is-active .prog-label{ opacity: 1; transform: translateX(0); color: rgba(34,211,238,0.95); }
.prog-dot.is-active .prog-tick{
  background: rgba(34,211,238,0.95);
  box-shadow: 0 0 0 4px rgba(34,211,238,0.16), 0 0 14px rgba(34,211,238,0.55);
  transform: scale(1.2);
}

/* Archive stamp — bottom-left, always-on, very subtle */
.arc-stamp{
  position: fixed;
  left: 18px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 2.2px;
  color: rgba(245,247,255,0.32);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  transition: opacity .4s ease;
  text-shadow: 0 0 10px rgba(8,12,22,0.85);
}
.arc-stamp .arc-dot{
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: rgba(34,211,238,0.75);
  box-shadow: 0 0 8px rgba(34,211,238,0.55);
  animation: arcPulse 3.2s ease-in-out infinite;
}
@keyframes arcPulse{
  0%,100%{ opacity: .45; transform: scale(1); }
  50%    { opacity: 1;  transform: scale(1.15); }
}

/* Read-mode auto-dim — after idle, fade non-essential chrome so copy breathes */
body.is-reading .topbar,
body.is-reading .progress-rail,
body.is-reading .brandwords,
body.is-reading .arc-stamp{
  opacity: 0.22;
  transition: opacity .6s ease;
}
.topbar, .progress-rail, .brandwords, .arc-stamp{
  transition: opacity .35s ease;
}
body.is-reading .topbar:hover,
body.is-reading .progress-rail:hover{
  opacity: 1;
}

/* Per-chapter accent recolor of the dossier title — body class is set by JS */
body.ch-threshold .chapter.is-active .chapter-title,
body.ch-threshold .chapter.is-active .chapter-kicker{ color: #c9b6ff; text-shadow: 0 0 26px rgba(8,12,22,0.85), 0 0 60px rgba(156,140,255,0.18); }
body.ch-memory    .chapter.is-active .chapter-kicker{ color: #4fe4f0; }
body.ch-replay    .chapter.is-active .chapter-kicker{ color: #ff9ed4; }
body.ch-replay    .chapter.is-active .chapter-title{ text-shadow: 0 0 26px rgba(8,12,22,0.85), 0 0 60px rgba(255,158,212,0.16); }
body.ch-structure .chapter.is-active .chapter-kicker{ color: #ffc878; }
body.ch-structure .chapter.is-active .chapter-title{ text-shadow: 0 0 26px rgba(8,12,22,0.85), 0 0 60px rgba(255,200,120,0.16); }
body.ch-edge      .chapter.is-active .chapter-kicker{ color: #ffd28a; }
body.ch-edge      .chapter.is-active .chapter-title{ text-shadow: 0 0 26px rgba(8,12,22,0.85), 0 0 60px rgba(255,210,138,0.20); }

/* Navigation hint */
.hint{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.14);
  background: rgba(6, 7, 12, 0.22);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 18px 70px rgba(0,0,0,.55);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  text-align: center;
}
.hint.is-on{ opacity: 1; }
.hint-title{
  font: 900 11px/1 var(--mono);
  letter-spacing: 1.0px;
  color: rgba(34,211,238,0.80);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hint-body{
  font: 700 12px/1.35 var(--mono);
  color: rgba(245,247,255,0.72);
}

/* HUD */
.hud{
  position: fixed;
  left: var(--ui-inset);
  bottom: var(--ui-inset);
  z-index: 50;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(34,211,238,0.12);
  background: rgba(6, 7, 12, 0.26);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 18px 70px rgba(0,0,0,.55);

  opacity: 0;
  transform: translate3d(0,8px,0);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
  min-width: 260px;
  max-width: 420px;
}
.hud.is-on{ opacity: 1; transform: translate3d(0,0,0); }
.hud-title{
  font: 800 12px/1.2 var(--mono);
  letter-spacing: .6px;
  color: rgba(245,247,255,0.82);
  margin-bottom: 6px;
}
.hud-sub{
  white-space: pre-line;
  color: rgba(245,247,255,0.72);
  font: 700 13px/1.55 var(--mono);
}

/* Panel */
.panel{
  position: fixed;
  right: var(--ui-inset);
  bottom: var(--ui-inset);
  width: min(520px, calc(100vw - (var(--ui-inset) * 2)));
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,211,238,0.16);
  background: rgba(6, 7, 12, 0.26);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 22px 90px rgba(0,0,0,.6);
  z-index: 80;

  opacity: 0;
  transform: translate3d(0,10px,0);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.panel.is-on{ opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
.panel-kicker{
  font: 900 11px/1 var(--mono);
  letter-spacing: 1.2px;
  color: rgba(34,211,238,0.78);
  margin-bottom: 10px;
}
.panel-title{
  font: 800 14px/1.25 var(--mono);
  letter-spacing: .4px;
  color: rgba(245,247,255,0.86);
  margin-bottom: 10px;
}
.panel-body{
  white-space: pre-line;
  font: 700 13px/1.55 var(--mono);
  color: rgba(245,247,255,0.72);
  margin-bottom: 12px;
}
.panel-actions{ display:flex; justify-content:flex-end; }

/* Scanline */
.scanline{
  position: fixed;
  left: -20%;
  right: -20%;
  top: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.55), transparent);
  box-shadow: 0 0 28px rgba(34,211,238,0.12);
  opacity: 0;
  z-index: 90;
  pointer-events:none;
}
.scanline.is-on{
  opacity: 1;
  animation: scanSweep 900ms ease both;
}
@keyframes scanSweep{
  0%{ transform: translate3d(0,0,0) scaleX(.85); opacity: 0; }
  18%{ opacity: 1; }
  50%{ transform: translate3d(0, 210px, 0) scaleX(1); opacity: .95; }
  100%{ transform: translate3d(0, 520px, 0) scaleX(1.05); opacity: 0; }
}

/* Beacons */
.beacons{
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none; /* container */
}
.beacon{
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  max-width: 440px;
  padding: 10px 10px 9px;
  border-radius: 12px;
  border: 1px solid rgba(34,211,238,0.16);
  background: rgba(6, 7, 12, 0.28);
  backdrop-filter: blur(10px);

  opacity: 0;
  transition: opacity .20s ease;
  pointer-events: auto; /* clickable */
  cursor: pointer;
}
.beacon:hover{ border-color: rgba(34,211,238,0.26); }
.beacon.is-on{ opacity: 1; }
.beacon-title{
  font: 900 11px/1 var(--mono);
  letter-spacing: 1.1px;
  color: rgba(34,211,238,0.75);
  margin-bottom: 7px;
}
.beacon-body{
  font: 700 13px/1.55 var(--mono);
  color: rgba(245,247,255,0.72);
  white-space: pre-line;
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lightbox.is-on{ opacity: 1; pointer-events: auto; }
.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
}
.lightbox-inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: min(1100px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 16px;
  border: 1px solid rgba(34,211,238,0.16);
  background: rgba(6, 7, 12, 0.22);
  box-shadow: 0 40px 160px rgba(0,0,0,.75);
  padding: 12px 12px 10px;
  overflow: hidden;
}
.lightbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 4px 4px 10px;
}
.lightbox-title{
  font: 900 12px/1 var(--mono);
  letter-spacing: 1.0px;
  color: rgba(34,211,238,0.82);
}
.lightbox-x{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(245,247,255,0.86);
  cursor: pointer;
  font: 900 18px/1 var(--sans);
}
.lightbox-x:hover{ background: rgba(255,255,255,0.08); }
.lightbox-img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  display:block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
}
.lightbox-cap{
  padding: 10px 4px 2px;
  font: 700 13px/1.55 var(--mono);
  color: rgba(245,247,255,0.72);
  white-space: pre-line;
}

/* Mobile / small-screen fallback (simple reading layout)
   Applies to phones + landscape-short viewports. */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape){
  body{
    overflow: auto;
    overflow-x: hidden; /* prevent any accidental horizontal clipping/scroll */
    -webkit-overflow-scrolling: touch;

    /* iOS safe-area (rounded corners / notch): keep content away from the left/right cutouts */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* kill heavy canvas on mobile */
  #world{ display:none; }

  .topbar{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 10px;
    mix-blend-mode: normal;
    flex-wrap: wrap;
    gap: 10px;

    /* Make it read like a proper mobile header bar */
    background: rgba(5,6,10,0.88);
    backdrop-filter: blur(var(--blur));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 14px 14px;
    z-index: 100;
  }

  .controls{
    width: 100%;
    justify-content: flex-end;
  }

  .nav{ display:none; }
  .socials{ display:none; }
  .bw{ display:none; }

  /* Hero (centered logo) not needed on mobile */
  .hero{ display:none; }

  .ui{
    position: relative;
    inset: auto;
    pointer-events: auto;

    /* Use padding for horizontal gutters (safer than margins with safe-area + prevents clipping) */
    padding: 14px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));
  }

  .chapter{
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin: 14px 0;

    /* strip the card look */
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;

    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* IMPORTANT: `.chapter.is-active` is more specific and still applies a -50% translate on desktop.
     Override explicitly for mobile, otherwise the active chapter can slide left and get clipped. */
  .chapter.is-active{ transform: none; }

  .chapter::before{ display:none; }

  .chapter-title{
    text-shadow: none;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.3px;
  }
  .chapter-sub{ font-size: 14px; line-height: 1.7; }

  .chapter-actions{ pointer-events: auto; }
  .hint{ display:none; }

  /* product media */
  .m-media{ display:block; margin: 12px 0 10px; }
  .m-shot{
    width: 100%;
    height: auto;
    display:block;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.20);
  }

  /* Mobile-only copy blocks */
  [data-desktop-only]{ display:none; }

  .m-info{ display:block; margin: 12px 0 6px; }
  .m-info-title{
    margin: 12px 0 8px;
    font: 900 12px/1 var(--mono);
    letter-spacing: 1.0px;
    text-transform: uppercase;
    color: rgba(34,211,238,0.78);
  }
  .m-list{
    margin: 0 0 8px;
    padding-left: 18px;
    color: rgba(245,247,255,0.76);
    font: 700 13px/1.65 var(--mono);
  }
  .m-list li{ margin: 6px 0; }

  /* footer socials */
  .m-footer{
    display:flex;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .m-social{
    display:inline-flex;
    align-items:center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(245,247,255,0.72);
    text-decoration:none;
    font: 800 12px/1 var(--mono);
    letter-spacing: .4px;
  }
  .m-social:hover{ background: rgba(255,255,255,0.07); color: var(--fg); }

  /* optional: less clutter */
  .hud{ display:none; }
  .panel{ display:none; }
}