/* ===== EasyLife Studio - Product-first Dark: precision, product, one arc of sky ===== */

:root {
  --bg: #0A0A0E;
  --bg-2: #0E0D14;
  --panel: #131118;
  --text: #F2F1F7;
  --dim: #9B99AE;
  --accent: #7C5CFF;
  --accent-soft: #A18EFF;
  --hair: rgba(242, 241, 247, 0.08);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
  --logo: "Arial Black", "Segoe UI", var(--font);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent-soft); }

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 em, h2 em { font-style: normal; color: var(--accent-soft); }

.journey-word {
  display: inline-block;
  padding: 0 0.16em 0.2em 0.03em;
  margin: 0 -0.16em -0.2em -0.03em;
  overflow: visible;
  color: var(--word-start);
  background-image: linear-gradient(105deg, var(--word-start), var(--word-end));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.word-frustration { --word-start: #FF766C; --word-end: #FFAA62; }
.word-carefully { --word-start: #B09CFF; --word-end: #7352D1; }
.word-carry { --word-start: #69B7FF; --word-end: #7477F2; }
.word-useful { --word-start: #62D5D0; --word-end: #4FAAB8; }
.word-progress { --word-start: #5C9FFF; --word-end: #A18EFF; }

/* ---------- quiet deep space ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  transition: background-color 0.8s ease;
}
.sky::before {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: var(--nebula-opacity, 0.32);
  background:
    radial-gradient(circle at 18% 35%, rgba(124, 92, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(242, 241, 247, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(161, 142, 255, 0.16) 0 1px, transparent 2px);
  background-size: 170px 170px, 240px 240px, 310px 310px;
  filter: brightness(var(--star-brightness, 1));
  animation: sky-drift 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
  z-index: 1;
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--sky-texture-opacity, 0);
  background: url("../space-texture.png") center / cover no-repeat;
  will-change: opacity;
}

/* Final-pass dither: it must sit above shadows and glows to break 8-bit banding. */
.js-story body::after {
  content: "";
  position: fixed;
  inset: -2%;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  animation: final-grain-shift .9s steps(2) infinite;
  will-change: transform;
}

@keyframes final-grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-1%, 1%, 0); }
  100% { transform: translate3d(1%, -1%, 0); }
}

@keyframes sky-drift { to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.04); } }

/* the single cosmic gesture - an arc of atmosphere (chapter 05 + landing) */
.arc {
  position: absolute;
  left: 50%;
  bottom: -190svh;
  transform: translateX(-50%);
  width: max(220svh, 160vw);
  height: 220svh;
  border-radius: 50%;
  pointer-events: none;
  border-top: 1px solid rgba(161, 142, 255, 0.35);
  box-shadow:
    0 -1px 30px rgba(124, 92, 255, 0.25),
    0 -20px 140px rgba(124, 92, 255, 0.12),
    inset 0 30px 90px rgba(124, 92, 255, 0.07);
  will-change: transform, opacity;
}

/* ---------- chrome ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem clamp(1.5rem, 4vw, 3.5rem);
}
.site-header::after {
  content: "";
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(161,142,255,.34), transparent 38%, transparent 62%, rgba(161,142,255,.18));
}
/* Content passes beneath the fixed bar at the foot of the page. Without this it
   collides with the contact heading instead of sliding cleanly out of sight. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--bg) 45%, rgba(10, 10, 14, 0));
}

.wordmark {
  font-family: var(--logo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}
.wordmark-dot { color: #7352D1; font-size: 0.72em; margin: 0 0.14em; vertical-align: 0.1em; }
.wordmark-accent { color: #7352D1; }

.nav-contact {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 0.65em 1.4em;
  transition: color 0.25s, border-color 0.25s;
}
.nav-contact:hover { color: var(--text); border-color: var(--accent); }

.meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.meta.small { letter-spacing: 0.16em; font-size: 0.62rem; display: block; margin-top: 0.15rem; }

.sec-no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.6rem;
}

.lede {
  color: var(--dim);
  font-size: 1.05rem;
  max-width: 34em;
  margin: 1.5rem auto 0;
}

/* ---------- beats: short single-idea lines (ch1, ch4) ---------- */

.beat {
  color: var(--dim);
  font-size: 1.15rem;
  max-width: 30em;
  margin: 1.1rem auto 0;
}
.beat .n {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--accent-soft);
  margin-right: 0.6em;
}

