/* Feature Presentation Architecture — poster-like heroes unfolding into demos. */
@property --pie-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.brand-hero {
  position: relative;
  z-index: 160;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh var(--edge);
  background: #000;
  color: #fff;
}
.brand-atmosphere {
  position: absolute;
  width: min(108vw, 1880px);
  aspect-ratio: 1.7;
  left: 24vw;
  bottom: -48%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(120,88,255,.88) 0%, rgba(149,119,255,.42) 29%, rgba(155,110,255,.1) 54%, rgba(0,0,0,0) 74%);
  filter: blur(68px);
  pointer-events: none;
}
.brand-copy { position: relative; z-index: 2; width: min(1180px, 82vw); text-align: center; }
.brand-hero-logo { width: 80%; height: auto; margin-inline: auto; }
.brand-copy h1 {
  margin: clamp(38px, 6vh, 70px) 0 0;
  color: rgba(255,255,255,.58);
  font-size: clamp(20px, 1.8vw, 32px);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.brand-kicker,
.brand-description,
.brand-product,
.brand-scroll { display: none; }

@media (max-width: 900px) {
  .brand-hero { min-height: 100svh; padding: 8vh 22px; }
  .brand-copy { width: 88vw; }
  .brand-copy h1 { margin-top: 34px; font-size: clamp(18px, 5vw, 23px); }
  .brand-atmosphere { width: 170vw; left: 4vw; bottom: -18%; }
}

/* Letter intro — a quiet writing beat after the brand poster. */
.opening { height: 145vh; }
.opening-sticky { background: #000; }
.opening-letter { top: 34vh; }
.opening.hero .opening-letter { opacity: 1; filter: none; transform: translateY(-9vh); }
.opening .chapter { color: rgba(255,255,255,.34); }
.opening .stuck-copy { margin-top: 38px; color: rgba(255,255,255,.42); }

/* MEMORY LENS — image reveal hero, then read/detect/memory/insert demo. */
.memory { height: 430vh; }
.memory-sticky { isolation: isolate; }
.memory-sticky::before {
  width: min(88vw, 1480px);
  height: min(76vw, 1080px);
  right: -24vw;
  top: 9vh;
  opacity: .68;
  transform: scale(1);
  background: radial-gradient(ellipse at center, rgba(120,88,255,.7) 0%, rgba(149,119,255,.3) 31%, rgba(155,110,255,.08) 52%, rgba(0,0,0,0) 74%);
}
.memory-hero,
.memory-demo { position: absolute; inset: 0; }
.memory-hero { z-index: 3; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.memory-hero-label { left: var(--edge); top: var(--safe-top); width: min(600px, 46vw); }
.memory-hero-fragment {
  position: absolute;
  z-index: 3;
  left: clamp(var(--edge), 9vw, 170px);
  top: 42vh;
  width: min(48vw, 760px);
}
.memory-hero-fragment > span { display: block; margin-bottom: 28px; color: rgba(255,255,255,.42); font-size: 14px; }
.memory-hero-fragment p { margin: 0; font-size: clamp(40px, 4.5vw, 72px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.memory-hero-photo {
  position: absolute;
  z-index: 2;
  right: -7vw;
  bottom: -10vh;
  width: min(47vw, 760px);
  margin: 0;
  clip-path: inset(0 0 36% 0);
  opacity: .82;
}
.memory-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.memory-demo { z-index: 4; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); }
.memory.reading .memory-hero { opacity: 0; transform: translateY(-28px); }
.memory.reading .memory-demo { opacity: 1; pointer-events: auto; }
.memory-process {
  position: absolute;
  z-index: 7;
  left: var(--edge);
  top: var(--safe-top);
  display: flex;
  gap: 24px;
  color: rgba(255,255,255,.28);
  font-size: 13px;
}
.memory-process span { transition: color .45s var(--ease); }
.memory.reading .memory-process span:nth-child(1),
.memory.detected .memory-process span:nth-child(2),
.memory.memory-shown .memory-process span:nth-child(3),
.memory.letter-mode .memory-process span:nth-child(4) { color: #b69ffe; }
.memory-sentence {
  left: clamp(var(--edge), 9vw, 170px);
  top: 34vh;
  width: min(66vw, 1080px);
  max-width: none;
  opacity: 1;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.memory-sentence p { position: relative; z-index: 2; font-size: clamp(48px, 5.8vw, 94px); line-height: 1.06; }
.memory-sentence em { color: #fff; border-radius: 2px; background: linear-gradient(90deg, rgba(149,119,255,0), rgba(149,119,255,0)); }
.memory.detected .memory-sentence em { color: #b69ffe; text-shadow: 0 0 28px rgba(149,119,255,.28); }
.memory-scan {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 49%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #9577ff 36%, #b69ffe 64%, transparent);
  box-shadow: 0 0 20px rgba(149,119,255,.54);
}
.memory.reading:not(.detected) .memory-scan { opacity: 1; animation: memory-scan 1.8s var(--ease) infinite; }
@keyframes memory-scan { 0% { transform: translateY(-90px) scaleX(.22); } 50% { transform: translateY(0) scaleX(1); } 100% { transform: translateY(92px) scaleX(.22); } }
.memory-status { position: absolute; left: 0; top: calc(100% + 30px); color: rgba(255,255,255,.48); font-size: 15px; opacity: 0; transition: opacity .5s var(--ease); }
.memory-status-pill { position: relative; display: inline-flex; align-items: center; min-width: 270px; height: 49px; padding: 0 24px 0 56px; color: #b69ffe; }
.memory-status-pill .pill-bg { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .72; }
.memory-status-pill .pill-icon { position: absolute; left: 20px; top: 50%; width: 25px; height: 23px; transform: translateY(-50%); }
.memory-status-pill > span { position: relative; z-index: 1; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.memory.reading:not(.detected) .status-reading { opacity: 1; }
.memory.detected .status-found { opacity: 1; color: #b69ffe; }
.memory-photo {
  left: auto !important;
  right: clamp(var(--edge), 7vw, 132px);
  top: 24vh;
  width: min(39vw, 640px);
  opacity: 0;
  filter: blur(16px);
  transform: translateX(9vw) scale(.94) !important;
  transition: opacity .9s var(--ease), filter 1s var(--ease), transform 1s var(--ease), top 1s var(--ease), right 1s var(--ease), width 1s var(--ease);
}
.memory-photo img { border-radius: 0; }
.memory-photo figcaption { margin-top: 12px; color: rgba(255,255,255,.58); font-size: 13px; }
.memory.memory-shown .memory-sentence { width: min(35vw, 540px); transform: translateY(-4vh); }
.memory.memory-shown .memory-sentence p { font-size: clamp(40px, 4vw, 64px); }
.memory.memory-shown .memory-photo { opacity: 1; filter: none; transform: none !important; }
.memory-letter {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: auto;
  min-height: 100%;
  padding: var(--safe-top) var(--edge) 7vh;
  background: #fff;
  color: #000;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 1s var(--ease), opacity .7s var(--ease);
}
.memory-letter header { display: flex; justify-content: space-between; color: rgba(0,0,0,.42); font-size: 13px; letter-spacing: .05em; }
.memory-editorial { display: grid; grid-template-columns: minmax(0, 6fr) minmax(340px, 4fr); gap: clamp(64px, 9vw, 170px); align-items: start; margin: clamp(70px, 10vh, 110px) auto 0; width: min(1220px, 88vw); }
.memory-letter-copy { max-width: 650px; }
.memory-letter p { margin: 0 0 30px; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.7; }
.memory-letter .memory-copy { margin-top: clamp(50px, 7vh, 84px); font-size: clamp(24px, 2.2vw, 36px); line-height: 1.5; }
.memory-copy mark { color: #7858ff; background: transparent; }
.memory-letter .quiet-action { margin-top: 28px; padding: 12px 0; font-size: 14px; }
.embedded-memory { display: block; margin: 8vh 0 0; opacity: 0; transform: translateX(80px) scale(.92); transition: .9s var(--ease); }
.embedded-memory img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.embedded-memory > div { display: flex; justify-content: space-between; margin-top: 12px; color: rgba(0,0,0,.48); font-size: 13px; }
.memory.letter-mode .memory-sentence,
.memory.letter-mode .memory-process { opacity: 0; transform: translateY(-24px); }
.memory.letter-mode .memory-photo { right: max(var(--edge), calc((100vw - 1220px) / 2)); top: 34vh !important; width: min(34vw, 490px) !important; opacity: 1; }
.memory.letter-mode .memory-letter { opacity: 1; transform: none; }
.memory.accepted .memory-photo { opacity: 0 !important; transform: translateX(80px) scale(.92) !important; }
.memory.accepted .embedded-memory { opacity: 1; transform: none; }
.memory.accepted .quiet-action { display: none; }
.memory.accepted .saved-state { animation: status 2.2s var(--ease) both; }

/* STORY CUE — typographic hero, then spatial expansion. */
.story { height: 390vh; }
.story-sticky::before { left: 8vw; top: 28vh; width: min(78vw, 1260px); height: min(44vw, 660px); opacity: .52; }
.story-hero,
.story-demo { position: absolute; inset: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.story-hero { z-index: 3; }
.story-label { opacity: 1; transform: none; }
.story-hero-sentence {
  position: absolute;
  left: max(var(--edge), calc((100vw - 1220px) / 2));
  top: 52vh;
  margin: 0;
  font-size: clamp(58px, 6.4vw, 104px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.05em;
}
.story-demo { z-index: 4; opacity: 0; pointer-events: none; transform: translateY(36px); }
.story.demo .story-hero { opacity: 0; visibility: hidden; transform: translateY(-30px); }
.story.demo .story-demo { opacity: 1; pointer-events: auto; transform: none; }
.story-source { left: var(--edge); top: 19vh; width: min(900px, 75vw); }
.story-source > span { display: block; margin-bottom: 18px; color: rgba(0,0,0,.4); font-size: 13px; }
.story-source p { font-size: clamp(48px, 4.2vw, 64px); line-height: 1.08; }
.story-cue { position: absolute; left: var(--edge); top: 44vh; margin: 0; color: #7858ff; font-size: clamp(18px, 1.4vw, 24px); }
.traces { left: 54vw; top: 35vh; width: min(39vw, 620px); }
.story.demo .traces { opacity: 1; transform: none; }
.traces button { font-size: clamp(14px, 1vw, 17px); padding: 20px 0; }
.expanded-story { left: var(--edge); top: 17vh; width: calc(100vw - (var(--edge) * 2)); min-height: 70vh; }
.expanded-story .before { margin: 0; font-size: clamp(48px, 4.2vw, 64px); line-height: 1.08; }
.story-block { position: absolute; font-size: clamp(30px, 2.7vw, 44px); font-weight: 550; line-height: 1.24; letter-spacing: -.035em; opacity: 0; filter: blur(8px); transform: translateY(24px); transition: 1s var(--ease); }
.block-a { left: 5vw; top: 31vh; }
.block-b { left: 35vw; top: 43vh; }
.block-c { right: 5vw; top: 60vh; }
.expanded-story small { position: absolute; left: 5vw; top: 73vh; margin: 0; font-size: 14px; letter-spacing: -.01em; }
.story.expanded .story-source,
.story.expanded .story-cue,
.story.expanded .traces { opacity: 0; visibility: hidden; transform: translateY(-20px); }
.story.expanded .expanded-story { opacity: 1; }
.story.expanded .story-block { opacity: 1; filter: none; transform: none; }
.story.expanded .block-b { transition-delay: .18s; }
.story.expanded .block-c { transition-delay: .34s; }

/* Keep the narrative bridge, but let it hand off quietly to Future Canvas. */
.bridge { height: 135vh; }

/* FUTURE CANVAS — transformation poster, then explicit selector demo. */
.future-intro {
  position: relative;
  min-height: 100svh;
  padding: var(--safe-top) var(--edge) 8vh;
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(520px, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 7vw, 130px);
  overflow: hidden;
}
.future-intro::before { right: -18vw; top: 0; width: min(95vw, 1480px); height: min(82vw, 1100px); opacity: .9; }
.future-intro .feature-label { grid-column: 1; grid-row: 1; }
.future-copy { position: relative; z-index: 4; left: auto; top: auto; grid-column: 1; grid-row: 2; align-self: end; max-width: 44vw; padding: 0 0 8vh clamp(2vw, 4vw, 72px); }
.future-copy h3 { max-width: 42vw; font-size: clamp(56px, 5.5vw, 92px); }
.future-hero-visual { position: absolute; right: 1.5vw; bottom: 4vh; width: min(47vw, 800px); height: 55vh; }
.future-hero-visual strong { position: absolute; z-index: 2; left: 3%; top: 20%; font-size: clamp(88px, 9vw, 164px); line-height: .8; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.48); }
.future-hero-visual > span { position: absolute; z-index: 3; right: 3%; top: 16%; color: #b69ffe; font-size: 13px; letter-spacing: .2em; }
.future-hero-visual > div { position: absolute; inset: 20% 0 0 8%; background: linear-gradient(90deg, rgba(0,0,0,.12), transparent), url('./images/future/osaka-spring-triptych.png') 50% center / 300% 100% no-repeat; clip-path: polygon(12% 0,100% 0,100% 100%,0 100%); }
.future-demo { position: relative; min-height: 105svh; display: grid; grid-template-columns: minmax(320px,5fr) minmax(520px,7fr); gap: clamp(40px,7vw,130px); align-items: center; padding: var(--safe-top) var(--edge) 10vh; background: #000; }
.future-demo::before { content:""; position:absolute; inset:8% -15% 0 25%; background:radial-gradient(ellipse,rgba(120,88,255,.32),rgba(0,0,0,0) 68%); filter:blur(60px); }
.future-demo > * { position: relative; z-index: 1; }
.future-demo-copy > span { color: rgba(255,255,255,.44); font-size: 13px; }
.future-demo-copy h3 { margin: 32px 0 0; font-size: clamp(42px,4.6vw,76px); line-height:1.05; letter-spacing:-.045em; }
.future-selector { position: relative; left: auto; top: auto; width: 100%; }
.future-selector > p { font-size: 16px; }
.future-selector legend { font-size: 12px; }
.future-selector button { font-size: 13px; }
.future-selector .imagine { font-size: 14px; }
.word-transform { height: 220vh; }
.future-statement p { font-size: clamp(48px, 6vw, 92px); }
.keep-scene { color: #fff; font-size: 13px; }
.future-saved { font-size: 14px; }

@media (max-width: 1279px) {
  .memory-hero-fragment { top: 40vh; }
  .memory-editorial { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 6vw; }
  .story-hero-sentence { left: var(--edge); }
  .block-b { left: 30vw; }
  .future-intro,
  .future-demo { grid-template-columns: 1fr; }
  .future-intro .feature-label { width: min(560px, 60vw); }
  .future-copy { grid-column: 1; max-width: 50vw; padding-left: 4vw; padding-bottom: 10vh; }
  .future-copy h3 { max-width: 48vw; }
  .future-hero-visual { width: 50vw; opacity: .76; }
  .future-demo { align-content: center; gap: 10vh; }
  .future-demo-copy { width: 75vw; }
  .future-selector { width: min(760px, 82vw); margin-left: 10vw; }
}

@media (max-width: 767px) {
  .opening { height: 130vh; }
  .opening-letter { top: 31vh; }
  .memory { height: 430vh; }
  .memory-hero-label { left: 22px; top: 92px; width: calc(100vw - 44px); }
  .memory-hero-fragment { left: 22px; top: 39vh; width: calc(100vw - 44px); }
  .memory-hero-fragment p { font-size: clamp(34px, 10.5vw, 48px); }
  .memory-hero-photo { width: 72vw; right: -22vw; bottom: -2vh; opacity: .68; }
  .memory-process { left: 22px; top: 92px; gap: 16px; font-size: 12px; }
  .memory-sentence { left: 22px; top: 28vh; width: calc(100vw - 44px); }
  .memory-sentence p { font-size: clamp(38px, 11.2vw, 54px); }
  .memory.memory-shown .memory-sentence { width: calc(100vw - 44px); transform: translateY(-8vh); }
  .memory-photo { right: 22px; top: 55vh; width: 72vw; }
  .memory-letter { padding: 96px 22px 8vh; overflow-y: auto; }
  .memory-editorial { grid-template-columns: 1fr; gap: 30px; width: 100%; margin-top: 52px; }
  .memory-letter .memory-copy { margin-top: 42px; }
  .embedded-memory { margin-top: 20px; }
  .memory.letter-mode .memory-photo { display: none; }
  .story { height: 390vh; }
  .story-hero-sentence { left: 22px; top: 55vh; width: calc(100vw - 44px); font-size: clamp(45px, 12.5vw, 62px); }
  .story-source { left: 22px; top: 17vh; width: calc(100vw - 44px); }
  .story-source p { font-size: clamp(38px, 10.5vw, 52px); }
  .story-cue { left: 22px; top: 42vh; }
  .traces { left: 22px; top: 51vh; width: calc(100vw - 44px); }
  .expanded-story { left: 22px; top: 14vh; width: calc(100vw - 44px); }
  .expanded-story .before { font-size: clamp(36px, 10vw, 48px); }
  .story-block { position: absolute; left: 0; right: auto; font-size: clamp(27px, 7.6vw, 36px); }
  .block-a { top: 28vh; }
  .block-b { top: 42vh; }
  .block-c { left: 18vw; top: 61vh; }
  .expanded-story small { left: 0; top: 78vh; font-size: 13px; }
  .story.expanded .block-b,
  .story.expanded .block-c { transition-delay: 0s; }
  .future-intro { min-height: 100svh; padding: 92px 22px 7vh; display: block; }
  .future-intro .feature-label { width: 100%; }
  .future-copy { position: absolute; left: 22px; bottom: 7vh; max-width: 84vw; padding: 0; }
  .future-copy h3 { max-width: 84vw; font-size: clamp(46px, 12.5vw, 62px); }
  .future-hero-visual { right: -10vw; top: 44vh; bottom: auto; width: 75vw; height: 28vh; opacity: .68; }
  .future-hero-visual strong { left: 0; top: 16%; font-size: 24vw; }
  .future-hero-visual > span { top: 8%; }
  .future-demo { min-height: 120svh; display: block; padding: 100px 22px 10vh; }
  .future-demo-copy { width: 100%; }
  .future-demo-copy h3 { font-size: 46px; }
  .future-selector { width: 100%; margin: 18vh 0 0; }
  .future-selector fieldset { grid-template-columns: 68px repeat(4,minmax(42px,1fr)); }
  .future-selector legend { width: 68px; font-size: 11px; }
  .future-selector button { font-size: 11px; }
}

/* Mimo detection language + looping memory gallery */
.project-overview {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #1b1c1f;
  color: #f7f7f8;
}
.overview-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 25vw);
  gap: clamp(80px, 11vw, 190px);
  align-items: center;
  width: 100%;
  min-height: 100svh;
  padding: 9vh clamp(56px, 7vw, 116px) 0;
}
.overview-copy { align-self: center; padding-bottom: 2vh; }
.overview-kicker { display: block; margin-bottom: 52px; color: #c5b4ff; font-size: clamp(18px, 1.35vw, 23px); font-weight: 650; }
.overview-copy h2 { margin: 0; max-width: 760px; font-size: clamp(48px, 4vw, 70px); line-height: 1.08; letter-spacing: -.035em; }
.overview-ko { margin: 54px 0 0; color: #9b9fae; font-size: clamp(18px, 1.35vw, 25px); line-height: 1.62; letter-spacing: -.025em; }
.overview-en { margin: 22px 0 0; color: #565961; font-size: clamp(15px, 1.05vw, 19px); font-weight: 600; line-height: 1.5; }
.overview-device {
  align-self: end;
  justify-self: end;
  width: min(24vw, 420px);
  height: min(76vh, 700px);
  margin-bottom: 3vh;
  padding: clamp(18px, 1.45vw, 26px);
  border-radius: clamp(54px, 4.6vw, 78px);
  background: #4c4e57;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  will-change: transform;
  animation: overview-device-float 5.8s ease-in-out infinite;
}
.overview-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: clamp(38px, 3.2vw, 56px);
  background: #222328;
}
.overview-screen img { width: 69%; height: auto; opacity: .52; }

@keyframes overview-device-float {
  0%, 100% { transform: perspective(1200px) rotateY(-36deg) rotateX(5deg) rotateZ(-1deg) translateY(0); }
  50% { transform: perspective(1200px) rotateY(-36deg) rotateX(5deg) rotateZ(-1deg) translateY(-18px); }
}

.overview-data {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 8vh clamp(48px, 7vw, 116px) 7vh;
  background: #1b1c1f;
  color: #f7f7f8;
}
.data-heading { text-align: center; }
.data-heading > span { color: #c5b4ff; font-size: clamp(17px, 1.25vw, 22px); font-weight: 650; }
.data-heading h2 { margin: 44px 0 0; font-size: clamp(46px, 4.1vw, 70px); line-height: 1.06; letter-spacing: -.04em; }
.data-heading p { margin: 30px 0 0; color: #8d9098; font-size: clamp(17px, 1.25vw, 22px); line-height: 1.58; }
.data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 5.5vw, 94px);
  width: min(1308px, 100%);
  margin: 50px auto 0;
}
.data-card {
  aspect-ratio: 1.23 / 1;
  min-height: 0;
  padding: clamp(30px, 3vw, 44px) clamp(30px, 3.5vw, 52px) 30px;
  border-radius: 54px;
  background: #222328;
  text-align: center;
}
.data-card h3 { margin: 26px 0 0; color: #969aa3; font-size: clamp(18px, 1.35vw, 23px); font-weight: 650; line-height: 1.35; }
.data-card > p { margin: 14px 0 0; color: #686b73; font-size: 16px; font-weight: 600; }
.data-pie {
  position: relative;
  --pie-angle: 0deg;
  width: min(340px, 31vh);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #303137;
}
.data-pie::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -28deg, #c8bbff 0 70%, #a5a9b1 70% 82%, #4d5257 82% 100%);
  -webkit-mask: conic-gradient(from -28deg, #000 0deg var(--pie-angle), transparent var(--pie-angle) 360deg);
  mask: conic-gradient(from -28deg, #000 0deg var(--pie-angle), transparent var(--pie-angle) 360deg);
  transition: --pie-angle 1.85s cubic-bezier(.22,1,.36,1) .24s;
}
.data-pie span { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 28%; color: #25262b; font-size: clamp(11px, 1.05vw, 16px); line-height: 1.08; text-align: center; opacity: 0; transform: translate(-50%, calc(-50% + 10px)); transition: .55s var(--ease) 1.7s; }
.data-pie span b { margin-bottom: 3px; font-size: clamp(18px, 1.7vw, 27px); }
.pie-difficult { left: calc(63% + 10px); top: 53%; }
.pie-neutral { left: calc(33% - 20px); top: 38%; color: #a5a7ac !important; }
.pie-easy { left: 37%; top: 68%; width: 24% !important; }
.data-bars {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(18px, 2.1vw, 36px);
  height: min(280px, 27vh);
  margin: 18px auto 0;
  padding: 0 18px 32px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(20% - 1px), rgba(255,255,255,.14) 20%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bar { position: relative; width: min(54px, 9%); height: 100%; }
.bar i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--value) * 1%); border-radius: 7px 7px 0 0; background: #6a6d74; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(.22,1,.36,1) var(--delay); }
.bar:first-child i { background: #c8bbff; }
.bar:nth-child(2) i, .bar:nth-child(3) i { background: #aeb4bd; }
.bar span { position: absolute; left: 50%; bottom: -28px; color: #666970; font-size: 16px; transform: translateX(-50%); }
.reveal-up { opacity: 0; transform: translateY(54px); transition: opacity .85s var(--ease), transform 1s var(--ease); }
.data-grid .reveal-up:nth-child(1) { transition-delay: .15s; }
.data-grid .reveal-up:nth-child(2) { transition-delay: .85s; }
.overview-data.in-view .reveal-up { opacity: 1; transform: none; }
.overview-data.in-view .data-pie::before { --pie-angle: 360deg; }
.overview-data.in-view .data-pie span { opacity: 1; transform: translate(-50%, -50%); }
.overview-data.in-view .bar i { transform: scaleY(1); }

.mimo-message {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 270px;
  min-height: 49px;
  padding: 0 24px 0 56px;
  color: #b69ffe;
  white-space: nowrap;
}
.mimo-message .pill-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .76;
}
.mimo-message .pill-icon {
  position: absolute;
  z-index: 1;
  left: 20px;
  top: 50%;
  width: 25px;
  height: 23px;
  transform: translateY(-50%);
}
.mimo-message > span { position: relative; z-index: 1; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }

.memory-sentence em {
  position: relative;
  display: inline-block;
  color: #fff !important;
  font-style: normal;
  text-shadow: none !important;
}
.memory-sentence em::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 0;
  color: transparent;
  white-space: nowrap;
  background: linear-gradient(90deg, #7655ff 0%, #b89fff 58%, #f1eaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(149,119,255,.34));
}
.memory.detected .memory-sentence em::after { width: 100%; transition: width 1.15s cubic-bezier(.22,1,.36,1); }
.memory .status-found { top: calc(100% + 58px); }
.memory .status-found::before {
  content: "";
  position: absolute;
  left: 29px;
  bottom: calc(100% + 4px);
  height: 46px;
  border-left: 1px dashed rgba(182,159,254,.65);
}
.memory .status-found::after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: calc(100% + 46px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b69ffe;
  box-shadow: 0 0 16px rgba(149,119,255,.72);
}

.memory-gallery {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 24vh;
  width: min(55vw, 900px);
  opacity: 0;
  filter: blur(14px);
  transform: translateX(8vw);
  transition: opacity .8s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
.memory.memory-shown .memory-gallery { opacity: 1; filter: none; transform: none; }
.memory-gallery-viewport { overflow: hidden; width: 100%; padding: 2.5vh 0; }
.memory-gallery-track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  padding: 0 20vw 0 2vw;
  transition: transform .72s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.memory-gallery-item {
  flex: 0 0 min(28vw, 450px);
  border: 0;
  padding: 0;
  background: transparent;
  opacity: .22;
  transform: scale(.84);
  transition: opacity .55s var(--ease), transform .65s var(--ease), filter .55s var(--ease);
  filter: saturate(.55);
  cursor: pointer;
}
.memory-gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.memory-gallery-item.active { opacity: 1; transform: scale(1); filter: none; }
.memory-gallery-footer { display: flex; align-items: center; justify-content: space-between; width: min(28vw, 450px); margin: 0 0 0 2vw; color: rgba(255,255,255,.62); font-size: 12px; }
.memory-gallery-meta { display: flex; gap: 16px; }
.memory-gallery-controls { display: flex; align-items: center; gap: 12px; }
.memory-gallery-controls button { border: 0; padding: 4px; background: transparent; color: rgba(255,255,255,.72); font-size: 18px; cursor: pointer; }
.memory-gallery-controls b { color: #fff; font-weight: 500; }
.memory-selection-message { position: relative; margin: 52px 0 0 2vw; opacity: 0; transform: translateY(12px); transition: .55s var(--ease); }
.memory-selection-message::before { content:""; position:absolute; left:29px; bottom:calc(100% + 5px); height:48px; border-left:1px dashed rgba(182,159,254,.58); }
.memory-selection-message::after { content:""; position:absolute; left:25px; bottom:calc(100% + 47px); width:8px; height:8px; border-radius:50%; background:#b69ffe; box-shadow:0 0 14px rgba(149,119,255,.75); }
.memory.selection-ready .memory-selection-message { opacity: 1; transform: none; }
.memory.letter-mode .memory-gallery { opacity: 0; pointer-events: none; transform: translateX(70px) scale(.94); }

/* The letter becomes a translucent liquid-glass page. */
.memory-letter {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(139,105,255,.28), transparent 36%),
    radial-gradient(circle at 12% 88%, rgba(102,68,234,.16), transparent 42%),
    rgba(8,7,12,.94);
  color: #fff;
}
.memory-letter::before {
  content:"";
  position:absolute;
  inset: 8vh max(var(--edge), calc((100vw - 1320px) / 2)) 6vh;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 34px 90px rgba(0,0,0,.42), 0 0 70px rgba(120,88,255,.09);
  backdrop-filter: blur(34px) saturate(135%);
  -webkit-backdrop-filter: blur(34px) saturate(135%);
}
.memory-letter header, .memory-editorial { position: relative; z-index: 1; }
.memory-letter header { padding: 0 max(24px, calc((100vw - 1220px) / 2)); color: rgba(255,255,255,.48); }
.memory-editorial { width: min(1160px, 82vw); }
.memory-letter .quiet-action { padding: 13px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.07); backdrop-filter: blur(16px); }
.memory-copy mark { color: #c2adff; }
.embedded-memory img { border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.embedded-memory > div { color: rgba(255,255,255,.5); }
.saved-state { margin-top: 18px; }

/* Every purple Mimo response uses the supplied Group 4 + Rectangle assets. */
.expanded-story small { color: inherit; }
.expanded-story small .mimo-message { min-width: 330px; }
.bridge .future-line small { margin-top: 22px; color: inherit; }
.bridge .future-line small .mimo-message { min-width: 270px; }
.future-saved { width: max-content; color: inherit; }
.future-saved .mimo-message { min-width: 260px; }

@media (max-width: 767px) {
  .project-overview { min-height: 118svh; }
  .overview-inner { display: block; min-height: 118svh; padding: 92px 22px 0; }
  .overview-kicker { margin-bottom: 34px; font-size: 16px; }
  .overview-copy h2 { font-size: clamp(40px, 11.6vw, 54px); }
  .overview-ko { margin-top: 36px; font-size: 16px; line-height: 1.65; }
  .overview-ko br { display: none; }
  .overview-en { margin-top: 18px; font-size: 14px; }
  .overview-device { position: absolute; right: -3vw; bottom: 2vh; width: 62vw; height: 46svh; margin-bottom: 0; padding: 16px; border-radius: 48px; animation-name: overview-device-float-mobile; }
  .overview-screen { border-radius: 34px; }
  .overview-data { min-height: auto; padding: 92px 22px 86px; }
  .data-heading { text-align: left; }
  .data-heading > span { font-size: 16px; }
  .data-heading h2 { margin-top: 30px; font-size: clamp(39px, 11vw, 52px); }
  .data-heading p { margin-top: 26px; font-size: 16px; }
  .data-heading p br { display: none; }
  .data-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 54px; }
  .data-card { aspect-ratio: auto; min-height: 390px; padding: 30px 20px 26px; border-radius: 32px; }
  .data-pie { width: min(290px, 72vw); }
  .data-bars { height: 250px; gap: 17px; padding-inline: 8px; }
  .bar { width: 32px; }
  .data-card h3 { margin-top: 24px; font-size: 17px; }
  .memory { height: 470vh; }
  .memory-sentence { top: 25vh; }
  .memory.memory-shown .memory-sentence { opacity: .2; transform: translateY(-12vh) scale(.82); transform-origin: left top; }
  .memory.memory-shown .memory-sentence p { font-size: clamp(38px, 11.2vw, 54px); }
  .memory-status { top: calc(100% + 22px); }
  .memory .status-found { top: calc(100% + 50px); }
  .mimo-message { min-width: 250px; min-height: 46px; padding-left: 52px; }
  .mimo-message > span { font-size: 12px; }
  .memory-gallery { top: 38vh; width: 100vw; }
  .memory-gallery-track { gap: 16px; padding: 0 12vw; }
  .memory-gallery-item { flex-basis: 72vw; }
  .memory-gallery-footer { width: 72vw; margin-left: 12vw; }
  .memory-selection-message { margin-left: 12vw; }
  .memory-letter { padding: 96px 22px 8vh; }
  .memory-letter::before { inset: 72px 12px 24px; border-radius: 28px; }
  .memory-letter header { padding: 0 12px; }
  .memory-editorial { width: calc(100% - 24px); }
  .expanded-story small .mimo-message { min-width: 290px; white-space: normal; }
  .future-saved { top: 55%; }
}

@media (min-width: 600px) and (max-width: 767px) {
  .overview-data { min-height: 100svh; padding: 64px 28px 54px; }
  .data-heading { text-align: center; }
  .data-heading h2 { margin-top: 22px; font-size: 40px; }
  .data-heading p { margin-top: 18px; font-size: 15px; line-height: 1.45; }
  .data-heading p br { display: initial; }
  .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 38px; }
  .data-card { min-height: 340px; padding: 24px 16px 22px; border-radius: 30px; }
  .data-pie { width: min(205px, 29vw); }
  .data-pie span { width: 66px; font-size: 12px; }
  .data-pie span b { font-size: 20px; }
  .data-bars { height: 188px; gap: 10px; margin-top: 8px; padding: 0 4px 26px; }
  .bar { width: 27px; }
  .bar span { bottom: -23px; font-size: 12px; }
  .data-card h3 { margin-top: 18px; font-size: 14px; }
  .data-card > p { margin-top: 8px; font-size: 13px; }
}

/* Memory Lens v2 — reference-led editorial gallery and detected sentence. */
.memory-v2 {
  height: 260svh;
  min-height: 0;
  overflow: clip;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(112,78,244,.2), transparent 38%),
    #18191c;
}
.memory-v2 .memory-v2-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.memory-v2 .memory-v2-inner::before { display: none; }
.memory-v2-header {
  position: absolute;
  z-index: 5;
  top: clamp(88px, 10vh, 120px);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(290px, .95fr) minmax(280px, 1.55fr) minmax(280px, 1.55fr);
  gap: clamp(44px, 5vw, 90px);
  align-items: start;
  width: min(1660px, calc(100% - (var(--edge) * 2)));
  margin: 0;
}
.memory-v2-title { transform: translateY(-28px); }
.memory-v2-title span { display: block; margin-bottom: 8px; color: #c4b1ff; font-size: 18px; font-weight: 650; }
.memory-v2-title h2 { margin: 0; color: #c4b1ff; font-size: clamp(38px, 3.6vw, 61px); font-weight: 650; line-height: .95; letter-spacing: -.045em; white-space: nowrap; }
.memory-v2-header > p { margin: 0; color: #777a83; font-size: clamp(12px, .85vw, 14.4px); font-weight: 560; line-height: 1.48; }
.memory-v2-header > p[lang="en"] { color: #858892; }
.memory-v2-gallery { position: absolute; z-index: 3; top: 30vh; left: 0; width: 100%; margin: 0; transition: opacity .75s var(--ease), transform .9s var(--ease); transform-origin: 50% 20%; }
.memory-v2-viewport {
  width: 100%;
  overflow: hidden;
  padding: 22px 0 34px;
  touch-action: pan-y;
  cursor: grab;
}
.memory-v2-viewport.dragging { cursor: grabbing; }
.memory-v2 .memory-gallery-track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 40px);
  width: max-content;
  padding: 0 22vw;
  transition: transform .72s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.memory-v2 .memory-gallery-item {
  flex: 0 0 clamp(280px, 28vw, 480px);
  border: 0;
  padding: 0;
  background: transparent;
  opacity: .23;
  filter: saturate(.6) brightness(.65);
  transform: scale(.7);
  transition: opacity .55s var(--ease), transform .72s var(--ease), filter .55s var(--ease);
  transform-origin: center;
}
.memory-v2 .memory-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  border-radius: clamp(22px, 2.5vw, 44px);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  pointer-events: none;
  user-select: none;
}
.memory-v2 .memory-gallery-item.active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: scale(1);
}
.memory-v2 .memory-gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(280px, 28vw, 480px);
  margin: 2px auto 0;
  color: rgba(255,255,255,.48);
  font-size: 13px;
}
.memory-v2 .memory-gallery-meta { display: flex; gap: 18px; }
.memory-v2 .memory-gallery-controls { display: flex; align-items: center; gap: 14px; }
.memory-v2 .memory-gallery-controls button { border: 0; padding: 8px; background: transparent; color: rgba(255,255,255,.72); font-size: 22px; }
.memory-v2 .memory-gallery-controls b { color: #fff; font-weight: 600; }
.memory-v2-detection {
  position: absolute;
  z-index: 6;
  top: 75vh;
  left: 50%;
  width: min(1120px, calc(100% - (var(--edge) * 2)));
  margin: 0;
  padding-left: clamp(0px, 14vw, 230px);
}
.memory-v2-detection > p {
  margin: 0;
  color: #5e6069;
  font-size: clamp(24px, 2.25vw, 38px);
  font-weight: 560;
  line-height: 1.34;
  letter-spacing: -.045em;
}
.memory-v2-detection em {
  display: inline-block;
  color: #f2eeff;
  font-style: normal;
  font-weight: 720;
  text-shadow: 0 0 24px rgba(134,93,255,.75), 0 0 50px rgba(120,80,255,.36);
}
.memory-v2-detection.is-changing em { animation: memory-word-change .48s var(--ease); }
.memory-v2-signal { position: relative; width: max-content; margin: 28px 0 0 48%; }
.memory-v2-signal::before {
  content: "";
  position: absolute;
  left: 34px;
  bottom: calc(100% + 8px);
  height: 48px;
  border-left: 1px dashed rgba(182,159,254,.52);
}
.memory-v2-signal::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: calc(100% + 52px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b69ffe;
  box-shadow: 0 0 15px rgba(149,119,255,.8);
}
.memory-v2-header,
.memory-v2-gallery { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.memory-v2-header { transform: translate(-50%, 34px); }
.memory-v2-detection { opacity: 0; transform: translate(-50%, 34px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.memory-v2.in-view .memory-v2-header,
.memory-v2.in-view .memory-v2-gallery { opacity: 1; transform: none; }
.memory-v2.in-view .memory-v2-header { transform: translate(-50%, 0); }
.memory-v2.in-view .memory-v2-gallery { transition-delay: .18s; }
.memory-v2.in-view .memory-v2-detection,
.memory-v2.detection-focus .memory-v2-detection { opacity: 1; transform: translate(-50%, 0); }
.memory-v2.detection-focus .memory-v2-gallery { opacity: 1; transform: none; transition-delay: 0s; }
@keyframes memory-word-change {
  0% { opacity: 1; filter: blur(0); transform: translateY(0); }
  45% { opacity: 0; filter: blur(8px); transform: translateY(8px); }
  55% { opacity: 0; filter: blur(8px); transform: translateY(-8px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (max-width: 900px) {
  .overview-data { min-height: auto; padding: 84px clamp(18px, 5vw, 36px) 72px; }
  .data-heading { width: 100%; text-align: left; }
  .data-heading h2 { font-size: clamp(36px, 8vw, 52px); }
  .data-grid { grid-template-columns: 1fr; gap: 24px; width: min(640px, 100%); margin-top: 44px; }
  .data-card { width: 100%; aspect-ratio: auto; min-height: 0; padding: 30px 20px 26px; border-radius: 34px; }
  .data-pie { width: min(280px, 66vw); }
  .data-bars { width: min(520px, 100%); height: 230px; gap: clamp(12px, 4vw, 24px); }
  .data-card h3 { margin-top: 22px; }
  .memory-v2 { height: 290svh; min-height: 0; }
  .memory-v2 .memory-v2-inner { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; }
  .memory-v2-header { top: 58px; grid-template-columns: 1fr; gap: 10px; width: calc(100% - 44px); }
  .memory-v2-title { transform: translateY(-8px); }
  .memory-v2-title h2 { font-size: clamp(36px, 9vw, 52px); }
  .memory-v2-header > p { max-width: 680px; font-size: clamp(12px, 2.24vw, 13px); line-height: 1.38; }
  .memory-v2-gallery { top: 33vh; }
  .memory-v2 .memory-gallery-track { gap: 18px; padding-inline: 12vw; }
  .memory-v2 .memory-gallery-item { flex-basis: min(62vw, 440px); transform: scale(.78); }
  .memory-v2 .memory-gallery-item.active { transform: scale(1); }
  .memory-v2 .memory-gallery-footer { width: min(62vw, 440px); }
  .memory-v2-detection { top: 65vh; width: calc(100% - 44px); margin: 0; padding-left: 0; }
  .memory-v2-detection > p { font-size: clamp(24px, 5.6vw, 34px); }
  .memory-v2-detection > p br { display: none; }
  .memory-v2-signal { margin: 28px 0 0 10%; }
  .memory-v2-header > p { transition: opacity .65s var(--ease), transform .75s var(--ease); }
  .memory-v2.detection-focus .memory-v2-gallery { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .overview-data { padding-inline: 16px; }
  .data-heading p { font-size: 15px; }
  .data-card { padding: 26px 14px 24px; border-radius: 28px; }
  .data-pie { width: min(238px, 68vw); }
  .data-pie span { width: 26%; font-size: 10px; }
  .data-pie span b { font-size: 18px; }
  .pie-difficult { left: calc(63% + 10px); top: 53%; }
  .pie-neutral { left: calc(33% - 20px); top: 38%; }
  .pie-easy { left: 37%; top: 68%; width: 24% !important; }
  .data-bars { height: 198px; gap: 11px; padding-inline: 2px; }
  .bar { width: min(34px, 11%); }
  .bar span { font-size: 12px; }
  .data-card h3 { font-size: 15px; }
  .data-card > p { font-size: 13px; }
  .memory-v2 .memory-v2-inner { padding-top: 0; }
  .memory-v2 .memory-gallery-track { padding-inline: 8vw; }
  .memory-v2 .memory-gallery-item { flex-basis: 60vw; }
  .memory-v2 .memory-gallery-footer { width: 60vw; }
  .memory-v2 .memory-gallery-meta { gap: 9px; font-size: 11px; }
  .memory-v2-detection > p { font-size: clamp(23px, 6.6vw, 30px); line-height: 1.34; }
  .memory-v2-signal { width: calc(100% - 12px); margin-left: 12px; }
  .memory-v2-signal .mimo-message { min-width: 0; width: 100%; white-space: normal; }
}

/* Memory Lens v3 — select a memory, reveal mimo, then rise into the mobile application. */
.memory-v2 { height: 420svh; }
.memory-v2.memory-pinned .memory-v2-header,
.memory-v2.memory-pinned .memory-v2-gallery,
.memory-v2.memory-pinned .memory-v2-copy,
.memory-v2.memory-pinned .memory-v2-detection,
.memory-v2.memory-pinned .memory-v2-mobile-stage { position: fixed; }
.memory-v2-gallery {
  top: 29vh;
  width: 55%;
  transition: opacity .9s var(--ease), transform 1.15s var(--ease);
}
.memory-v2 .memory-gallery-item { flex-basis: clamp(300px, 30vw, 520px); }
.memory-v2 .memory-gallery-footer {
  width: clamp(300px, 30vw, 520px);
  margin: 2px auto 0;
}
.memory-v2-copy {
  position: absolute;
  z-index: 6;
  top: 45vh;
  left: 61%;
  width: min(560px, 34vw);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease) .24s, transform 1s var(--ease) .24s;
}
.memory-v2-copy > p {
  margin: 0;
  color: #5e6069;
  font-size: clamp(26px, 2.25vw, 40px);
  font-weight: 560;
  line-height: 1.34;
  letter-spacing: -.045em;
}
.memory-v2-copy em {
  display: inline-block;
  color: #f2eeff;
  font-style: normal;
  font-weight: 720;
  text-shadow: 0 0 24px rgba(134,93,255,.75), 0 0 50px rgba(120,80,255,.36);
}
.memory-v2-copy.is-changing em { animation: memory-word-change .48s var(--ease); }
.memory-v2.in-view .memory-v2-copy { opacity: 1; transform: none; }
.memory-v2-detection {
  top: 76vh;
  left: 61%;
  width: min(520px, 34vw);
  padding: 0;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .7s var(--ease), transform .9s var(--ease), top 1.1s var(--ease), left 1.1s var(--ease);
}
.memory-v2.in-view:not(.detection-focus) .memory-v2-detection {
  opacity: 0;
  transform: translateY(24px);
}
.memory-v2-signal { margin: 0; }
.memory-v2-signal::before {
  height: 0;
  transition: height .9s var(--ease) .08s;
}
.memory-v2-signal::after {
  bottom: calc(100% + 8px);
  opacity: 0;
  transition: bottom .9s var(--ease) .08s, opacity .25s ease;
}
.memory-v2.user-selected.detection-focus .memory-v2-detection {
  opacity: 1;
  transform: none;
}
.memory-v2.user-selected.detection-focus .memory-v2-signal::before { height: 70px; }
.memory-v2.user-selected.detection-focus .memory-v2-signal::after {
  bottom: calc(100% + 74px);
  opacity: 1;
}
.memory-v2-mobile-stage {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: 0;
  transform: translateY(34vh);
  pointer-events: none;
  transition: opacity .9s var(--ease), transform 1.35s cubic-bezier(.22,1,.36,1);
}
.memory-phone {
  position: absolute;
  display: block;
  width: min(19vw, 250px);
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.42));
}
.memory-phone-compose { top: 20vh; left: 15%; }
.memory-phone-result { top: 31vh; left: 41%; }
.memory-v2.mobile-focus .memory-v2-header {
  opacity: .12;
  transform: translate(-50%, -17vh);
}
.memory-v2.mobile-focus .memory-v2-gallery {
  opacity: .08;
  transform: translateY(-27vh) scale(.78);
}
.memory-v2.mobile-focus .memory-v2-copy {
  opacity: 0;
  transform: translateY(-22vh);
}
.memory-v2.mobile-focus .memory-v2-mobile-stage {
  opacity: 1;
  transform: none;
}
.memory-v2.mobile-focus .memory-v2-detection {
  z-index: 8;
  top: 67vh;
  left: 80%;
  width: min(360px, 28vw);
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 900px) {
  .memory-v2 { height: 430svh; }
  .memory-v2-gallery { top: 36vh; width: 100%; }
  .memory-v2 .memory-gallery-item { flex-basis: min(60vw, 420px); }
  .memory-v2 .memory-gallery-footer {
    width: min(60vw, 420px);
    margin: 2px auto 0;
  }
  .memory-v2-copy {
    top: calc(36vh + (min(60vw, 420px) / 1.5) + 104px);
    left: 50%;
    width: calc(100% - 44px);
    transform: translate(-50%, 28px);
  }
  .memory-v2.in-view .memory-v2-copy { transform: translate(-50%, 0); }
  .memory-v2-copy > p { font-size: clamp(22px, 5.7vw, 34px); line-height: 1.32; }
  .memory-v2-copy > p br { display: none; }
  .memory-v2-detection {
    top: 80vh;
    left: 50%;
    width: calc(100% - 68px);
    transform: translate(-50%, 24px);
  }
  .memory-v2.in-view:not(.detection-focus) .memory-v2-detection { transform: translate(-50%, 24px); }
  .memory-v2.user-selected.detection-focus .memory-v2-detection { transform: translate(-50%, 0); }
  .memory-v2-signal { width: 100%; margin: 0; }
  .memory-v2-signal .mimo-message { width: 100%; min-width: 0; white-space: normal; }
  .memory-phone { width: min(42vw, 190px); }
  .memory-phone-compose { top: 18vh; left: 5%; }
  .memory-phone-result { top: 29vh; left: 53%; }
  .memory-v2.mobile-focus .memory-v2-header { transform: translate(-50%, -22vh); }
  .memory-v2.mobile-focus .memory-v2-gallery { transform: translateY(-30vh) scale(.72); }
  .memory-v2.mobile-focus .memory-v2-copy { transform: translate(-50%, -25vh); }
  .memory-v2.mobile-focus .memory-v2-detection {
    top: 78vh;
    left: 50%;
    width: calc(100% - 68px);
  }
}

/* Memory Lens capsules: read first, then reveal the detected memory. */
@keyframes memory-capsule-result-reveal {
  0%, 28% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes memory-capsule-connector-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.memory-v2 .mimo-message > span { font-size: 15.4px; }
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal {
  margin-top: 42px;
}
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal .mimo-message {
  animation: memory-capsule-result-reveal .62s var(--ease) .52s both;
}
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::before,
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::after {
  animation: memory-capsule-connector-reveal .28s ease .96s both;
}

@media (max-width: 900px) {
  .memory-v2 .mimo-message > span { font-size: 13.2px; }
}

@media (max-width: 480px) {
  .memory-v2-gallery { top: 36vh; }
  .memory-v2 .memory-gallery-item,
  .memory-v2 .memory-gallery-footer { flex-basis: 58vw; width: 58vw; }
  .memory-v2-copy { top: calc(36vh + (58vw / 1.5) + 104px); }
  .memory-v2-copy > p { font-size: clamp(22px, 6.2vw, 28px); }
  .memory-v2-detection { top: 80vh; }
}

@keyframes overview-device-float-mobile {
  0%, 100% { transform: perspective(900px) rotateY(-31deg) rotateX(5deg) rotateZ(-1deg) translateY(0); }
  50% { transform: perspective(900px) rotateY(-31deg) rotateX(5deg) rotateZ(-1deg) translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .overview-device { animation: none; transform: perspective(1200px) rotateY(-36deg) rotateX(5deg); }
  .reveal-up, .data-pie::before, .data-pie span, .bar i { transition: none !important; }
  .overview-data.in-view .data-pie::before { --pie-angle: 360deg; }
  .memory-v2-header, .memory-v2-gallery, .memory-v2-copy { opacity: 1; transform: none; transition: none; }
  .memory-v2-detection { transition: none; }
}

/* STORY CUE — rebuilt from the 5. key feature-2 reference. */
.story.story-v2 {
  height: 350svh;
  min-height: 350svh;
  background: #191a1e;
  color: #969aa9;
}
.story-v2 .story-v2-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #191a1e;
}
.story-v2 .story-v2-sticky::before { content: none; }
.story-v2-intro {
  position: absolute;
  z-index: 5;
  top: clamp(72px, 8vh, 108px);
  left: var(--edge);
  right: var(--edge);
  display: grid;
  grid-template-columns: minmax(230px, .65fr) minmax(380px, 1.45fr) minmax(380px, 1.35fr);
  gap: clamp(34px, 5vw, 96px);
  align-items: start;
}
.story-v2-intro p {
  margin: clamp(42px, 4.2vh, 58px) 0 0;
  max-width: 650px;
  color: #9498a7;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 480;
  line-height: 1.48;
  letter-spacing: -.025em;
}
.story-v2-title span {
  display: block;
  margin-bottom: 18px;
  color: #c7b3ff;
  font-size: clamp(19px, 1.55vw, 28px);
  font-weight: 650;
}
.story-v2-title h2 {
  margin: 0;
  color: #c7b3ff;
  font-size: clamp(42px, 4.2vw, 76px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.045em;
}
.story-v2-flow {
  position: absolute;
  z-index: 2;
  inset: 31vh var(--edge) 3vh;
  max-width: 1760px;
  margin-inline: auto;
}
.story-v2-glow {
  position: absolute;
  left: -7%;
  top: 4%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104,56,255,.62) 0%, rgba(104,56,255,.25) 33%, rgba(104,56,255,0) 72%);
  filter: blur(38px);
  opacity: 0;
  transform: scale(.72);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.story-v2-drafts,
.story-v2-detection,
.story-v2-suggestions,
.story-v2-complete,
.story-v2-node,
.story-v2-line {
  opacity: 0;
  transition: opacity .72s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.story-v2-drafts { position: absolute; left: 7%; top: 22%; width: 34%; transform: translateX(-40px); }
.story-v2-bubble {
  position: absolute;
  margin: 0;
  border-radius: clamp(24px, 3vw, 58px);
  background: #23242a;
  color: #8d82b5;
  letter-spacing: -.045em;
}
.story-v2-bubble::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -9px;
  width: 30px;
  height: 30px;
  background: inherit;
  clip-path: polygon(25% 0, 100% 100%, 0 68%);
  transform: rotate(-4deg);
}
.story-v2-primary {
  position: relative;
  width: 100%;
  padding: clamp(36px, 5vh, 72px) clamp(28px, 3vw, 58px);
  font-size: clamp(30px, 3.25vw, 62px);
  font-weight: 500;
  line-height: 1.08;
  white-space: nowrap;
}
.story-v2-primary strong,
.story-v2-complete strong { color: #aa86ff; font-weight: 720; }
.story-v2-muted {
  padding: clamp(22px, 3vh, 38px) clamp(22px, 2.4vw, 44px);
  font-size: clamp(21px, 2.15vw, 40px);
  font-weight: 500;
  line-height: 1;
  color: #4e4a66;
  white-space: nowrap;
}
.story-v2-muted strong { color: #5b5378; font-weight: 680; }
.story-v2-muted-one { left: -15%; top: 108%; }
.story-v2-muted-two { left: 42%; top: 177%; }
.story-v2-detection {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 34%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #3c374e;
  color: #9a84d9;
  font-size: clamp(13px, 1.1vw, 20px);
  transform: translate(-50%, 18px);
  white-space: nowrap;
}
.story-v2-heart,
.story-v2-mark { color: #9e8cff; text-shadow: 0 0 14px rgba(145,116,255,.9); }
.story-v2-node {
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #a588ff;
  box-shadow: 0 0 0 4px rgba(165,136,255,.3), 0 0 20px rgba(165,136,255,.8);
}
.story-v2-node-top { left: calc(50% - 6px); top: 43%; transform: scale(.4); }
.story-v2-line { position: absolute; z-index: 1; border-color: #5a566d; border-style: dotted; }
.story-v2-line-left { left: 39%; top: 43.7%; width: 11%; border-width: 1px 0 0; transform: scaleX(0); transform-origin: right; }
.story-v2-line-down { left: 50%; top: 45%; height: 26%; border-width: 0 0 0 1px; transform: scaleY(0); transform-origin: top; }
.story-v2-suggestions {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 70%;
  width: min(33%, 520px);
  padding: 14px 16px 16px;
  border-radius: 17px;
  background: linear-gradient(130deg, #efe8ff, #e4d9fb);
  color: #4d4658;
  box-shadow: 0 18px 45px rgba(75,40,160,.24);
  transform: translate(-50%, 28px) scale(.96);
  filter: blur(4px);
}
.story-v2-suggestion-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: clamp(11px, .86vw, 15px); }
.story-v2-options { display: grid; grid-template-columns: 1.45fr .75fr; gap: 9px; overflow: hidden; }
.story-v2-options button {
  min-width: 0;
  border: 0;
  border-radius: 11px;
  padding: 12px;
  background: rgba(255,255,255,.82);
  color: #6b6570;
  text-align: left;
  font-size: clamp(9px, .72vw, 13px);
  font-weight: 520;
  line-height: 1.28;
}
.story-v2-options button.is-selected { background: #8166cc; color: #fff; }
.story-v2-complete {
  z-index: 3;
  right: 4%;
  top: 31%;
  width: min(27%, 470px);
  padding: clamp(28px, 4vh, 52px) clamp(28px, 2.8vw, 48px);
  transform: translateX(42px) scale(.96);
  filter: blur(5px);
}
.story-v2-complete p { margin: 0; color: #b7a7f5; font-size: clamp(14px, 1.36vw, 24px); font-weight: 520; line-height: 1.5; letter-spacing: -.025em; }
.story-v2-complete p:first-child { margin-bottom: 4px; }
.story-v2-complete > span { position: absolute; right: 20%; top: 15%; color: #8968dc; transform: rotate(14deg); }
.story-v2-line-right { left: 66.5%; top: 83%; width: 8%; border-width: 1px 0 0; transform: scaleX(0); transform-origin: left; }
.story-v2-line-right::after { content: ""; position: absolute; right: 0; bottom: 0; height: 35vh; border-left: 1px dotted #5a566d; }
.story-v2-node-right { left: calc(74.5% - 6px); top: calc(83% - 6px); transform: scale(.4); }

.story-v2.show-draft .story-v2-drafts,
.story-v2.show-draft .story-v2-glow { opacity: 1; transform: none; }
.story-v2.show-detection .story-v2-detection { opacity: 1; transform: translate(-50%, 0); }
.story-v2.show-detection .story-v2-node-top { opacity: 1; transform: scale(1); }
.story-v2.show-detection .story-v2-line-left { opacity: 1; transform: scaleX(1); }
.story-v2.show-suggestions .story-v2-line-down { opacity: 1; transform: scaleY(1); }
.story-v2.show-suggestions .story-v2-suggestions { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; }
.story-v2.show-complete .story-v2-complete { opacity: 1; transform: none; filter: none; }
.story-v2.show-complete .story-v2-line-right { opacity: 1; transform: scaleX(1); }
.story-v2.show-complete .story-v2-node-right { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .story.story-v2 { height: 380svh; min-height: 380svh; }
  .story-v2 .story-v2-sticky { min-height: 640px; }
  .story-v2-intro {
    top: 74px;
    left: 22px;
    right: 22px;
    grid-template-columns: minmax(92px, .52fr) 1.48fr;
    gap: 9px 18px;
  }
  .story-v2-title { grid-row: 1 / 3; }
  .story-v2-title span { margin-bottom: 8px; font-size: 13px; }
  .story-v2-title h2 { font-size: clamp(25px, 8vw, 38px); line-height: 1.02; }
  .story-v2-intro p { margin: 0; font-size: clamp(9px, 2.45vw, 12px); line-height: 1.42; }
  .story-v2-flow { inset: 36vh 12px 2vh; }
  .story-v2-drafts { left: 3%; top: 8%; width: 57%; }
  .story-v2-primary { padding: 25px 20px; font-size: clamp(21px, 6.2vw, 31px); }
  .story-v2-muted { padding: 17px 18px; font-size: clamp(15px, 4.5vw, 22px); }
  .story-v2-muted-one { left: -4%; top: 112%; }
  .story-v2-muted-two { left: 34%; top: 185%; }
  .story-v2-detection { left: 72%; top: 27%; padding: 8px 10px; font-size: 10px; }
  .story-v2-node-top { left: calc(72% - 5px); top: 38%; width: 10px; height: 10px; }
  .story-v2-line-left { left: 57%; top: 38.8%; width: 15%; }
  .story-v2-line-down { left: 72%; top: 40%; height: 26%; }
  .story-v2-suggestions { left: 58%; top: 65%; width: 72%; padding: 10px; }
  .story-v2-suggestion-head { margin-bottom: 7px; font-size: 10px; }
  .story-v2-options button { padding: 9px; font-size: 8px; }
  .story-v2-complete { right: 1%; top: 42%; width: 48%; padding: 22px 18px; }
  .story-v2-complete p { font-size: clamp(10px, 3vw, 14px); line-height: 1.38; }
  .story-v2-line-right { left: 77%; top: 79%; width: 10%; }
  .story-v2-line-right::after { height: 29vh; }
  .story-v2-node-right { left: calc(87% - 5px); top: calc(79% - 5px); width: 10px; height: 10px; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .story-v2-intro { top: 68px; }
  .story-v2-intro p { margin-top: 22px; font-size: 13px; }
  .story-v2-title h2 { font-size: 48px; }
  .story-v2-flow { top: 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  .story-v2-drafts,
  .story-v2-detection,
  .story-v2-suggestions,
  .story-v2-complete,
  .story-v2-node,
  .story-v2-line,
  .story-v2-glow { transition: none; filter: none; }
}

/* Keep Story Cue typography on the same scale as Memory Lens. */
.story-v2-intro {
  grid-template-columns: minmax(290px, .95fr) minmax(280px, 1.55fr) minmax(280px, 1.55fr);
  gap: clamp(44px, 5vw, 90px);
  top: clamp(88px, 10vh, 120px);
}
.story-v2-title { transform: translateY(-28px); }
.story-v2-title span { margin-bottom: 8px; font-size: 18px; }
.story-v2-title h2 { font-size: clamp(38px, 3.6vw, 61px); white-space: nowrap; }
.story-v2-intro p { margin: 0; color: #777a83; font-size: clamp(12px, .85vw, 14.4px); font-weight: 560; line-height: 1.48; }
.story-v2-intro p[lang="en"] { color: #858892; }
.story-v2-mimo-icon { display: block; width: 18px; height: auto; flex: 0 0 auto; object-fit: contain; }
.story-v2-complete > .story-v2-mimo-icon { position: absolute; right: 20%; top: 15%; width: 18px; transform: rotate(14deg); }

/* FUTURE CANVAS — rebuilt from the 5. key feature-3 reference. */
.future-v2 {
  position: relative;
  height: 440svh;
  min-height: 440svh;
  overflow: clip;
  background: #191a1e;
  color: #fff;
}
.future-v2-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #191a1e;
}
.future-v2-intro {
  position: absolute;
  z-index: 8;
  top: clamp(88px, 10vh, 120px);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(290px, .95fr) minmax(280px, 1.55fr) minmax(280px, 1.55fr);
  gap: clamp(44px, 5vw, 90px);
  align-items: start;
  width: min(1660px, calc(100% - (var(--edge) * 2)));
  transform: translateX(-50%);
}
.future-v2-title { transform: translateY(-28px); }
.future-v2-title span { display: block; margin-bottom: 8px; color: #c4b1ff; font-size: 18px; font-weight: 650; }
.future-v2-title h2 { margin: 0; color: #c4b1ff; font-size: clamp(38px, 3.6vw, 61px); font-weight: 650; line-height: .95; letter-spacing: -.045em; white-space: nowrap; }
.future-v2-intro > p { margin: 0; color: #777a83; font-size: clamp(12px, .85vw, 14.4px); font-weight: 560; line-height: 1.48; }
.future-v2-intro > p[lang="en"] { color: #858892; }
.future-v2-flow { position: absolute; z-index: 2; inset: 27vh var(--edge) 2vh; max-width: 1760px; margin-inline: auto; }
.future-v2-glow {
  position: absolute;
  left: 39%;
  top: -3%;
  width: 48%;
  aspect-ratio: 1.2;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(103,52,246,.58), rgba(97,55,213,.2) 38%, rgba(25,26,30,0) 72%);
  filter: blur(52px);
  opacity: 0;
  transform: scale(.75);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.future-v2-bubble {
  position: absolute;
  border-radius: clamp(24px, 3vw, 58px);
  background: #24252b;
}
.future-v2-bubble::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -10px;
  width: 34px;
  height: 34px;
  background: inherit;
  clip-path: polygon(24% 0, 100% 100%, 0 68%);
}
.future-v2-promise {
  z-index: 5;
  right: 9%;
  top: 8%;
  width: min(34%, 560px);
  padding: clamp(34px, 5vh, 66px) clamp(34px, 3.2vw, 58px);
  opacity: 0;
  filter: blur(7px);
  transform: translateX(50px) scale(.94);
  transition: opacity .8s var(--ease), filter .9s var(--ease), transform 1s var(--ease);
}
.future-v2-promise p { margin: 0; color: #a69cc9; font-size: clamp(31px, 3.1vw, 58px); font-weight: 540; line-height: 1.08; letter-spacing: -.05em; white-space: nowrap; }
.future-v2-promise strong { color: #a77cff; font-weight: 740; }
.future-v2-muted {
  position: absolute;
  z-index: 3;
  border-radius: 28px;
  padding: 22px 30px;
  background: #222329;
  color: #48445e;
  font-size: clamp(20px, 2vw, 36px);
  letter-spacing: -.045em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease) .18s, transform .9s var(--ease) .18s;
}
.future-v2-muted strong { color: #58506f; }
.future-v2-muted-one { right: 21%; top: 33%; }
.future-v2-muted-two { right: 11%; top: 47%; }
.future-v2-reading,
.future-v2-complete-pill {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #3d384f;
  color: #9c88d8;
  font-size: clamp(12px, 1vw, 18px);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .85s var(--ease);
}
.future-v2-reading { left: 17%; top: 18%; }
.future-v2-reading img,
.future-v2-complete-pill img { width: 19px; height: auto; }
.future-v2-dot { position: absolute; z-index: 5; width: 12px; height: 12px; border-radius: 50%; background: #a68aff; box-shadow: 0 0 0 4px rgba(166,138,255,.25), 0 0 18px rgba(166,138,255,.7); opacity: 0; transform: scale(.4); transition: opacity .6s, transform .7s var(--ease); }
.future-v2-guide { position: absolute; z-index: 1; border-color: #59556b; border-style: dotted; opacity: 0; transition: opacity .6s; }
.future-v2-dot-read { left: calc(23% - 6px); top: 27%; }
.future-v2-guide-read { left: 23%; top: 27%; width: 31%; height: 39%; border-width: 1px 0 0 1px; }
.future-v2-phone {
  position: absolute;
  z-index: 4;
  overflow: visible;
  border-radius: 22px;
  background: #fff;
  color: #29282d;
  box-shadow: 0 22px 65px rgba(81,44,177,.3);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(34px) scale(.96);
  transition: opacity .8s var(--ease), filter .9s var(--ease), transform 1s var(--ease);
}
.future-v2-handle { display: block; width: 42px; height: 4px; margin: 14px auto 18px; border-radius: 999px; background: #d1d1d1; }
.future-v2-phone h3 { margin: 0; font-size: clamp(13px, 1.05vw, 17px); font-weight: 700; line-height: 1.3; }
.future-v2-form { left: 6%; top: 45%; width: min(24%, 390px); padding: 0 20px 22px; }
.future-v2-input { margin: 20px 0 25px; padding: 13px 15px; border-radius: 999px; background: #f1f1f1; color: #bbb; font-size: 11px; }
.future-v2-form fieldset { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; padding: 0; border: 0; }
.future-v2-form legend { width: 100%; margin-bottom: 10px; color: #888; font-size: 11px; }
.future-v2-form fieldset button { border: 0; border-radius: 999px; padding: 8px 18px; background: #f0e9ff; color: #86759f; font-size: 11px; }
.future-v2-form fieldset button.active { background: #b197ff; color: #fff; }
.future-v2-generate { width: 100%; border: 0; border-radius: 13px; padding: 14px; background: #9565f6; color: #fff; font-weight: 700; }
.future-v2-loading { left: 34%; top: 48%; width: min(24%, 390px); padding: 0 18px 24px; }
.future-v2-loading h3 { display: flex; align-items: center; gap: 7px; }
.future-v2-loading h3 > span { width: 16px; height: 16px; border: 1px solid #b797ff; border-radius: 50%; }
.future-v2-loading h3 b { color: #9565f6; font-size: .8em; }
.future-v2-loading-cards { display: flex; gap: 10px; margin-top: 20px; overflow: hidden; }
.future-v2-loading-cards i { display: grid; flex: 0 0 66%; aspect-ratio: .78; place-items: center; border-radius: 20px; background: #e8dcff; color: #c8b0ff; font-size: 26px; font-style: normal; font-weight: 700; }
.future-v2-complete-pill { right: 18%; top: 37%; }
.future-v2-dot-complete { right: calc(24% - 6px); top: 45%; }
.future-v2-guide-complete { right: 24%; top: 45%; width: 16%; height: 4%; border-width: 1px 1px 0 0; }
.future-v2-result { right: 9%; top: 48%; width: min(31%, 500px); padding: 0 20px 24px; }
.future-v2-result h3 { display: flex; align-items: center; gap: 10px; }
.future-v2-result h3 img { width: 22px; }
.future-v2-gallery { display: flex; align-items: center; gap: 14px; width: max-content; margin-top: 22px; transition: transform .8s var(--ease); }
.future-v2-gallery button {
  flex: 0 0 135px;
  width: 135px;
  height: 185px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: #ded7e8;
  opacity: .35;
  filter: brightness(.65) saturate(.7);
  transform: scale(.88);
  transition: opacity .55s var(--ease), filter .55s var(--ease), transform .7s var(--ease);
}
.future-v2-gallery button.active { opacity: 1; filter: none; transform: scale(1.12); box-shadow: 0 16px 32px rgba(40,20,70,.24); }
.future-v2-gallery img { width: 100%; height: 100%; object-fit: cover; }
.future-v2-result footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; color: #77717e; font-size: 11px; }
.future-v2-result footer p { max-width: 75%; margin: 0; }
.future-v2-result footer span { white-space: nowrap; }
.future-v2-result footer b { color: #8f62e8; }

.future-v2.show-promise .future-v2-glow { opacity: 1; transform: scale(1); }
.future-v2.show-promise .future-v2-promise,
.future-v2.show-promise .future-v2-muted { opacity: 1; filter: none; transform: none; }
.future-v2.show-reading .future-v2-reading,
.future-v2.show-result .future-v2-complete-pill { opacity: 1; transform: none; }
.future-v2.show-reading .future-v2-dot-read,
.future-v2.show-result .future-v2-dot-complete { opacity: 1; transform: scale(1); }
.future-v2.show-form .future-v2-guide-read,
.future-v2.show-result .future-v2-guide-complete { opacity: 1; }
.future-v2.show-form .future-v2-form,
.future-v2.show-loading .future-v2-loading,
.future-v2.show-result .future-v2-result { opacity: 1; filter: none; transform: none; }

.complete-future { display: block; height: auto; object-fit: cover; background: none; }

@media (max-width: 900px) {
  .story-v2-intro { top: 58px; grid-template-columns: 1fr; gap: 10px; width: calc(100% - 44px); left: 50%; right: auto; transform: translateX(-50%); }
  .story-v2-title { transform: translateY(-8px); }
  .story-v2-title h2 { font-size: clamp(36px, 9vw, 52px); }
  .story-v2-intro p { max-width: 680px; font-size: clamp(12px, 2.24vw, 13px); line-height: 1.38; }
  .story-v2-flow { top: 35vh; }

  .future-v2 { height: 470svh; min-height: 470svh; }
  .future-v2-sticky { min-height: 680px; }
  .future-v2-intro { top: 58px; grid-template-columns: 1fr; gap: 10px; width: calc(100% - 44px); }
  .future-v2-title { transform: translateY(-8px); }
  .future-v2-title h2 { font-size: clamp(36px, 9vw, 52px); }
  .future-v2-intro > p { max-width: 680px; font-size: clamp(12px, 2.24vw, 13px); line-height: 1.38; }
  .future-v2-flow { inset: 37vh 12px 1vh; }
  .future-v2-promise { right: 2%; top: 2%; width: 70%; padding: 25px 20px; }
  .future-v2-promise p { font-size: clamp(25px, 7vw, 34px); }
  .future-v2-muted { padding: 13px 16px; border-radius: 18px; font-size: clamp(15px, 4.1vw, 20px); }
  .future-v2-muted-one { right: 12%; top: 17%; }
  .future-v2-muted-two { right: 0; top: 28%; }
  .future-v2-reading { left: 2%; top: 9%; padding: 8px 11px; font-size: 10px; }
  .future-v2-dot-read { left: 17%; top: 19%; }
  .future-v2-guide-read { left: 17%; top: 19%; width: 35%; height: 27%; }
  .future-v2-form { left: 2%; top: 45%; width: 53%; padding: 0 12px 13px; border-radius: 16px; }
  .future-v2-handle { margin: 8px auto 10px; width: 30px; height: 3px; }
  .future-v2-phone h3 { font-size: 10px; }
  .future-v2-input { margin: 11px 0 13px; padding: 8px 10px; font-size: 8px; }
  .future-v2-form fieldset { gap: 5px; margin-bottom: 9px; }
  .future-v2-form legend { margin-bottom: 5px; font-size: 8px; }
  .future-v2-form fieldset button { padding: 5px 8px; font-size: 8px; }
  .future-v2-generate { padding: 8px; font-size: 9px; }
  .future-v2-loading { left: 44%; top: 51%; width: 53%; padding: 0 10px 13px; border-radius: 16px; }
  .future-v2-loading-cards { margin-top: 11px; }
  .future-v2-loading-cards i { border-radius: 12px; font-size: 17px; }
  .future-v2-complete-pill { right: 1%; top: 54%; padding: 8px 10px; font-size: 10px; }
  .future-v2-dot-complete { right: 19%; top: 60%; }
  .future-v2-guide-complete { right: 19%; top: 60%; width: 17%; height: 3%; }
  .future-v2-result { right: 1%; top: 63%; width: 72%; padding: 0 12px 14px; border-radius: 16px; }
  .future-v2-result h3 img { width: 15px; }
  .future-v2-gallery { gap: 8px; margin-top: 12px; transform: translateX(-36%); }
  .future-v2-gallery button { flex-basis: 82px; width: 82px; height: 108px; border-radius: 12px; }
  .future-v2-result footer { margin-top: 14px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .future-v2-glow,
  .future-v2-promise,
  .future-v2-muted,
  .future-v2-reading,
  .future-v2-complete-pill,
  .future-v2-dot,
  .future-v2-guide,
  .future-v2-phone { transition: none; filter: none; }
}

/* Future Canvas split — two full viewports instead of one crowded canvas. */
.future-v2 {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.future-v2-page {
  position: relative;
  height: 230svh;
  min-height: 1500px;
  background: #191a1e;
}
.future-v2-page-one .future-v2-sticky,
.future-v2-result-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #191a1e;
}
.future-v2-page-count {
  position: absolute;
  z-index: 12;
  right: var(--edge);
  bottom: 28px;
  color: rgba(255,255,255,.34);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}
.future-v2-page-one .future-v2-flow { inset: 27vh var(--edge) 3vh; }
.future-v2-page-one .future-v2-form { top: 43%; }
.future-v2-page-one .future-v2-loading { left: 37%; top: 48%; }

.future-v2-result-sticky { color: #fff; }
.future-v2-result-heading {
  position: absolute;
  z-index: 6;
  left: max(var(--edge), 7vw);
  top: 19vh;
  width: min(34vw, 500px);
}
.future-v2-result-heading > span { color: #a88aff; font-size: 13px; font-weight: 650; letter-spacing: .1em; }
.future-v2-result-heading h2 { margin: 26px 0 22px; color: #f3efff; font-size: clamp(46px, 4.5vw, 72px); font-weight: 650; line-height: 1.05; letter-spacing: -.055em; }
.future-v2-result-heading p { margin: 0; color: #858892; font-size: clamp(14px, 1.05vw, 18px); font-weight: 520; line-height: 1.55; }
.future-v2-result-glow {
  position: absolute;
  z-index: 1;
  right: -2vw;
  top: 2vh;
  width: 76vw;
  height: 96vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(107,57,249,.46), rgba(91,48,204,.18) 38%, rgba(25,26,30,0) 72%);
  filter: blur(58px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.future-v2-page-two .future-v2-complete-pill { left: 42%; right: auto; top: 21%; }
.future-v2-page-two .future-v2-dot-complete { left: calc(48% - 6px); right: auto; top: 31%; }
.future-v2-page-two .future-v2-guide-complete { left: 48%; right: auto; top: 31%; width: 13%; height: 10%; border-width: 1px 1px 0 0; }
.future-v2-page-two .future-v2-result {
  left: auto;
  right: max(var(--edge), 7vw);
  top: 16vh;
  width: min(51vw, 760px);
  min-height: 68vh;
  padding: 0 30px 28px;
  border-radius: 28px;
}
.future-v2-page-two .future-v2-result .future-v2-handle { margin-top: 18px; }
.future-v2-page-two .future-v2-result h3 { margin-top: 8px; font-size: clamp(16px, 1.3vw, 21px); }
.future-v2-page-two .future-v2-gallery { gap: 20px; margin-top: clamp(28px, 5vh, 48px); }
.future-v2-page-two .future-v2-gallery button { flex-basis: clamp(170px, 15vw, 230px); width: clamp(170px, 15vw, 230px); height: clamp(235px, 22vw, 330px); border-radius: 26px; }
.future-v2-page-two .future-v2-result footer { margin-top: clamp(34px, 5vh, 54px); font-size: 13px; }
.future-v2.show-result .future-v2-result-glow { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .future-v2-page { height: 220svh; min-height: 1400px; }
  .future-v2-page-one .future-v2-flow { inset: 37vh 12px 3vh; }
  .future-v2-page-one .future-v2-form { left: 2%; top: 46%; width: 46%; }
  .future-v2-page-one .future-v2-loading { left: auto; right: 2%; top: 46%; width: 46%; }
  .future-v2-page-count { right: 18px; bottom: 18px; }

  .future-v2-result-heading { left: 22px; top: 11vh; width: calc(100% - 44px); }
  .future-v2-result-heading > span { font-size: 10px; }
  .future-v2-result-heading h2 { margin: 16px 0 12px; font-size: clamp(35px, 9.5vw, 48px); }
  .future-v2-result-heading p { font-size: 12px; line-height: 1.45; }
  .future-v2-result-glow { left: -20vw; right: auto; top: 23vh; width: 140vw; height: 76vh; }
  .future-v2-page-two .future-v2-complete-pill { left: 22px; top: 32vh; }
  .future-v2-page-two .future-v2-dot-complete { left: 52px; top: 39vh; }
  .future-v2-page-two .future-v2-guide-complete { left: 52px; top: 39vh; width: 40%; height: 5vh; }
  .future-v2-page-two .future-v2-result {
    left: 16px;
    right: 16px;
    top: 43vh;
    width: auto;
    min-height: 48vh;
    padding: 0 14px 18px;
    border-radius: 20px;
  }
  .future-v2-page-two .future-v2-result h3 { margin-top: 4px; font-size: 13px; }
  .future-v2-page-two .future-v2-gallery { gap: 10px; margin-top: 22px; }
  .future-v2-page-two .future-v2-gallery button { flex-basis: 110px; width: 110px; height: 154px; border-radius: 15px; }
  .future-v2-page-two .future-v2-result footer { margin-top: 24px; font-size: 10px; }
}

/* Story Cue spacing — 20% smaller and optically centered like key feature-2. */
.story-v2-flow {
  top: 31vh;
  bottom: 5vh;
  transform: scale(.8);
  transform-origin: 50% 50%;
}

/* Story Cue — restore the wide, airy key feature-2 composition on large displays. */
@media (min-width: 1400px) and (min-height: 800px) {
  .story-v2-flow {
    inset: 31vh var(--edge) 4vh;
    max-width: 2200px;
    transform: none;
  }

  .story-v2-glow { left: -4%; top: 0; width: 32%; }
  .story-v2-drafts { left: 1%; top: 12%; width: 30%; }
  .story-v2-muted-one { left: -8%; top: 112%; }
  .story-v2-muted-two { left: 38%; top: 184%; }

  .story-v2-detection { left: 50%; top: 26%; }
  .story-v2-node-top { left: calc(50% - 6px); top: 35%; }
  .story-v2-line-left { left: 31%; top: 35.7%; width: 19%; }
  .story-v2-line-down { left: 50%; top: 37%; height: 25%; }

  .story-v2-suggestions { left: 50%; top: 63%; width: min(29%, 620px); }
  .story-v2-complete { right: 1%; top: 25%; width: min(27%, 560px); }

  .story-v2-line-right { left: 64.5%; top: 78%; width: 10.5%; }
  .story-v2-line-right::after { height: 31vh; }
  .story-v2-node-right { left: calc(75% - 6px); top: calc(78% - 6px); }
}

/* Memory Lens staging — detection owns a later scroll beat instead of overlapping. */
.memory-v2.detection-focus:not(.mobile-focus) .memory-v2-gallery {
  opacity: 0;
  transform: translateY(-13vh) scale(.84);
}
.memory-v2.detection-focus:not(.mobile-focus) .memory-v2-header {
  opacity: 0;
  transform: translate(-50%, -12vh);
}
.memory-v2.detection-focus:not(.mobile-focus) .memory-v2-copy {
  opacity: 0;
  transform: translateY(-11vh);
}
.memory-v2.detection-focus:not(.mobile-focus) .memory-v2-detection {
  top: 54vh;
  left: 50%;
  width: min(560px, calc(100% - (var(--edge) * 2)));
  opacity: 1;
  transform: translate(-50%, -50%);
}
.memory-v2.detection-focus:not(.mobile-focus) .memory-v2-signal { margin: 0 auto; }
.memory-v2.detection-focus .memory-v2-signal::before { height: 70px; }
.memory-v2.detection-focus .memory-v2-signal::after {
  bottom: calc(100% + 74px);
  opacity: 1;
}

@media (max-width: 900px) {
  .story-v2-flow {
    top: 34vh;
    bottom: 5vh;
    transform: scale(.82);
  }
  .memory-v2.detection-focus:not(.mobile-focus) .memory-v2-gallery {
    opacity: 0;
    transform: translateY(-15vh) scale(.8);
  }
  .memory-v2.detection-focus:not(.mobile-focus) .memory-v2-copy {
    opacity: 0;
    transform: translate(-50%, -13vh);
  }
  .memory-v2.detection-focus:not(.mobile-focus) .memory-v2-detection {
    top: 57vh;
    left: 50%;
    width: calc(100% - 44px);
    transform: translate(-50%, -50%);
  }
}

/* Memory Lens v4 — one non-overlapping scroll beat per interaction state. */
.memory-v2 { height: 500svh; }
.memory-v2-copy em { position: relative; }
.memory-v2-copy em::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% + 16px);
  left: 50%;
  height: 0;
  border-left: 2px dotted rgba(180, 153, 255, .78);
  opacity: 0;
  transform: translateX(-50%);
  transition: height 1.15s var(--ease) .28s, opacity .35s ease .2s;
}

/* Beat 2: keep only the right-hand sentence, then draw down to mimo. */
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-header,
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-gallery {
  opacity: 0;
  transform: translateY(-12vh) scale(.86);
  pointer-events: none;
}
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy {
  top: 24vh;
  left: 61%;
  width: min(560px, 34vw);
  opacity: 1;
  transform: none;
}
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy em::after {
  height: 27vh;
  opacity: 1;
}
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
  top: 63vh;
  left: 61%;
  width: min(520px, 34vw);
  opacity: 1;
  transform: translateY(0);
}
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-signal::before,
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-signal::after { display: none; }

/* Beats 3–4: the application screens arrive left first, then right. */
.memory-phone {
  opacity: 0;
  transform: translateY(52px) scale(.94);
  transition: opacity .85s var(--ease), transform 1.05s cubic-bezier(.22,1,.36,1), left 1.05s var(--ease);
}
.memory-v2.mobile-left-focus .memory-v2-header,
.memory-v2.mobile-left-focus .memory-v2-gallery,
.memory-v2.mobile-left-focus .memory-v2-copy {
  opacity: 0;
  pointer-events: none;
  transition-duration: .32s;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
  z-index: 9;
  top: 74vh;
  left: 80%;
  width: min(380px, 28vw);
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: none;
  transition-duration: .6s;
}
.memory-v2.mobile-left-focus .memory-v2-signal::before,
.memory-v2.mobile-left-focus .memory-v2-signal::after { display: none; }
.memory-v2.mobile-left-focus .memory-v2-mobile-stage {
  opacity: 1;
  transform: none;
}
.memory-v2.mobile-left-focus .memory-phone-compose {
  left: 31%;
  opacity: 1;
  transform: none;
}
.memory-v2.mobile-focus .memory-phone-compose { left: 18%; }
.memory-v2.mobile-focus .memory-phone-result {
  opacity: 1;
  transform: none;
}
.memory-v2.user-selected.mobile-focus .memory-v2-detection { opacity: 1; }

@media (max-width: 900px) {
  .memory-v2 { height: 520svh; }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy {
    top: 24vh;
    left: 50%;
    width: calc(100% - 44px);
    transform: translateX(-50%);
  }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy em::after { height: 28vh; }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
    top: 67vh;
    left: 50%;
    width: calc(100% - 68px);
    transform: translateX(-50%);
  }
  .memory-v2.mobile-left-focus .memory-phone-compose { left: calc(50% - min(21vw, 95px)); }
  .memory-v2.mobile-focus .memory-phone-compose { left: 5%; }
  .memory-v2.mobile-focus .memory-phone-result { left: 53%; }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
    top: 84vh;
    left: 50%;
    width: calc(100% - 68px);
  }
}

/* Section pacing and Memory Lens connections. */
.overview-background-spacer {
  position: relative;
  height: clamp(190px, 24svh, 360px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(126, 88, 255, .13) 0%, rgba(102, 68, 234, .055) 34%, rgba(27, 28, 31, 0) 72%),
    linear-gradient(180deg, #1b1c1f 0%, #201d2b 52%, #1b1c1f 100%);
}
.overview-background-spacer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(182, 159, 254, .035) 55%, transparent);
}
.overview-data { padding-top: 12vh; }
.pie-easy { left: 21%; top: 65%; width: 30% !important; color: #33343a !important; }

.memory-story-spacer {
  height: clamp(220px, 30svh, 430px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(117, 78, 244, .09), transparent 64%),
    linear-gradient(180deg, #18191c, #191a1e);
}

.memory-v2-reading-status { display: none; }

@media (min-width: 901px) {
  .memory-v2-copy em::before {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    top: calc(100% + 2px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81749d;
    box-shadow: 0 0 12px rgba(149, 119, 255, .42);
    opacity: 0;
    transition: opacity .3s ease .18s;
  }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy em::before { opacity: 1; }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy em::after {
    top: calc(100% + 8px);
    height: 19.25vh;
  }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
    top: 58vh;
    left: 66%;
    width: min(620px, 42vw);
    transform: translate(-50%, 0);
  }

  .memory-v2 .mimo-message {
    box-sizing: border-box;
    width: max-content;
    max-width: min(520px, 38vw);
    min-width: 310px;
    min-height: 56px;
    padding: 0 30px 0 62px;
    overflow: hidden;
    border: 1px solid rgba(182, 159, 254, .2);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(72, 62, 99, .96), rgba(47, 43, 61, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 36px rgba(0, 0, 0, .18);
  }
  .memory-v2 .mimo-message .pill-bg { opacity: 0; }
  .memory-v2 .mimo-message .pill-icon { left: 22px; }
  .memory-v2 .mimo-message > span { line-height: 1.35; }

  .memory-v2-reading-status {
    display: block;
    position: relative;
    width: max-content;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .55s var(--ease);
  }
  .memory-v2-reading-status .mimo-message { min-width: 310px; }
  .memory-v2-reading-status::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: calc(50% - 5px);
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #81749d;
    box-shadow: 0 0 0 4px rgba(129, 116, 157, .13), 0 0 14px rgba(149, 119, 255, .46);
  }
  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-reading-status {
    opacity: 1;
    transform: none;
  }
  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal {
    width: max-content;
    margin: 52px 0 0 auto;
    transform: none;
  }
  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal .mimo-message {
    min-width: 420px;
  }

  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::before {
    display: block;
    left: 50%;
    top: calc(100% + 6px);
    bottom: auto;
    height: 62px;
    border-left: 2px dotted rgba(180, 153, 255, .68);
  }
  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::after {
    display: block;
    left: calc(50% - 5px);
    top: calc(100% - 5px);
    bottom: auto;
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #a889ff;
    box-shadow: 0 0 0 4px rgba(168, 137, 255, .18), 0 0 18px rgba(149, 119, 255, .7);
  }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-reading-status { display: none; }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-signal { margin: 0; transform: none; }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-signal::before { display: none; }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-signal::after {
    display: block;
    left: calc(50% - 5px);
    top: -5px;
    bottom: auto;
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #a889ff;
    box-shadow: 0 0 0 4px rgba(168, 137, 255, .18), 0 0 18px rgba(149, 119, 255, .7);
  }

  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
    top: 26vh;
    left: 50%;
    width: max-content;
    max-width: 38vw;
    transform: translate(-50%, 0);
  }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    width: 0;
    height: calc(22vh - 64px);
    border-left: 2px dotted rgba(180, 153, 255, .72);
    opacity: .82;
  }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection::after {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    top: calc(100% + 22vh - 61px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a889ff;
    box-shadow: 0 0 0 4px rgba(168, 137, 255, .18), 0 0 18px rgba(149, 119, 255, .7);
  }

  .memory-v2.mobile-left-focus .memory-phone-compose,
  .memory-v2.mobile-focus .memory-phone-compose {
    top: 48vh;
    left: calc(50% - 125px);
  }
  .memory-v2.mobile-focus .memory-phone-result {
    top: 48vh;
    left: calc(50% + 170px);
  }
}

@media (max-width: 900px) {
  .overview-background-spacer { height: 18svh; min-height: 130px; }
  .overview-data { padding-top: 100px; }
  .pie-easy { left: 21%; top: 65%; }
  .memory-story-spacer { height: 22svh; min-height: 160px; }
}

/* Future Canvas v3 — one continuous reference-led scroll canvas. */
.future-v3 {
  position: relative;
  height: 560svh;
  min-height: 0;
  overflow: clip;
  background: #191a1e;
}
.future-v3 .future-v3-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: #191a1e;
}
.future-v3 .future-v2-intro {
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.future-v3-flow {
  position: absolute;
  z-index: 2;
  inset: 27vh 0 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.future-v3 .future-v2-glow { left: 42%; top: -5%; width: 45%; }
.future-v3 .future-v2-promise { right: 7%; top: 4%; width: min(35%, 560px); }
.future-v3 .future-v2-muted-one { right: 20%; top: 29%; }
.future-v3 .future-v2-muted-two { right: 9%; top: 43%; }
.future-v3 .future-v2-reading { left: 16%; top: 14%; }
.future-v3 .future-v2-dot-read { left: calc(22% - 6px); top: 27%; }
.future-v3 .future-v2-guide-read { left: 22%; top: 27%; width: 30%; height: 28%; }
.future-v3 .future-v2-form {
  left: 8%;
  top: 34%;
  width: min(24%, 360px);
  max-height: 43vh;
  transform-origin: top left;
}
.future-v3 .future-v2-loading {
  left: 35%;
  top: 39%;
  width: min(24%, 360px);
  max-height: 39vh;
  transform-origin: top left;
}
.future-v3.show-form .future-v2-form { transform: scale(.8); }
.future-v3.show-loading .future-v2-loading { transform: scale(.84); }
.future-v3 .future-v2-result-glow {
  position: absolute;
  z-index: 1;
  right: -4vw;
  top: -10vh;
  width: 78vw;
  height: 88vh;
  pointer-events: none;
}
.future-v3 .future-v2-complete-pill { left: 47%; right: auto; top: 9%; }
.future-v3 .future-v2-dot-complete { left: calc(55% - 6px); right: auto; top: 22%; }
.future-v3 .future-v2-guide-complete {
  left: 55%;
  right: auto;
  top: 22%;
  width: 13%;
  height: 10%;
  border-width: 1px 1px 0 0;
}
.future-v3 .future-v2-result {
  left: auto;
  right: 8%;
  top: 12%;
  width: min(32vw, 460px);
  min-height: 54vh;
  padding: 0 24px 22px;
  overflow: visible;
  border-radius: 28px;
}
.future-v3 .future-v2-result h3 { margin-top: 4px; font-size: clamp(14px, 1.15vw, 18px); }
.future-v3 .future-v2-gallery { gap: 18px; margin-top: 24px; }
.future-v3 .future-v2-gallery button {
  flex-basis: clamp(140px, 12vw, 180px);
  width: clamp(140px, 12vw, 180px);
  height: clamp(190px, 17vw, 250px);
  border-radius: 22px;
}
.future-v3 .future-v2-result footer { margin-top: 30px; font-size: 12px; }
.future-v3.show-result .future-v2-intro {
  opacity: 0;
  transform: translate(-50%, -12vh);
}
.future-v3.show-result .future-v2-promise,
.future-v3.show-result .future-v2-muted,
.future-v3.show-result .future-v2-reading,
.future-v3.show-result .future-v2-dot-read,
.future-v3.show-result .future-v2-guide-read,
.future-v3.show-result .future-v2-form,
.future-v3.show-result .future-v2-loading {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12vh) scale(.9);
  transition-duration: .45s;
}
.future-v3.show-result .future-v2-result-glow { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .future-v3 { height: 600svh; min-height: 0; }
  .future-v3 .future-v3-sticky { min-height: 0; }
  .future-v3-flow { inset: 36vh 0 0; }
  .future-v3 .future-v2-promise { right: 4%; top: 1%; width: 69%; }
  .future-v3 .future-v2-muted-one { right: 13%; top: 16%; }
  .future-v3 .future-v2-muted-two { right: 3%; top: 27%; }
  .future-v3 .future-v2-reading { left: 4%; top: 8%; }
  .future-v3 .future-v2-dot-read { left: 19%; top: 19%; }
  .future-v3 .future-v2-guide-read { left: 19%; top: 19%; width: 31%; height: 31%; }
  .future-v3 .future-v2-form { left: 3%; top: 48%; width: 45%; max-height: 42vh; }
  .future-v3 .future-v2-loading { left: auto; right: 3%; top: 53%; width: 45%; max-height: 38vh; }
  .future-v3.show-form .future-v2-form,
  .future-v3.show-loading .future-v2-loading { transform: none; }
  .future-v3 .future-v2-result-glow { left: -25vw; right: auto; top: 6vh; width: 150vw; height: 78vh; }
  .future-v3 .future-v2-complete-pill { left: 5%; top: 11%; }
  .future-v3 .future-v2-dot-complete { left: 22%; top: 21%; }
  .future-v3 .future-v2-guide-complete { left: 22%; top: 21%; width: 33%; height: 9%; }
  .future-v3 .future-v2-result {
    left: auto;
    right: 7%;
    top: 31%;
    width: 72%;
    min-height: 50vh;
    padding: 0 14px 16px;
    border-radius: 20px;
  }
  .future-v3 .future-v2-gallery { gap: 10px; margin-top: 18px; }
  .future-v3 .future-v2-gallery button { flex-basis: 110px; width: 110px; height: 154px; border-radius: 15px; }
  .future-v3 .future-v2-result footer { margin-top: 20px; font-size: 9px; }
}

/* Keep the Memory Lens connector anchored to the highlighted phrase at every viewport width. */
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
  left: var(--memory-word-center-x, 66%);
  transition: opacity .12s ease, transform .2s var(--ease), top .4s var(--ease);
}
.memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-copy em::after {
  height: var(--memory-connector-height, 19.25vh);
  transition: height 1.35s cubic-bezier(.22, 1, .36, 1) .12s, opacity .2s ease .08s;
}

@media (min-width: 901px) and (max-width: 1400px) {
  .memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal {
    transform: translateX(-60px);
  }
}

@media (max-width: 900px) {
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
    width: max-content;
    max-width: calc(100% - 24px);
  }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-signal {
    width: max-content;
    max-width: calc(100vw - 24px);
    margin-inline: auto;
  }
  .memory-v2.detection-focus:not(.mobile-left-focus) .memory-v2-signal .mimo-message {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}

/* Final timing overrides live after the responsive Memory Lens rules. */
.memory-v2 .mimo-message > span { font-size: 16.94px; }
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-reading-status {
  transition: opacity .3s ease 2s, transform .42s var(--ease) 2s;
}
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal {
  margin-top: 28px;
}
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal .mimo-message {
  animation: memory-capsule-result-reveal .62s var(--ease) 2.7s both;
}
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::before,
.memory-v2.user-selected.detection-focus:not(.mobile-left-focus) .memory-v2-signal::after {
  animation: memory-capsule-connector-reveal .28s ease 3.2s both;
}

@media (max-width: 900px) {
  .memory-v2 .mimo-message > span { font-size: 14.52px; }
}

/* Memory Lens handoff: draw from the found-memory capsule into the mobile UI. */
@keyframes memory-bridge-draw-down {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes memory-bridge-draw-left {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes memory-bridge-dot-in {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}

.memory-v2-mobile-bridge {
  position: fixed;
  z-index: 9;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.memory-v2-mobile-bridge span {
  position: absolute;
  display: block;
  opacity: .82;
}
.memory-bridge-vertical {
  top: var(--memory-bridge-start-y, calc(14vh + 62px));
  left: var(--memory-bridge-start-x, 74vw);
  height: calc(51vh - var(--memory-bridge-start-y, calc(14vh + 62px)));
  border-left: 2px dotted rgba(180, 153, 255, .72);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.memory-bridge-horizontal {
  top: 51vh;
  left: calc(25vw + min(19vw, 250px));
  width: calc(var(--memory-bridge-start-x, 74vw) - 25vw - min(19vw, 250px));
  border-top: 2px dotted rgba(180, 153, 255, .72);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}
.memory-v2-mobile-bridge i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a889ff;
  box-shadow: 0 0 0 4px rgba(168, 137, 255, .18), 0 0 18px rgba(149, 119, 255, .7);
  opacity: 0;
}
.memory-v2-mobile-bridge .memory-bridge-start {
  top: calc(var(--memory-bridge-start-y, calc(14vh + 62px)) - 4px);
  left: calc(var(--memory-bridge-start-x, 74vw) - 4px);
}
.memory-v2-mobile-bridge .memory-bridge-end {
  top: calc(51vh - 4px);
  left: calc(25vw + min(19vw, 250px) - 4px);
}
.memory-v2.memory-pinned.user-selected.mobile-bridge-focus .memory-v2-mobile-bridge { opacity: 1; }
.memory-v2.memory-pinned.user-selected.mobile-bridge-focus.mobile-focus .memory-v2-mobile-bridge { opacity: 0; }
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-vertical {
  animation: memory-bridge-draw-down 1.15s cubic-bezier(.22, 1, .36, 1) .55s both;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-horizontal {
  animation: memory-bridge-draw-left .78s cubic-bezier(.22, 1, .36, 1) 1.68s both;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-start {
  animation: memory-bridge-dot-in .24s ease .36s both;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-end {
  animation: memory-bridge-dot-in .28s ease 2.38s both;
}

.memory-v2 .memory-v2-inner::after {
  content: "";
  position: fixed;
  z-index: 7;
  inset: 0;
  background: #18191c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .72s ease;
}
.memory-v2.memory-pinned.user-selected.mobile-bridge-focus .memory-v2-inner::after { opacity: 1; }
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-header,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-gallery,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-copy {
  opacity: 0 !important;
  pointer-events: none;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-detection { z-index: 10; }
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-mobile-stage { z-index: 8; }

.memory-v2.user-selected.mobile-bridge-focus .memory-v2-reading-status { display: none; }
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal { margin: 0; transform: none; }
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal::before,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal::after { display: none !important; }
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-detection::before,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-detection::after { display: none !important; }
.memory-v2.user-selected.mobile-bridge-focus.detection-focus:not(.mobile-left-focus) .memory-v2-detection,
.memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
  top: 14vh;
  left: 74%;
  width: max-content;
  max-width: 38vw;
  transform: translate(-50%, 0);
  transition: top .72s var(--ease), left .72s var(--ease), transform .72s var(--ease), opacity .3s ease;
}
.memory-v2.user-selected.mobile-bridge-focus:not(.mobile-left-focus) .memory-v2-mobile-stage {
  opacity: 0;
  transform: translateY(24px);
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-mobile-stage {
  opacity: 1;
  transform: none;
  transition-duration: .8s, 1s;
}
.memory-v2.user-selected.mobile-left-focus:not(.mobile-focus) .memory-phone-compose {
  top: 51vh;
  left: 25vw;
  opacity: 1;
  transform: none;
}
.memory-v2.user-selected.mobile-focus .memory-phone-compose {
  top: 51vh;
  left: 25vw;
}
.memory-v2.user-selected.mobile-focus .memory-phone-result { left: 53%; }

@media (max-width: 900px) {
  .memory-v2.user-selected.mobile-bridge-focus.detection-focus:not(.mobile-left-focus) .memory-v2-detection,
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
    top: 12vh;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .memory-bridge-vertical {
    top: var(--memory-bridge-start-y, calc(12vh + 64px));
    left: var(--memory-bridge-start-x, 50vw);
    height: calc(53vh - var(--memory-bridge-start-y, calc(12vh + 64px)));
  }
  .memory-bridge-horizontal {
    top: 53vh;
    left: calc(8vw + min(42vw, 190px));
    width: calc(var(--memory-bridge-start-x, 50vw) - 8vw - min(42vw, 190px));
  }
  .memory-v2-mobile-bridge .memory-bridge-start {
    top: calc(var(--memory-bridge-start-y, calc(12vh + 64px)) - 4px);
    left: calc(var(--memory-bridge-start-x, 50vw) - 4px);
  }
  .memory-v2-mobile-bridge .memory-bridge-end {
    top: calc(53vh - 4px);
    left: calc(8vw + min(42vw, 190px) - 4px);
  }
  .memory-v2.user-selected.mobile-left-focus:not(.mobile-focus) .memory-phone-compose {
    top: 53vh;
    left: 8vw;
  }
  .memory-v2.user-selected.mobile-focus .memory-phone-compose {
    top: 53vh;
    left: 8vw;
  }
}

/* Final mobile handoff: connect to the right phone first, then reveal the left phone. */
.memory-v2.user-selected.mobile-bridge-focus .memory-phone {
  width: min(19vw, 250px, 22vh);
  max-height: 44vh;
  object-fit: contain;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-vertical {
  height: calc(48vh - var(--memory-bridge-start-y, calc(14vh + 62px)));
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-horizontal {
  top: 48vh;
  left: 53vw;
  width: calc(var(--memory-bridge-start-x, 74vw) - 53vw);
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-mobile-bridge .memory-bridge-end {
  top: calc(48vh - 4px);
  left: calc(53vw - 4px);
}
.memory-v2.user-selected.mobile-left-focus .memory-phone-result {
  top: 48vh;
  left: 53vw;
  opacity: 1;
  transform: none;
}
.memory-v2.user-selected.mobile-left-focus:not(.mobile-focus) .memory-phone-compose {
  top: 48vh;
  left: 25vw;
  opacity: 0;
  transform: translateY(30px) scale(.96);
}
.memory-v2.user-selected.mobile-focus .memory-phone-compose {
  top: 48vh;
  left: 25vw;
  opacity: 1;
  transform: none;
}
.memory-v2.user-selected.mobile-focus .memory-phone-result {
  top: 48vh;
  left: 53vw;
}

@media (max-width: 900px) {
  .memory-v2.user-selected.mobile-bridge-focus .memory-phone {
    width: min(42vw, 190px, 22vh);
    max-height: 44vh;
  }
  .memory-v2.user-selected.mobile-bridge-focus .memory-bridge-vertical {
    height: calc(48vh - var(--memory-bridge-start-y, calc(12vh + 64px)));
  }
  .memory-v2.user-selected.mobile-bridge-focus .memory-bridge-horizontal {
    top: 48vh;
    left: 50vw;
    width: calc(var(--memory-bridge-start-x, 50vw) - 50vw);
  }
  .memory-v2.user-selected.mobile-bridge-focus .memory-v2-mobile-bridge .memory-bridge-end {
    top: calc(48vh - 4px);
    left: calc(50vw - 4px);
  }
  .memory-v2.user-selected.mobile-left-focus .memory-phone-result,
  .memory-v2.user-selected.mobile-focus .memory-phone-result {
    top: 48vh;
    left: 50vw;
  }
  .memory-v2.user-selected.mobile-left-focus:not(.mobile-focus) .memory-phone-compose,
  .memory-v2.user-selected.mobile-focus .memory-phone-compose {
    top: 48vh;
    left: 6vw;
  }
}

/* Final continuity overrides: no capsule jump before the automatic page movement. */
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-reading-status {
  display: block;
  visibility: hidden;
  opacity: 0;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal {
  width: max-content;
  margin: 28px 0 0 auto;
  transform: none;
}
.memory-v2.user-selected.mobile-bridge-focus.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
  top: 58vh;
  left: var(--memory-word-center-x, 66%);
  width: min(620px, 42vw);
  max-width: none;
  transform: translate(-50%, 0);
  transition: none;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
  top: -8vh;
  left: 74%;
  width: max-content;
  max-width: 38vw;
  transform: translate(-50%, 0);
  transition: top 1.8s linear, left 1.8s linear, transform 1.8s linear, opacity .3s ease;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-mobile-stage { transform: none; }
.memory-v2.user-selected.mobile-bridge-focus:not(.mobile-left-focus) .memory-phone-result {
  top: 96vh;
  left: 53vw;
  opacity: 0;
  transform: translateY(32px) scale(.96);
}
.memory-v2.user-selected.mobile-left-focus .memory-phone-result {
  top: 48vh;
  left: 53vw;
  opacity: 1;
  transform: none;
  transition: opacity .72s var(--ease) 1s, transform 1.1s var(--ease) .72s, top 1.8s linear, left 1.8s linear;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-vertical {
  top: var(--memory-bridge-start-y, 70vh);
  left: var(--memory-bridge-start-x, 66vw);
  height: calc(var(--memory-bridge-corner-y, 96vh) - var(--memory-bridge-start-y, 70vh));
}
.memory-v2.user-selected.mobile-bridge-focus .memory-bridge-horizontal {
  top: var(--memory-bridge-corner-y, 96vh);
  left: var(--memory-bridge-end-x, 53vw);
  width: calc(var(--memory-bridge-start-x, 66vw) - var(--memory-bridge-end-x, 53vw));
  animation: none;
  transform: scaleX(0);
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-mobile-bridge .memory-bridge-end {
  top: calc(var(--memory-bridge-corner-y, 96vh) - 4px);
  left: calc(var(--memory-bridge-end-x, 53vw) - 4px);
  animation: none;
  opacity: 0;
}
.memory-v2.user-selected.mobile-left-focus .memory-bridge-horizontal {
  animation: memory-bridge-draw-left .8s cubic-bezier(.22, 1, .36, 1) .72s both;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-mobile-bridge .memory-bridge-end {
  animation: memory-bridge-dot-in .26s ease 1.42s both;
}

@media (max-width: 900px) {
  .memory-v2.user-selected.mobile-bridge-focus.detection-focus:not(.mobile-left-focus) .memory-v2-detection {
    top: 67vh;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
    top: -10vh;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .memory-v2.user-selected.mobile-bridge-focus:not(.mobile-left-focus) .memory-phone-result {
    top: 96vh;
    left: 50vw;
  }
  .memory-v2.user-selected.mobile-left-focus .memory-phone-result {
    top: 48vh;
    left: 50vw;
  }
}

/* Memory Lens film reveal — the result capsule leads into a tactile archive. */
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-reading-status {
  margin-left: 92px;
}
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal {
  width: max-content;
  margin: 26px 0 0 0;
}
.memory-v2-mobile-bridge,
.memory-v2-mobile-stage {
  display: none !important;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-reading-status {
  display: none;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal {
  width: max-content;
  margin: 0;
  transform: none;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal::before,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal::after,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-detection::before,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-detection::after {
  display: none !important;
}
.memory-v2.user-selected.mobile-bridge-focus.detection-focus .memory-v2-detection,
.memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
  top: 13vh;
  left: 50%;
  width: max-content;
  max-width: min(720px, 70vw);
  transform: translate(-50%, 0);
  transition: top 1.15s cubic-bezier(.22,1,.36,1), left 1.15s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1);
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-header,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-gallery,
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-copy {
  opacity: 0 !important;
  pointer-events: none;
}
.memory-v2-film-stage {
  position: fixed;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 24px;
  padding: 20vh 2.4vw 5vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(54px);
  transition: opacity .7s ease, transform 1.05s cubic-bezier(.22,1,.36,1), visibility 0s linear .8s;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-film-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: .15s, .15s, 0s;
  cursor: none;
}
.memory-film-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.25vw, 22px);
  width: min(94vw, 1660px);
  padding: clamp(28px, 3.2vw, 48px) clamp(20px, 2.5vw, 38px);
  border: 1px solid rgba(169, 145, 239, .2);
  background:
    radial-gradient(circle, #0c0d10 0 4px, transparent 4.5px) 0 7px / 28px 16px repeat-x,
    radial-gradient(circle, #0c0d10 0 4px, transparent 4.5px) 0 calc(100% - 7px) / 28px 16px repeat-x,
    linear-gradient(100deg, rgba(91,74,128,.32), rgba(32,33,40,.92) 22%, rgba(47,39,66,.9) 70%, rgba(91,74,128,.28));
  border-radius: 18px;
  box-shadow: 0 34px 90px rgba(0,0,0,.46), inset 0 0 50px rgba(130,96,220,.08);
  overflow: hidden;
}
.memory-film-frame {
  --lens-x: 50%;
  --lens-y: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(238,232,255,.12);
  border-radius: 7px;
  background: #121317;
  opacity: 0;
  transform: translateX(110px) rotate(2deg) scale(.94);
}
.memory-film-frame img,
.memory-film-frame::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.memory-film-frame img {
  filter: grayscale(1) blur(4px) brightness(.5) contrast(.9);
  transform: scale(1.035);
  transition: filter .45s ease;
}
.memory-film-frame::after {
  content: "";
  background: var(--film-image) center / cover no-repeat;
  opacity: 0;
  -webkit-clip-path: circle(58px at var(--lens-x) var(--lens-y));
  clip-path: circle(58px at var(--lens-x) var(--lens-y));
  -webkit-mask-image: radial-gradient(circle 112px at var(--lens-x) var(--lens-y), #000 0 68%, rgba(0,0,0,.78) 78%, transparent 100%);
  mask-image: radial-gradient(circle 112px at var(--lens-x) var(--lens-y), #000 0 68%, rgba(0,0,0,.78) 78%, transparent 100%);
  transition: opacity .18s ease;
}
.memory-film-frame.lens-active::after { opacity: 1; }
.memory-v2.user-selected.mobile-left-focus .memory-film-frame {
  animation: memory-film-deal .82s cubic-bezier(.18,.86,.25,1) calc(.18s + var(--film-index) * .11s) both;
}
.memory-film-hint {
  margin: 0;
  color: rgba(211,201,238,.58);
  font-size: 13px;
  letter-spacing: .08em;
  text-align: center;
}
.memory-film-lens {
  --lens-screen-x: 50vw;
  --lens-screen-y: 50vh;
  position: fixed;
  z-index: 20;
  top: var(--lens-screen-y);
  left: var(--lens-screen-x);
  width: 116px;
  height: 116px;
  border: 2px solid rgba(225,216,255,.9);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.12), transparent 48%);
  box-shadow: 0 0 0 6px rgba(132,98,219,.13), 0 12px 42px rgba(0,0,0,.34), inset 0 0 22px rgba(158,126,255,.13);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.74);
  transition: opacity .18s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
.memory-film-lens::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -19px;
  width: 42px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(225,216,255,.9), rgba(139,105,230,.76));
  transform: rotate(48deg);
  transform-origin: left center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.memory-film-lens.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@keyframes memory-film-deal {
  0% { opacity: 0; transform: translateX(110px) rotate(2deg) scale(.94); }
  64% { opacity: 1; transform: translateX(-7px) rotate(-.35deg) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-reading-status { margin-left: 38px; }
  .memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal { margin-left: 0; }
  .memory-v2.user-selected.mobile-bridge-focus.detection-focus .memory-v2-detection,
  .memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
    top: 12vh;
    left: 50%;
    max-width: calc(100vw - 24px);
  }
  .memory-v2-film-stage { padding: 21vh 14px 4vh; gap: 16px; }
  .memory-film-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(94vw, 680px);
    padding: 25px 18px;
  }
  .memory-film-lens { width: 92px; height: 92px; }
  .memory-film-frame::after {
    -webkit-clip-path: circle(46px at var(--lens-x) var(--lens-y));
    clip-path: circle(46px at var(--lens-x) var(--lens-y));
    -webkit-mask-image: radial-gradient(circle 88px at var(--lens-x) var(--lens-y), #000 0 68%, transparent 100%);
    mask-image: radial-gradient(circle 88px at var(--lens-x) var(--lens-y), #000 0 68%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .memory-v2.user-selected.mobile-left-focus .memory-film-frame { animation-duration: .01ms; }
  .memory-v2.user-selected.mobile-left-focus .memory-v2-film-stage { cursor: auto; }
  .memory-film-lens { display: none; }
  .memory-film-frame img { filter: grayscale(.65) brightness(.68); }
  .memory-film-frame:active::after { opacity: 1; }
}

/* Capsule alignment and a hidden handoff keep the result from drifting sideways. */
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-reading-status {
  margin-left: auto;
  margin-right: auto;
}
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal {
  margin: 26px 0 0 -92px;
}
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal::before,
.memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal::after {
  display: none !important;
}
.memory-v2.user-selected.mobile-bridge-focus.detection-focus .memory-v2-detection,
.memory-v2.user-selected.mobile-left-focus .memory-v2-detection {
  transition: none;
}
.memory-v2.user-selected.mobile-bridge-focus .memory-v2-signal {
  animation: memory-capsule-page-arrive .74s ease .18s both;
}
@keyframes memory-capsule-page-arrive {
  0%, 38% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

/* Liquid-glass film with a small multi-layer parallax response. */
.memory-v2-film-stage {
  --film-tilt-x: 0deg;
  --film-tilt-y: 0deg;
  --film-shift-x: 0px;
  --film-shift-y: 0px;
  --film-light-x: 50%;
  --film-light-y: 42%;
  perspective: 1400px;
}
.memory-v2-film-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7vh -8vw;
  background:
    radial-gradient(circle at var(--film-light-x) var(--film-light-y), rgba(162,126,255,.18), transparent 30%),
    radial-gradient(circle at calc(100% - var(--film-light-x)) 78%, rgba(108,183,255,.09), transparent 27%);
  filter: blur(18px);
  transform: translate3d(calc(0px - var(--film-shift-x)), calc(0px - var(--film-shift-y)), -90px) scale(1.06);
  transition: transform .24s ease-out, background-position .24s ease-out;
  pointer-events: none;
}
.memory-film-track {
  isolation: isolate;
  border-color: rgba(221,211,255,.34);
  background:
    radial-gradient(circle at var(--film-light-x) 8%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(112deg, rgba(174,150,235,.16), rgba(35,36,45,.48) 34%, rgba(116,91,168,.16) 72%, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(30px) saturate(155%) brightness(1.04);
  backdrop-filter: blur(30px) saturate(155%) brightness(1.04);
  box-shadow:
    0 36px 100px rgba(0,0,0,.46),
    inset 0 1px rgba(255,255,255,.28),
    inset 0 -1px rgba(137,104,217,.24),
    0 0 0 1px rgba(128,96,206,.08);
  transform: translate3d(var(--film-shift-x), var(--film-shift-y), 0) rotateX(var(--film-tilt-x)) rotateY(var(--film-tilt-y));
  transform-style: preserve-3d;
  transition: transform .2s ease-out, box-shadow .35s ease;
}
.memory-film-track::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(7,8,11,.92) 0 4px, transparent 4.6px) 0 7px / 28px 16px repeat-x,
    radial-gradient(circle, rgba(7,8,11,.92) 0 4px, transparent 4.6px) 0 calc(100% - 7px) / 28px 16px repeat-x;
  pointer-events: none;
}
.memory-film-track::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 1px;
  border-radius: 17px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.2), transparent 17%, transparent 66%, rgba(190,164,255,.1)),
    radial-gradient(ellipse at var(--film-light-x) -10%, rgba(255,255,255,.2), transparent 35%);
  mix-blend-mode: screen;
  opacity: .68;
  pointer-events: none;
}
.memory-film-frame {
  --lens-px: 50%;
  --lens-py: 50%;
  background: rgba(16,17,22,.44);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 32px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  transform-style: preserve-3d;
}
.memory-film-frame img {
  filter: grayscale(1) blur(3px) brightness(.52) contrast(.92);
}
.memory-film-frame::after {
  background-size: 118% 118%;
  background-position: var(--lens-px) var(--lens-py);
  filter: saturate(1.14) contrast(1.04) brightness(1.04);
}
.memory-film-lens {
  border-color: rgba(241,236,255,.95);
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.3), transparent 21%),
    radial-gradient(circle at 62% 68%, transparent 44%, rgba(153,121,232,.13) 72%, rgba(255,255,255,.22));
  -webkit-backdrop-filter: brightness(1.08) saturate(1.18);
  backdrop-filter: brightness(1.08) saturate(1.18);
  box-shadow:
    0 0 0 5px rgba(173,145,242,.1),
    0 18px 50px rgba(0,0,0,.36),
    inset 9px 11px 18px rgba(255,255,255,.1),
    inset -8px -10px 18px rgba(101,73,177,.16);
}

@media (max-width: 900px) {
  .memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-reading-status {
    margin-left: auto;
    margin-right: auto;
  }
  .memory-v2.user-selected.detection-focus:not(.mobile-bridge-focus) .memory-v2-signal {
    margin-left: -28px;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .memory-film-track { transform: none; }
  .memory-v2-film-stage::before { transform: none; }
}

/* Remove the intermediate result-capsule slide completely. */
.memory-v2.user-selected.mobile-bridge-focus:not(.mobile-left-focus) .memory-v2-signal {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-signal {
  visibility: visible;
  animation: memory-capsule-page-arrive .62s ease .08s both;
}

/* Contemporary floating archive: no literal film perforations or heavy frame. */
.memory-film-track {
  gap: clamp(12px, 1.4vw, 24px);
  padding: clamp(22px, 2.4vw, 36px);
  border-radius: 34px;
  border-color: rgba(225,217,255,.3);
  background:
    radial-gradient(circle at var(--film-light-x) 4%, rgba(255,255,255,.23), transparent 28%),
    linear-gradient(118deg, rgba(157,132,219,.12), rgba(31,32,39,.36) 42%, rgba(112,88,164,.12));
}
.memory-film-track::before { display: none; }
.memory-film-track::after { border-radius: 33px; }
.memory-film-frame {
  border-radius: 18px;
  border-color: rgba(242,237,255,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 42px rgba(0,0,0,.2);
}

/* Opening thumbnail — an explorable memory space inspired by layered orbital scenes. */
.brand-hero {
  --hero-near-x: 0px;
  --hero-near-y: 0px;
  --hero-far-x: 0px;
  --hero-far-y: 0px;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  --hero-light-x: 50%;
  --hero-light-y: 48%;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--hero-light-x) var(--hero-light-y), rgba(113,79,198,.32), transparent 32%),
    radial-gradient(circle at 76% 18%, rgba(94,64,171,.22), transparent 27%),
    linear-gradient(145deg, #08080b, #131019 54%, #08090d);
}
.brand-atmosphere {
  width: 112vw;
  left: -6vw;
  bottom: -58%;
  opacity: .62;
  transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0);
  transition: transform .32s ease-out;
}
.brand-space-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  perspective: 1400px;
  transform: rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transform-style: preserve-3d;
  transition: transform .28s ease-out;
  pointer-events: none;
}
.brand-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(203,188,255,.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}
.brand-orbit-wide { width: min(78vw, 1240px); aspect-ratio: 1.82; }
.brand-orbit-core {
  width: min(46vw, 720px);
  aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(189,168,255,.12);
  transform: translate(-50%, -50%) rotate(18deg);
}
.brand-memory-fragment {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(229,220,255,.2);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 26px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  transition: transform .28s ease-out;
}
.brand-memory-fragment img { width: 100%; height: 100%; object-fit: cover; opacity: .66; filter: saturate(.78) contrast(.92); }
.brand-memory-fragment-one {
  left: 5vw;
  top: 17vh;
  width: clamp(160px, 18vw, 310px);
  aspect-ratio: 1.45;
  transform: translate3d(var(--hero-near-x), var(--hero-near-y), 120px) rotate(-7deg);
}
.brand-memory-fragment-two {
  right: 7vw;
  top: 13vh;
  width: clamp(145px, 15vw, 260px);
  aspect-ratio: 1.25;
  transform: translate3d(var(--hero-far-x), var(--hero-far-y), -70px) rotate(8deg);
}
.brand-memory-fragment-three {
  right: 13vw;
  bottom: 5vh;
  width: clamp(180px, 21vw, 360px);
  aspect-ratio: 1.65;
  transform: translate3d(var(--hero-near-x), var(--hero-near-y), 90px) rotate(-4deg);
}
.brand-glass-orb {
  position: absolute;
  border: 1px solid rgba(234,227,255,.25);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.22), rgba(132,97,219,.08) 44%, rgba(10,10,14,.16));
  box-shadow: inset 10px 12px 30px rgba(255,255,255,.08), inset -12px -16px 28px rgba(85,51,172,.14), 0 18px 50px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  backdrop-filter: blur(9px) saturate(140%);
  transition: transform .3s ease-out;
}
.brand-glass-orb-one {
  left: 18vw;
  bottom: 12vh;
  width: clamp(42px, 5vw, 84px);
  aspect-ratio: 1;
  transform: translate3d(var(--hero-far-x), var(--hero-far-y), -30px);
}
.brand-glass-orb-two {
  right: 27vw;
  top: 13vh;
  width: clamp(28px, 3.2vw, 56px);
  aspect-ratio: 1;
  transform: translate3d(var(--hero-near-x), var(--hero-near-y), 80px);
}
.brand-copy {
  width: min(780px, 66vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-eyebrow {
  margin-bottom: clamp(28px, 4.5vh, 48px);
  color: rgba(220,211,247,.48);
  font-size: 10px;
  letter-spacing: .22em;
}
.brand-hero-logo { width: min(58%, 430px); }
.brand-copy h1 {
  margin-top: clamp(24px, 4vh, 42px);
  color: rgba(255,255,255,.78);
  font-size: clamp(24px, 2.5vw, 42px);
  font-weight: 520;
}
.brand-start {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(34px, 6vh, 66px);
  padding: 7px 8px 7px 24px;
  border: 1px solid rgba(221,210,255,.22);
  border-radius: 999px;
  background: rgba(42,35,59,.38);
  color: rgba(244,240,255,.9);
  font-size: 13px;
  text-decoration: none;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 16px 40px rgba(0,0,0,.24);
  transition: transform .35s var(--ease), background .35s ease, border-color .35s ease;
}
.brand-start i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f3efff;
  color: #27222f;
  font-size: 17px;
  font-style: normal;
}
.brand-start:hover { transform: translateY(-3px); background: rgba(79,61,119,.48); border-color: rgba(226,216,255,.42); }
.brand-move-cue {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  bottom: 34px;
  color: rgba(220,211,247,.32);
  font-size: 9px;
  letter-spacing: .2em;
}

@media (max-width: 900px) {
  .brand-copy { width: 86vw; }
  .brand-eyebrow { margin-bottom: 28px; font-size: 8px; }
  .brand-hero-logo { width: min(72%, 330px); }
  .brand-copy h1 { font-size: clamp(22px, 6vw, 30px); }
  .brand-memory-fragment-one { left: -12vw; top: 18vh; width: 38vw; }
  .brand-memory-fragment-two { right: -10vw; top: 15vh; width: 32vw; }
  .brand-memory-fragment-three { right: 1vw; bottom: 7vh; width: 44vw; }
  .brand-orbit-wide { width: 118vw; }
  .brand-orbit-core { width: 76vw; }
  .brand-move-cue { left: 22px; }
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .brand-space-scene,
  .brand-atmosphere,
  .brand-memory-fragment,
  .brand-glass-orb { transform: none; }
  .brand-move-cue { display: none; }
}

/* Purple prelude first, then the result capsule and memory orbs. */
.memory-v2 .memory-v2-inner::after {
  background:
    radial-gradient(ellipse 58% 42% at 50% 4%, rgba(152,112,255,.34), rgba(112,76,214,.13) 34%, transparent 72%),
    radial-gradient(ellipse 42% 34% at 50% 18%, rgba(123,85,231,.12), transparent 76%),
    #18191c;
  transition: opacity 1.15s ease;
}
.memory-v2.user-selected.mobile-left-focus .memory-v2-signal {
  animation: memory-capsule-page-arrive .7s ease .42s both;
}

/* Transparent memory orbs replace the literal film strip. */
.memory-film-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 56px);
  width: min(92vw, 1320px);
  padding: 24px 0 34px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.memory-film-track::before { display: block; }
.memory-film-track::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(178,145,255,.2) 28%, rgba(215,200,255,.28) 50%, rgba(178,145,255,.2) 72%, transparent);
  box-shadow: 0 0 32px rgba(131,91,235,.2);
}
.memory-film-track::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -8% 3%;
  border: 1px solid rgba(191,166,255,.1);
  border-radius: 50%;
  background: none;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}
.memory-film-frame {
  flex: 0 0 clamp(150px, 15vw, 260px);
  width: clamp(150px, 15vw, 260px);
  aspect-ratio: 1;
  border: 1px solid rgba(238,230,255,.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.2), transparent 22%),
    rgba(113,83,168,.1);
  box-shadow:
    inset 12px 14px 34px rgba(255,255,255,.08),
    inset -18px -20px 38px rgba(75,46,144,.17),
    0 30px 75px rgba(0,0,0,.34),
    0 0 45px rgba(133,93,238,.1);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.memory-film-frame:nth-child(1) {
  flex-basis: clamp(130px, 12vw, 210px);
  width: clamp(130px, 12vw, 210px);
  margin-top: 86px;
}
.memory-film-frame:nth-child(2) {
  flex-basis: clamp(180px, 18vw, 310px);
  width: clamp(180px, 18vw, 310px);
  margin-top: -28px;
}
.memory-film-frame:nth-child(3) {
  flex-basis: clamp(155px, 15.5vw, 270px);
  width: clamp(155px, 15.5vw, 270px);
  margin-top: 72px;
}
.memory-film-frame:nth-child(4) {
  flex-basis: clamp(125px, 11vw, 190px);
  width: clamp(125px, 11vw, 190px);
  margin-top: -12px;
}
.memory-film-frame img,
.memory-film-frame::after { border-radius: 50%; }
.memory-film-frame img {
  z-index: 1;
  filter: grayscale(1) blur(4px) brightness(.48) contrast(.92);
}
.memory-film-frame::after { z-index: 2; }
.memory-film-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 16%),
    linear-gradient(145deg, rgba(255,255,255,.13), transparent 26%, transparent 68%, rgba(126,88,223,.13));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.memory-film-hint { margin-top: 6px; }

@media (max-width: 900px) {
  .memory-film-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(88vw, 620px);
    padding-inline: 8vw;
  }
  .memory-film-frame,
  .memory-film-frame:nth-child(n) {
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
  }
  .memory-film-frame:nth-child(1),
  .memory-film-frame:nth-child(3) { transform: translateY(14px); }
  .memory-film-track::after { inset: -5% -2%; }
}

/* Story Cue connector polish — every dotted path grows into place and only
   meets the outside edge of its destination bubble. */
.story-v2-line {
  transition-property: opacity, transform;
  transition-duration: .35s, 1.7s;
  transition-timing-function: ease, cubic-bezier(.2,.72,.22,1);
}
.story-v2-line-left { transition-delay: 0s, .12s; }
.story-v2-line-down { transition-delay: 0s, .2s; }
.story-v2-line-right {
  left: 66.5%;
  top: 83%;
  width: 20.5%;
  transform-origin: left center;
  transition-delay: 0s, .16s;
}
.story-v2-line-right::after {
  right: 0;
  bottom: 0;
  height: 24vh;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 1.65s cubic-bezier(.2,.72,.22,1) 1.45s;
}
.story-v2-line-right::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: -6px;
  bottom: calc(24vh - 6px);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #a588ff;
  box-shadow: 0 0 0 4px rgba(165,136,255,.3), 0 0 20px rgba(165,136,255,.8);
  opacity: 0;
  transform: scale(.35);
  transition: opacity .35s ease 2.9s, transform .55s cubic-bezier(.2,.8,.2,1) 2.9s;
}
.story-v2-node-right {
  left: calc(87% - 6px);
  top: calc(78% - 6px);
}
.story-v2.show-complete .story-v2-line-right::after { transform: scaleY(1); }
.story-v2.show-complete .story-v2-line-right::before { opacity: 1; transform: scale(1); }

@media (min-width: 1400px) and (min-height: 800px) {
  .story-v2-line-right { left: 64.5%; top: 78%; width: 22.5%; }
  .story-v2-line-right::after { height: 17.3vh; }
  .story-v2-line-right::before { bottom: calc(17.3vh - 6px); }
  .story-v2-node-right { left: calc(87% - 6px); top: calc(78% - 6px); }
}

@media (max-width: 900px) {
  .story-v2-line-right { left: 87%; top: 79%; width: 7%; transform-origin: right center; }
  .story-v2-line-right::after { height: 22vh; }
  .story-v2-line-right::before { bottom: calc(22vh - 5px); width: 10px; height: 10px; right: -5px; }
  .story-v2-node-right { left: calc(94% - 5px); top: calc(79% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .story-v2-line,
  .story-v2-line-right::after,
  .story-v2-line-right::before { transition: none; }
}