/* ---------- chapter nav & progress ---------- */

.chapter-nav {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.8rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.chapter-nav.on { opacity: 1; pointer-events: auto; visibility: visible; }
.chapter-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.8;
  padding: 0.2rem 0.3rem;
  transition: opacity 0.25s, color 0.25s;
}
.chapter-nav button::after {
  content: "";
  width: 0;
  height: 1px;
  margin-left: .15rem;
  background: var(--accent-soft);
  box-shadow: 0 0 10px rgba(161,142,255,.65);
  transition: width .32s ease;
}
.chapter-nav button.is-active::after { width: 18px; }
.chapter-nav button span { color: var(--dim); }
.chapter-nav button:hover { opacity: 1; }
.chapter-nav button.is-active { opacity: 1; color: var(--text); }
.chapter-nav button.is-active span { color: var(--accent-soft); }

.j-progress {
  position: fixed;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: 1.6rem;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.j-progress.on { opacity: 1; visibility: visible; }
.j-track {
  width: clamp(70px, 9vw, 130px);
  height: 1px;
  background: var(--hair);
  overflow: hidden;
}
.j-track i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--accent);
}
.j-progress b { font-weight: 500; color: var(--text); }
.j-progress em {
  display: none;
  font-style: normal;
  color: var(--accent-soft);
  text-transform: uppercase;
}
.j-progress.on .j-track { box-shadow: 0 0 16px rgba(124,92,255,.35); }
.j-track i { box-shadow: 0 0 12px var(--accent); }

/* ---------- journey scaffolding ---------- */

#journey { position: relative; z-index: 1; }
.j-pin { position: relative; }
.j-layer {
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding: 12svh clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  text-align: center;
}
.j-layer::before {
  display: none;
}
#ch0 { --scene-glow: rgba(124,92,255,.22); }
#ch1 { --scene-glow: rgba(65,102,255,.2); }
#ch2 { --scene-glow: rgba(123,72,255,.25); }
#ch3 { --scene-glow: rgba(187,80,255,.21); }
#ch4 { --scene-glow: rgba(50,105,165,.18); }
#ch5 { --scene-glow: transparent; }
.j-inner-center { position: relative; z-index: 1; }
#ch2 .j-inner-center { max-width: 70rem; }

.range-inner { max-width: 64rem; }

.range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 2.1rem auto 0;
  max-width: 56rem;
  text-align: left;
}
.range-card {
  position: relative;
  min-height: 11.5rem;
  padding: 1.35rem 1.5rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(242,241,247,.09);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(25,23,38,.78), rgba(13,14,22,.62));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.range-card.work { background: radial-gradient(76% 110% at 100% 0%, rgba(101,112,255,.2), transparent 62%), linear-gradient(145deg, rgba(27,25,45,.92), rgba(13,14,22,.74)); }
.range-card.everyday { background: radial-gradient(76% 110% at 100% 0%, rgba(55,176,197,.18), transparent 62%), linear-gradient(145deg, rgba(18,34,43,.92), rgba(13,14,22,.74)); }
.range-card.share { background: radial-gradient(76% 110% at 100% 0%, rgba(197,88,174,.18), transparent 62%), linear-gradient(145deg, rgba(37,22,40,.92), rgba(13,14,22,.74)); }
.range-card.play { background: radial-gradient(76% 110% at 100% 0%, rgba(214,160,92,.16), transparent 62%), linear-gradient(145deg, rgba(38,31,24,.9), rgba(13,14,22,.74)); }
.range-card.work { border-top-color: rgba(116,126,255,.5); }
.range-card.everyday { border-top-color: rgba(76,190,206,.46); }
.range-card.share { border-top-color: rgba(207,102,184,.45); }
.range-card.play { border-top-color: rgba(220,169,102,.42); }
.range-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.75), transparent);
  transform: scaleX(.28);
  opacity: .5;
  transition: transform .35s ease, opacity .35s ease;
}
.range-card:hover {
  transform: translateY(-4px);
  border-color: rgba(161,142,255,.34);
  filter: brightness(1.1);
  box-shadow: 0 18px 55px rgba(0,0,0,.28), 0 0 35px rgba(124,92,255,.08);
}
.range-card:hover::after { transform: scaleX(1); opacity: 1; }
.range-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.range-meta span, .range-meta em, .range-card small {
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.range-meta span { color: var(--accent-soft); }
.range-card.everyday .range-meta span, .range-card.everyday small { color: #69bec9; }
.range-card.share .range-meta span, .range-card.share small { color: #d18bc4; }
.range-card.play .range-meta span, .range-card.play small { color: #d7aa70; }
.range-card.work::after { background: linear-gradient(90deg, transparent, #7a82ff, transparent); }
.range-card.everyday::after { background: linear-gradient(90deg, transparent, #56c3cf, transparent); }
.range-card.share::after { background: linear-gradient(90deg, transparent, #d56ab9, transparent); }
.range-card.play::after { background: linear-gradient(90deg, transparent, #d9aa6d, transparent); }
.range-meta em { color: var(--dim); font-style: normal; }
.range-card h3 { font-size: 1.28rem; margin-bottom: .45rem; }
.range-card > p:not(.range-meta) { color: #aaa8ba; font-size: .96rem; line-height: 1.5; max-width: 31em; }
.range-card small { display: block; color: rgba(177,160,255,.88); margin-top: .95rem; letter-spacing: .06em; }

.build-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  max-width: 48rem;
  margin: 2.35rem auto 0;
  list-style: none;
  text-align: left;
}
.build-track::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 1.15rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161,142,255,.7), transparent);
  box-shadow: 0 0 16px rgba(124,92,255,.45);
}
.build-track li {
  position: relative;
  min-width: 0;
  padding: 2.1rem .8rem 0;
  text-align: center;
}
.build-track li::before {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  left: 50%; top: 1.15rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 5px rgba(124,92,255,.12), 0 0 18px rgba(161,142,255,.75);
  animation: signal-pulse 2.4s ease-in-out infinite alternate;
}
.build-track li:nth-child(2)::before { animation-delay: .45s; }
.build-track li:nth-child(3)::before { animation-delay: .9s; }
.build-track span, .build-track em {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.build-track span { color: var(--accent-soft); }
.build-track b { display: block; margin: .32rem 0 .2rem; font-size: 1.05rem; font-weight: 600; }
.build-track em { color: #aaa8ba; font-size: .72rem; font-style: normal; letter-spacing: .02em; text-transform: none; }
@keyframes signal-pulse { to { opacity: .5; transform: translate(-50%, -50%) scale(.72); } }

.js-story #journey { height: 1380svh; }
/* A phone needs far less scroll distance to read the same six chapters. */
@media (max-width: 760px) { .js-story #journey { height: 900svh; } }

/* The grain repaints the whole viewport twice a second. It only exists to dither
   the gradients, which it does just as well standing still, so phones keep the
   texture and skip the repaint. */
@media (max-width: 900px) {
  .js-story body::after { animation: none; }
  .sky::before { animation: none; }

  /* Nothing scrubs here any more, so no layer needs pinning in GPU memory. */
  .arc,
  .sky::before,
  .sky::after,
  .window-stage,
  .phone-stage,
  .mask > span { will-change: auto; }

  /* The arc was a 220svh circle, by far the largest surface on the page. */
  .arc {
    bottom: -118svh;
    width: max(140svh, 150vw);
    height: 140svh;
  }

  .scene-end { padding-top: 7rem; }

  /* The chapter rail belongs to the pinned journey, but the progress readout still
     tells you where you are in the story, so it stays. */
  .chapter-nav { display: none; }
  .j-progress {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    gap: .6rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: rgba(10, 10, 14, .72);
    border: 1px solid rgba(242, 241, 247, .07);
  }
  .j-progress em { display: block; font-style: normal; color: var(--text); letter-spacing: .12em; }
  .j-track { width: 54px; }
  .j-track i { transition: transform .5s ease; }

  .j-layer {
    min-height: 0;
    padding: 5.5rem clamp(1.25rem, 5vw, 2rem);
  }
  #ch0 { min-height: 88svh; padding-top: 7.5rem; }
  .j-layer + .j-layer { border-top: 1px solid rgba(242, 241, 247, 0.05); }
  .scroll-hint { position: static; transform: none; margin-top: 2.5rem; }

  /* Sections arrive once, on the way down, and stay put. */
  .reveal-m {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal-m.in { opacity: 1; transform: none; }

  /* The product mockups arrive with a little more travel and a slight turn, the way
     they do on the desktop journey. */
  .window-stage.reveal-m, .phone-stage.reveal-m {
    transform: translateY(48px) scale(.94);
    transition-duration: .85s;
  }
  .window-stage.reveal-m.in, .phone-stage.reveal-m.in { transform: none; }

  /* The sky travels through the chapters. Six transitions for the whole visit,
     rather than a filter recomputed on every scroll frame. */
  .sky {
    transition: filter .9s ease, opacity .9s ease;
    will-change: auto;
  }
  html[data-ch="1"] .sky { filter: hue-rotate(-12deg); }
  html[data-ch="2"] .sky { filter: hue-rotate(-26deg); }
  html[data-ch="3"] .sky { filter: hue-rotate(-46deg); }
  html[data-ch="4"] .sky { filter: hue-rotate(-58deg); }
  html[data-ch="5"] .sky { filter: hue-rotate(-34deg); }
  html[data-ch="6"] .sky { filter: hue-rotate(-18deg); }
  html[data-ch="1"] .sky::before { opacity: .34; }
  html[data-ch="2"] .sky::before { opacity: .46; }
  html[data-ch="3"] .sky::before { opacity: .56; }
  html[data-ch="4"] .sky::before { opacity: .5; }
  html[data-ch="5"] .sky::before { opacity: .66; }
  html[data-ch="6"] .sky::before { opacity: .6; }
  .sky::before { transition: opacity .9s ease; }
}
.js-story .j-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.js-story .j-layer {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
  opacity: 0;
  will-change: transform, opacity;
}
.js-story .step { opacity: 0; }

.j-inner-center {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.j-layer h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); max-width: 18em; margin: 0 auto; }

/* masked line reveals */
.mask { display: block; overflow: hidden; }
.mask > span { display: block; will-change: transform; }
h1 .mask {
  line-height: 1.08;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
#ch0 h1 .mask { overflow: visible; }

.scroll-hint {
  position: absolute;
  bottom: 3.5svh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.7;
}
.scroll-hint.on { animation: scroll-breathe 2.8s ease-in-out infinite; }
@keyframes scroll-breathe {
  0%, 100% { opacity: .42; transform: translate(-50%, 0); text-shadow: 0 0 0 rgba(161,142,255,0); }
  50% { opacity: 1; transform: translate(-50%, -6px); text-shadow: 0 0 14px rgba(161,142,255,.38); }
}

/* ---------- ch0: hero ---------- */

.meta { display: block; margin-bottom: 2rem; }
#heroTitle { font-size: clamp(3.2rem, 7vw, 6rem); text-shadow: 0 12px 55px rgba(0,0,0,.9); }
.hero-primary, .hero-answer { position: relative; display: block; width: 100%; }
.hero-primary { text-align: center; }
.hero-answer { margin-top: .18em; font-size: .92em; text-align: center; }
.hero-bloom {
  display: none;
}
.hero-bloom.on {
  animation: hero-breathe 5.5s ease-in-out infinite alternate;
}
@keyframes hero-breathe {
  to { opacity: .68; transform: translate(-50%, -50%) scale(1.08); }
}
#heroTitle em {
  color: transparent;
  background: linear-gradient(100deg, #eeeaff 0%, #9d82ff 42%, #c375ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(124,92,255,.38));
  background-size: 220% 100%;
}
.hero-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 43rem;
  margin: 2.8rem auto 0;
  border-top: 1px solid var(--hair);
}
.hero-principles p { padding: 1.2rem 1rem 0; text-align: center; }
.hero-principles span {
  display: block;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--accent-soft);
}
.hero-principles b { display: block; margin-top: .25rem; font-size: 1rem; font-weight: 550; }

.listening-signals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3.2rem auto 0;
  max-width: 52rem;
  text-align: left;
}
.listening-signals::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(91,128,255,.65), rgba(161,142,255,.45), transparent);
}
.listening-signals article { padding-top: 1.25rem; }
.listening-signals span { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: #809cff; }
.listening-signals b { display: block; margin: .45rem 0 .45rem; font-size: 1.12rem; font-weight: 600; }
.listening-signals p { color: var(--dim); font-size: .86rem; line-height: 1.5; }

.hero-facts {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
}
.fact { text-align: center; }
.fact b { display: block; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.fact span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* product mockups, moved into ch2 / ch3 */
.window-stage {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: 2.6rem auto 0;
  perspective: 1200px;
  will-change: transform, opacity;
}
.window {
  position: relative;
  width: 100%;
  border-radius: 10px;
  background: linear-gradient(175deg, #17151F, #100E17);
  border: 1px solid rgba(242, 241, 247, 0.1);
  box-shadow: 0 1px 0 rgba(242, 241, 247, 0.1) inset, 0 40px 100px rgba(0, 0, 0, 0.72), 0 0 70px rgba(124,92,255,.18);
  overflow: hidden;
  text-align: left;
  transform: rotateX(3deg);
}
.window::after, .mini-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, rgba(210,200,255,.13) 48%, transparent 68%);
  transform: translateX(-110%);
  animation: product-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes product-sheen { 0%, 38% { transform: translateX(-110%); } 72%, 100% { transform: translateX(110%); } }
.win-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hair);
}
.win-bar i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.win-bar i:nth-child(1) { background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar em { font-style: normal; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--dim); }

.win-body { display: grid; grid-template-columns: 220px 1fr; min-height: 430px; }
.side { border-right: 1px solid var(--hair); padding: 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.side a { font-size: 0.9rem; color: var(--dim); padding: 0.5em 0.75em; border-radius: 5px; cursor: default; }
.side a.on { color: var(--text); background: linear-gradient(90deg, rgba(73,112,255,.22), rgba(124,92,255,.08)); border-left: 2px solid #6d8cff; }
.side-foot {
  margin-top: auto;
  padding: 1rem .7rem .2rem;
  border-top: 1px solid var(--hair);
}
.side-foot > p:first-child {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .55rem;
}
.side-foot dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .42rem 0;
  border-bottom: 1px solid rgba(242,241,247,.05);
}
.side-foot dt { font-size: .64rem; color: var(--dim); }
.side-foot dd { font-family: var(--mono); font-size: .61rem; color: var(--text); }
.side-foot dl > div:first-child dd, .side-foot dl > div:last-child dd { color: #72d2d8; }
.side-sync {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  font-family: var(--mono);
  font-size: .52rem;
  color: var(--dim);
}
.side-sync i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 8px rgba(40,200,64,.38);
}
.canvas { padding: 1.65rem 1.9rem; }
.canvas h3 { font-size: 1.15rem; }
.canvas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sync { font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.1em; color: var(--dim); }

.kpis { display: flex; gap: 0.9rem; margin: 1rem 0 1rem; }
.kpi { flex: 1; border: 1px solid var(--hair); border-radius: 8px; padding: 0.75rem 0.9rem; }
.kpi b { display: block; font-size: 1.38rem; font-weight: 600; letter-spacing: -0.02em; }
.kpi.hot b { color: var(--accent-soft); }
.kpi.cool {
  background: linear-gradient(145deg, rgba(34,116,145,.1), transparent 72%);
  border-color: rgba(80,181,198,.18);
}
.kpi.cool b { color: #72d2d8; }
.kpi span { display: block; font-size: 0.72rem; line-height: 1.35; color: var(--dim); margin-top: 0.25rem; }

/* forecast chart: recorded vs estimate, never mixed */
.chart { border: 1px solid var(--hair); border-radius: 8px; padding: 0.8rem 0.9rem; }
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.62rem;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.legend { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; white-space: nowrap; }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--accent); margin-right: 0.35rem; vertical-align: 0.2em; }
.legend .lg-est { border-top-style: dashed; border-color: var(--dim); margin-left: 0.9rem; }

.fc { width: 100%; height: 96px; display: block; }
.fc-grid { stroke: rgba(242, 241, 247, 0.05); }
.fc-today { stroke: rgba(242, 241, 247, 0.18); stroke-dasharray: 2 3; }
.fc-live { stroke: #718cff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(113,140,255,.35)); }
.fc-est { stroke: #63c0ba; stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-foot { font-size: 0.6rem; line-height: 1.5; color: var(--dim); margin-top: 0.5rem; }
.chart-foot b { color: var(--text); font-weight: 500; }

.alert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  color: var(--dim);
  border: 1px solid rgba(220, 158, 76, 0.28);
  background: linear-gradient(90deg, rgba(220,158,76,.1), rgba(124,92,255,.04));
  border-radius: 7px;
  padding: 0.6rem 0.8rem;
}
.alert .dot { width: 6px; height: 6px; border-radius: 50%; background: #e0a258; box-shadow: 0 0 10px rgba(224,162,88,.45); flex: none; }

.phone-stage {
  position: relative;
  width: clamp(260px, 22vw, 305px);
  margin: 2.6rem auto 0;
  perspective: 1000px;
  will-change: transform, opacity;
}
.mini-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9/15.2;
  border-radius: 35px;
  background:
    radial-gradient(85% 42% at 10% 5%, rgba(78,112,255,.12), transparent 65%),
    linear-gradient(175deg, #17151F, #0E0C15);
  border: 1px solid rgba(242, 241, 247, 0.12);
  box-shadow: inset 0 0 0 6px #060509, 0 35px 85px rgba(0, 0, 0, 0.75), 0 0 60px rgba(152,91,255,.24);
  padding: 1.9rem 1.15rem 1.2rem;
  overflow: hidden;
  text-align: left;
  transform: rotateX(3deg);
}
.mini-phone::before {
  content: "";
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 9px;
  border-radius: 99px;
  background: #060509;
}
.p-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.9rem; }
.p-title em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.2rem;
}
.p-now {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.8rem;
}
.p-now > div { min-width: 0; flex: 1; }
.p-now b { display: block; font-size: 0.72rem; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--dim); }
.p-now strong { display: block; margin-top: .25rem; font-size: .86rem; line-height: 1.25; font-weight: 600; color: var(--text); }
.p-now span { display: block; font-size: 0.8rem; color: var(--dim); margin-top: 0.15rem; }
.p-cover {
  display: grid;
  place-items: end start;
  width: 3.4rem;
  height: 4.5rem;
  border-radius: 4px;
  flex: none;
  background: linear-gradient(155deg, rgba(74,128,185,.72), rgba(124,92,255,.3) 54%, rgba(197,105,175,.18));
  border: 1px solid rgba(133, 165, 255, 0.36);
  padding: .35rem;
}
.p-cover span { font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; color: rgba(255,255,255,.72); }
.p-bar { height: 4px; background: rgba(242, 241, 247, 0.1); border-radius: 4px; margin-top: 0.6rem; }
.p-bar i { display: block; height: 100%; width: 55%; border-radius: 4px; background: var(--accent); }
.p-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--dim);
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--hair);
}
.p-row b { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.p-insight {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .8rem;
  margin-top: .9rem;
  padding: .75rem .85rem;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(72,119,175,.15), rgba(124,92,255,.1));
  border: 1px solid rgba(107,151,205,.16);
}
.p-insight span, .p-insight em { color: var(--dim); font-size: .65rem; font-style: normal; }
.p-insight b { grid-row: span 2; align-self: center; color: #82cfd2; font-size: 1rem; }
.p-tabs {
  display: flex;
  justify-content: space-around;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--dim);
}
.p-tabs b { color: #87a4ff; font-weight: 500; }

/* ---------- ch5: next ---------- */

/* ---------- 06: contact - lands on the arc's planet ---------- */

.scene-end {
  position: relative;
  z-index: 1;
  min-height: 86svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem clamp(1.5rem, 4vw, 3.5rem) 7rem;
  margin-top: -30svh;
  padding-top: calc(6rem + 30svh);
  background: transparent;
  isolation: isolate;
}
.scene-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(75% 46% at 50% 52%, rgba(50,75,130,.1), transparent 72%),
    linear-gradient(180deg, rgba(10,10,14,0) 0%, var(--bg) 34%, #0d0c14 72%, var(--bg-2) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 13%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 13%, #000 34%);
}
.end-inner {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.end-inner h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }

.contact-btn {
  display: inline-block;
  margin-top: 2.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(124, 92, 255, 0.55);
  border-radius: 3px;
  padding: 1.05em 2.2em;
  background: rgba(124, 92, 255, 0.1);
  transition: border-color 0.3s, background 0.3s, transform 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(124, 92, 255, 0);
}
.contact-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22), transparent 75%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.contact-btn:hover {
  border-color: var(--accent-soft);
  background: rgba(124, 92, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 45px rgba(124, 92, 255, 0.2);
}
.contact-btn:hover::before { transform: translateX(130%); }

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hair);
  background: var(--bg-2);
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem) 2rem;
}
.footer-grid {
  max-width: 92rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 0.8fr;
  gap: 2rem;
}
.footer-mark { font-size: 0.92rem; }
.footer-tag { color: var(--dim); font-size: 0.9rem; margin-top: 0.55rem; max-width: 26em; }
.footer-legal { font-family: var(--mono); font-size: 0.74rem; color: var(--dim); }
.footer-legal p { margin-bottom: 0.4rem; }
.footer-legal strong { color: var(--text); font-weight: 500; }
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.footer-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--dim); }
.footer-nav a:hover { color: var(--accent-soft); }
.footer-note {
  max-width: 92rem;
  margin: 2.5rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--dim);
  opacity: 0.8;
}

/* ---------- legal pages ---------- */

.legal-main {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 9rem clamp(1.5rem, 5vw, 2rem) 5rem;
}
.legal-main h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin-bottom: 0.6rem; }
.legal-updated { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent-soft); margin-bottom: 2.5rem; }
.legal-main h2 { font-size: 1.3rem; margin: 2.4rem 0 0.8rem; border-top: 1px solid var(--hair); padding-top: 1.6rem; }
.legal-main h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.legal-main p, .legal-main li { color: var(--dim); margin-bottom: 0.8rem; }
.legal-main ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal-main strong { color: var(--text); }

/* ---------- responsive & a11y ---------- */

@media (max-width: 980px) {
  .win-body { grid-template-columns: 1fr; }
  .side { display: none; }
  .win-body { min-height: 0; }
  .canvas { padding: 1.2rem 1.3rem; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-facts { gap: 1.6rem; }
  .chapter-nav button { font-size: 0; gap: 0; }
  .chapter-nav button span { font-size: 0.62rem; }
  .chapter-nav { right: .35rem; }
  .site-header { padding: 1rem 1.2rem; }
  .j-layer h2 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  #heroTitle { font-size: clamp(2.65rem, 13vw, 3.65rem); }
  .j-progress { right: 1.5rem; left: 1.5rem; }
  .j-track { flex: 1; }
  .j-progress em { display: block; margin-left: auto; }
  .hero-principles { margin-top: 1.8rem; }
  .hero-principles p { padding: .85rem .25rem 0; }
  .hero-principles b { font-size: .78rem; }
  .hero-primary, .hero-answer { text-align: center; }
  .hero-answer { padding-right: 0; }
  .listening-signals { grid-template-columns: 1fr; gap: .55rem; margin-top: 1.5rem; }
  .listening-signals article { padding: .65rem 0 0; }
  .listening-signals b { display: inline; margin-left: .55rem; font-size: .9rem; }
  .listening-signals p { display: none; }
  .phone-stage { width: min(300px, calc(100vw - 3rem)); margin-top: 1.5rem; }
  .canvas-head .sync { display: none; }
  .kpis { gap: .5rem; }
  .kpi { padding: .65rem .7rem; }
  .fc { height: 76px; }
  .range-grid { grid-template-columns: 1fr; gap: .55rem; margin-top: 1.3rem; }
  .range-card { min-height: 0; padding: .9rem 1rem; }
  .range-card small { display: none; }
  #ch4 h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .build-track { grid-template-columns: 1fr; margin-top: 1.15rem; gap: .4rem; }
  .build-track::before { display: none; }
  .build-track li { padding: .62rem .8rem .62rem 2rem; text-align: left; }
  .build-track li::before { left: .9rem; top: 50%; }
  .build-track em { display: none; }
}

@media (max-height: 760px) and (min-width: 701px) {
  .j-layer h2 { font-size: clamp(2rem, 4vw, 3rem); }
  .sec-no { margin-bottom: 1rem; }
  .lede { margin-top: 1rem; }
  .window-stage { max-width: 58rem; margin-top: 1.35rem; }
  .win-body { min-height: 350px; }
  .canvas { padding: 1.15rem 1.35rem; }
  .fc { height: 68px; }
  .phone-stage { width: 270px; margin-top: 1.2rem; }
  .range-grid { gap: .6rem; margin-top: 1.2rem; }
  .range-card { min-height: 9.6rem; padding: 1rem 1.15rem; }
  .range-card small { margin-top: .55rem; }
  .build-track { margin-top: 1.25rem; }
}

/* Keep pinned chapter content below the fixed header on short viewports. */
@media (max-height: 844px) {
  .js-story .j-layer {
    place-items: start center;
    padding-top: 72px;
    padding-bottom: 8px;
  }
}

@media (min-height: 845px) and (max-height: 900px) and (min-width: 701px) {
  .js-story #ch3 {
    place-items: start center;
    padding-top: 72px;
    padding-bottom: 8px;
  }
}

/* The pin cannot grow, so scale only the chapter payload when height is scarce. */
@media (max-height: 700px) and (max-width: 700px) {
  .js-story #ch1 .j-inner-center,
  .js-story #ch5 .j-inner-center { transform: scale(.9); transform-origin: top center; }
  .js-story #ch2 .j-inner-center { transform: scale(.83); transform-origin: top center; }
  .js-story #ch3 .j-inner-center { transform: scale(.8); transform-origin: top center; }
  .js-story #ch4 .j-inner-center { transform: scale(.86); transform-origin: top center; }
}

@media (max-height: 700px) and (max-width: 380px) {
  .js-story #ch2 .j-inner-center { transform: scale(.74); }
  .js-story #ch3 .j-inner-center { transform: scale(.73); }
  .js-story #ch4 .j-inner-center { transform: scale(.81); }
}

@media (max-height: 700px) and (min-width: 701px) {
  .js-story #ch1 .j-inner-center,
  .js-story #ch5 .j-inner-center { transform: scale(.9); transform-origin: top center; }
  .js-story #ch2 .j-inner-center { transform: scale(.86); transform-origin: top center; }
  .js-story #ch3 .j-inner-center { transform: scale(.83); transform-origin: top center; }
  .js-story #ch4 .j-inner-center { transform: scale(.88); transform-origin: top center; }
}

/* Last word on phones. These two chapters had their explanations hidden to squeeze
   into a pinned screen, which left them looking bare. Nothing is pinned here any
   more, so the text comes back. Kept at the end so it outranks the rules above. */
@media (max-width: 900px) {
  /* The horizon arc is a deliberately oversized circle. The pinned frame used to
     clip it; without that it widened the document and the page could be panned
     sideways. Clip it to its own chapter instead. `clip` rather than `hidden` so
     no new scroll container appears. */
  html { overflow-x: clip; }
  #ch5 { overflow: hidden; }

  .listening-signals article { padding: .85rem 0 0; }
  .listening-signals b { display: block; margin-left: 0; margin-bottom: .3rem; }
  .listening-signals p { display: block; }
  .build-track li { padding: .9rem .8rem .9rem 2rem; }
  .build-track em { display: block; margin-top: .25rem; }
  .range-card small { display: block; }

  /* A fixed aspect ratio left the tab strip sitting on the inner bezel, reading as
     if it bled through the bottom of the handset. Let the frame follow its content
     instead, so it can never be a few pixels short. */
  .mini-phone {
    aspect-ratio: auto;
    height: auto;
    padding-bottom: 1.6rem;
  }

  /* The sky texture defaults to transparent and is faded up by the desktop
     timeline. Nothing did that here, so phones were looking at bare background. */
  .sky { --sky-texture-opacity: 1; }
  html[data-ch="0"] .sky::before { opacity: .3; }
}

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-story .step { opacity: 1; }
  .sky::before, .sky::after, .arc,
  .window::after, .mini-phone::after, .build-track li::before { animation: none; }
  .hero-bloom { animation: none; }
  .scroll-hint { animation: none; }
  .js-story body::after { animation: none; }
}