/* The MyVault case (started 2026-10-13). Structure and experiments: 40-Marketing/Cases/MyVault/. */

/* ---------- 01 · Hero: the way in (the app's splash, SplashView.swift · Figma 520:50883 → 520:50903) ----------
   The hero is the phone's window at the page's size. The ramp is 2328 / 852 = 2.7324 windows tall and travels
   1476 / 852 = 1.7324 of them (case-myvault-splash.js sets --p, 0 → 1). Lockup at Figma's proportions (530:50966):
   46 mark box (glyph 36.8 × 41.4), 6 of air, 119 × 36 wordmark box (glyph 115.48 × 32.4), the name 4 below centre. */
.mv-hero {
  --H: clamp(440px, 41.667vw, 800px);     /* 600 at 1440, 800 at 1920 (Markiian 2026-10-13: not full screen) */
  --u: clamp(1.1px, 100vw / 1000, 1.8px);  /* one Figma pt of the lockup: 1.44 px at 1440 (lockup ~250 px), 1.1 px on a phone */
  --p: 0;
  position: relative;
  height: var(--H);
  overflow: hidden;
  background: #0d1b1b;
  cursor: pointer;
  isolation: isolate;
}
/* Figma 520:50901, stop for stop */
.mv-hero__ramp {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--H) * 2.7324);
  transform: translate3d(0, calc(var(--H) * -1.7324 * var(--p)), 0);
  will-change: transform;
  background: linear-gradient(180deg,
    #0d1b1b 1%, #324241 11.499%, #5c706f 27.301%, #d7cfcb 44.116%, #f3eeec 55.719%,
    #fbf7f5 63.319%, #faf6f5 80.177%, #e0d2ce 91.189%, #9fbcbc 100%);
}
/* fine grain over the ramp, so a gradient this long never bands (as in the Ramp reference) */
.mv-hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-size: 256px 256px; opacity: .07; mix-blend-mode: overlay;
}

.mv-hero__lockup {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center;
  translate: -50% -50%;
  height: calc(46 * var(--u));
}
.mv-hero__mark {
  flex: none; display: grid; place-items: center;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  opacity: 0; will-change: transform, opacity;
}
.mv-hero__mark svg { width: calc(36.8 * var(--u)); height: calc(41.4 * var(--u)); display: block; overflow: visible; }
/* each of the six segments, and each of the seven letters, moves on its own (case-myvault-splash.js) */
.mv-hero__mark [data-mv-seg], .mv-hero__name [data-mv-letter] { fill: #000; }   /* not "path": the wedge masks are paths too, and must stay white */
/* the name builds in place, left to right (case-myvault-splash.js) */
.mv-hero__name {
  flex: none; position: relative;
  width: 0; height: calc(36 * var(--u));   /* JS widens it with the wipe: the mark starts centred and the pair glides left to end centred */
  margin-left: calc(6 * var(--u));
  translate: 0 calc(4 * var(--u));
}
.mv-hero__name svg {
  position: absolute; left: calc(1.76 * var(--u)); top: calc(1.8 * var(--u));
  width: calc(115.48 * var(--u)); height: calc(32.4 * var(--u)); max-width: none; display: block;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .mv-hero { --p: 1; }
  .mv-hero__mark { opacity: 1; }
  .mv-hero__name { width: calc(119 * var(--u)); }
}

/* ---------- 02 · From SMD — Product and Vision (Figma 2040:4625) ----------
   Daisy's From block, same 1920 frame (content at x 228) and the same --u scale. Two rows of square media:
   Product text | UI-morph film, then the Vision film | Vision text; columns 713 + 35 gap, rows 74 apart. */
:root { --mv-cap: calc(1440px / 1760); }
.mv-from { background: #fbf7f5; container-type: inline-size; --btn-ground: #fbf7f5; --btn-mute-a: 10%; }   /* Hide = 10 % black on this paper (Markiian 2026-10-13) */
.mv-from__frame { --u: min(var(--mv-cap), 100cqw / 1920); position: relative; max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u)) calc(228 * var(--u)); transition: padding .5s cubic-bezier(.2, .7, .2, 1); }
.mv-from__head { position: relative; display: flex; align-items: center; min-height: calc(48 * var(--u)); }
.mv-from__by { flex: none; width: calc(482 * var(--u)); margin: 0; display: flex; align-items: center; gap: max(8px, calc(16 * var(--u))); }
.mv-from__logo { display: block; width: clamp(96px, calc(162 * var(--u)), 162px); height: auto; }
.mv-from__and { font: 400 clamp(26px, calc(48 * var(--u)), 48px) / 1 "PT Serif", Georgia, serif; color: #000; opacity: .5; }
.mv-from__smd { position: relative; display: inline-block; width: clamp(44px, calc(80 * var(--u)), 80px); aspect-ratio: 2; border-radius: 45px; background: #f61515; }
.mv-from__smd img { position: absolute; left: 13.8%; top: 9.85%; width: 72.2%; height: 80%; }
.mv-from__title { margin: 0; font: 400 clamp(26px, calc(48 * var(--u)), 48px) / 1 "PT Serif", Georgia, serif; color: #000; }
.mv-from__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.mv-from__body > div { min-height: 0; overflow: hidden; }
.mv-from__grid { display: grid; grid-template-columns: calc(713 * var(--u)) calc(713 * var(--u)); column-gap: calc(35 * var(--u)); row-gap: calc(74 * var(--u));
  padding: calc(80 * var(--u)) 0 0 calc(2 * var(--u)); align-items: start; }
.mv-from__block h3 { margin: 0 0 calc(20 * var(--u)); font: italic 400 clamp(28px, calc(40 * var(--u)), 40px) / 1 "PT Serif", Georgia, serif; color: #000; opacity: .5; }
.mv-from__block p { margin: 0; max-width: calc(713 * var(--u)); font: 400 clamp(22px, calc(40 * var(--u)), 40px) / 1.25 "PT Serif", Georgia, serif; color: #000; }   /* 40, the size of the labels (Markiian 2026-10-13) */
.mv-from__media { margin: 0; aspect-ratio: 1; overflow: hidden; position: relative; }
.mv-from__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-from__media--product { margin-top: calc(4 * var(--u)); }
/* the Vision film: the sea in the MyVault hexagon on the dark of the app's splash (Figma 2042:5688, measured on its 600 export) */
.mv-from__media--vision { background: #0d1b1b; }
.mv-from__hex { position: absolute; left: 11.83%; top: 5.33%; width: 76.17%; height: 89.17%;
  -webkit-mask: url(assets/case/myvault/hex-mask.svg) center / 100% 100% no-repeat; mask: url(assets/case/myvault/hex-mask.svg) center / 100% 100% no-repeat; }
.mv-from__word { position: absolute; left: 50%; top: 50.2%; width: 25.5%; height: auto; translate: -50% -50%; filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { .mv-from__frame, .mv-from__body { transition: none; } }
@media (max-width: 700px) {
  .mv-from__frame { padding: 56px 16px 64px; }
  .mv-from__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mv-from__by { width: auto; }
  .mv-from__title { font-size: 28px; }
  .mv-from__grid { grid-template-columns: 1fr; row-gap: 28px; padding: 32px 0 0; }
  .mv-from__media--vision { order: 4; }
  .mv-from__block--vision { order: 3; }
  .mv-from__media--product { margin-top: 0; }
  .mv-from__block p { max-width: none; font-size: 22px; }
}

/* ---------- 03 · The app on the desk (Figma 2068:864) ----------
   Same 1920 frame and --u as From: 80 top and bottom, content at x 228 (both sides). The phone mockup 960² | 80 gap |
   a 424 column holding two 424×440 cards 80 apart. */
.mv-desk { background: #fbf7f5; container-type: inline-size; }
.mv-desk__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(228 * var(--u)); display: flex; flex-direction: column; gap: calc(80 * var(--u)); }
.mv-desk__row { display: grid; grid-template-columns: calc(960 * var(--u)) calc(424 * var(--u)); column-gap: calc(80 * var(--u)); }
.mv-desk__row--ask { grid-template-columns: calc(480 * var(--u)) calc(904 * var(--u)); }
.mv-desk__road { margin: 0; aspect-ratio: 480 / 600; overflow: hidden; }
.mv-desk__phone { margin: 0; aspect-ratio: 1; overflow: hidden; }
.mv-desk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-desk__cards { display: grid; grid-template-rows: 1fr 1fr; row-gap: calc(80 * var(--u)); }
.mv-desk__cards img { aspect-ratio: 424 / 440; height: auto; }
/* the Ask panel (Figma 2068:1392): 904×600, the gradient top to bottom, padding 20/80, the lead and the drum 352 wide, 40 apart */
.mv-ask { position: relative; display: flex; align-items: center; gap: calc(40 * var(--u)); padding: 0 calc(80 * var(--u)); overflow: hidden;
  background: linear-gradient(180deg, #eeeceb 0%, #e5dddc 45%, #d7c7c3 75%, #87a3a3 100%);
  font: 400 calc(40 * var(--u)) / 1.25 "PT Serif", Georgia, serif; --lh: calc(50 * var(--u)); }
.mv-ask p { margin: 0; }
.mv-ask__lead { flex: none; width: calc(352 * var(--u)); color: #094545; }
.mv-ask__drum { position: relative; flex: none; width: calc(352 * var(--u)); height: 100%; perspective: calc(1100 * var(--u)); perspective-origin: 0 50%; }
.mv-ask__drum > span[data-w] { position: absolute; left: 0; top: 50%; height: var(--lh); margin-top: calc(var(--lh) / -2); white-space: nowrap; color: #728583;
  transform-origin: 0 50%; backface-visibility: hidden; will-change: transform, opacity; }
.mv-ask__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .mv-desk__frame { padding: 0 16px 64px; gap: 16px; }
  .mv-desk__row, .mv-desk__row--ask { grid-template-columns: 1fr; row-gap: 16px; }
  .mv-ask { height: 340px; padding: 0 20px; gap: 14px; font-size: 22px; --lh: 27.5px; }
  .mv-ask__lead, .mv-ask__drum { width: auto; flex: 1 1 50%; }
  .mv-ask__drum { perspective: 900px; }
  .mv-desk__cards { grid-template-columns: 1fr 1fr; grid-template-rows: none; column-gap: 16px; row-gap: 0; }
}

/* ---------- 02b · The pile (Figma 2098:2860, layers = 2097:1507) ----------
   A 1920×1080 white stage, full width, 120 above and below. Every card sits at its Figma x/y/w/h (in stage units,
   so the stage just scales). case-myvault-pile.js lays them down one by one onto the construction drawing, holds
   the finished pile (= Figma), then turns the forest card back into the drawing so the loop closes. Without JS,
   or with reduced motion, the finished pile stands still. Phones see the middle 1200 of the stage. */
.mv-pile { background: #fbf7f5; container-type: inline-size; }
.mv-pile__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; padding: calc(120 * var(--u)) 0; }
.mv-pile__stage { position: relative; margin: 0; container-type: inline-size; aspect-ratio: 1920 / 1080; overflow: hidden; background: #fbf7f5; }   /* the page ground (Markiian 2026-10-14) */
.mv-pile__world { position: absolute; inset: 0; }
.mv-pile__l { position: absolute; display: block; margin: 0;
  left: calc(var(--x) / 19.2 * 1%); top: calc(var(--y) / 10.8 * 1%); width: calc(var(--w) / 19.2 * 1%); height: calc(var(--h) / 10.8 * 1%);
  opacity: var(--o, 1); backface-visibility: hidden; }
img.mv-pile__l { object-fit: fill; }
.mv-pile__hero { overflow: hidden; }
.mv-pile__hero svg { display: block; width: 100%; height: 100%; }
/* paper on every card (case-myvault-pile.js adds the layers): one still 768² tile, soft-light, so photos and
   drawings read as printed sheets; the zoom wrapper scales with the whole pile for the close-up */
.mv-pile__paper { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: url(assets/case/myvault/pile/paper.webp) 0 0 / calc(768 / 1920 * 100cqw) auto; }
.mv-pile__l.mv-pile__paper { inset: auto; left: calc(var(--x) / 19.2 * 1%); top: calc(var(--y) / 10.8 * 1%); }
.mv-pile__zoom { position: absolute; inset: 0; transform-origin: 50% 50%; }
@media (max-width: 700px) {
  .mv-pile__frame { padding: 8px 0 56px; }
  .mv-pile__stage { aspect-ratio: 1200 / 1080; }
  .mv-pile__world { left: -30%; right: auto; width: 160%; }
}

/* ---------- 04 · The logo (Figma 2098:2861) ----------
   Same 1920 frame and --u as From: 80 top and bottom, content at x 228 both sides. Text 692 (its copy runs 708,
   as in Figma) | 80 | the icon montage film 692×1043. */
/* ---------- 03c · Stillness, the brand film: content width, 16:9, between Ask and Logo ---------- */
.mv-film { background: #fbf7f5; container-type: inline-size; }
.mv-film__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box; padding: 0 calc(228 * var(--u)); }
.mv-film__media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #fbf7f5; }
.mv-film__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .mv-film__frame { padding: 0 16px 64px; } }

.mv-logo { background: #fbf7f5; container-type: inline-size; }
.mv-logo__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(228 * var(--u)); display: grid; grid-template-columns: calc(692 * var(--u)) calc(692 * var(--u)); column-gap: calc(80 * var(--u)); }
.mv-logo__text { display: flex; flex-direction: column; gap: calc(20 * var(--u)); width: calc(708 * var(--u)); }
.mv-logo__label { margin: 0; font: italic 400 clamp(28px, calc(40 * var(--u)), 40px) / 1 "PT Serif", Georgia, serif; color: #000; opacity: .5; }
.mv-logo__text p { margin: 0; font: 400 clamp(22px, calc(40 * var(--u)), 40px) / 1.25 "PT Serif", Georgia, serif; color: #000; }
.mv-logo__media { margin: 0; aspect-ratio: 692 / 1043; overflow: hidden; background: #0d1b1b; }
.mv-logo__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .mv-logo__frame { padding: 56px 16px 64px; grid-template-columns: 1fr; row-gap: 28px; }
  .mv-logo__text { width: auto; gap: 16px; }
  .mv-logo__text p { font-size: 22px; }
}

/* ---------- 05 · The brand, in four squares (Figma 2108:3054) ----------
   Same 1920 frame and --u as Logo: 80 top and bottom, content at x 228, two rows of two 692 squares, 80 gaps.
   Inside a square everything is in its own 692 units (%, or the svg's viewBox), so it scales as one picture. */
.mv-grid { background: #fbf7f5; container-type: inline-size; }
.mv-grid__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(228 * var(--u)); display: grid; grid-template-columns: repeat(2, calc(692 * var(--u))); gap: calc(80 * var(--u)); }
.mv-grid__tile { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; container-type: inline-size; }
.mv-grid__dots { background: #fff; }
.mv-grid__dots svg { display: block; width: 100%; height: 100%; }
/* the five gradients: 48 in from the edge, 112.8 wide, 8 apart */
.mv-grid__ramps { background: #0d1b1b; display: flex; gap: calc(100% * 8 / 596); padding: calc(100% * 48 / 692); box-sizing: border-box; }   /* % here: cqw on a container itself reads the section */
.mv-grid__ramps i { flex: 1; }
.mv-grid__photo { background: #f3f3f3; }
.mv-grid__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the wordmark ramp: each wordmark at x 166, its size label (Lato 8, Gray 02) at x 114, 2 below its top */
.mv-grid__ramp { background: #fff; }
.mv-grid__wm { position: absolute; left: calc(100cqw * 166 / 692); top: calc(100cqw * var(--y) / 692); width: calc(100cqw * var(--w) / 692); }
.mv-grid__wm img { display: block; width: 100%; height: auto; }
.mv-grid__wm i { position: absolute; left: calc(100cqw * -52 / 692); top: calc(100cqw * 2 / 692); font: 400 calc(100cqw * 8 / 692) / 1.25 Lato, "Helvetica Neue", Arial, sans-serif; font-style: normal; color: #696969; }
@media (max-width: 700px) {
  .mv-grid__frame { padding: 16px 16px 64px; grid-template-columns: 1fr; gap: 16px; }
  .mv-grid__wm i { font-size: 7px; }
}

/* ---------- 06 · Life areas (Figma 2127:4597) ----------
   Same 1920 frame and --u: 80 above and below, the 1464×824 film at x 228. */
.mv-areas { background: #fbf7f5; container-type: inline-size; }
.mv-areas__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box; padding: calc(80 * var(--u)) calc(228 * var(--u)); }
.mv-areas__media { margin: 0; aspect-ratio: 1464 / 824; overflow: hidden; background: #1a1714; }
.mv-areas__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .mv-areas__frame { padding: 0 16px 64px; }
}

/* ---------- 07 · A calm home (Figma 2142:4757) ----------
   Same 1920 frame and --u: 80 around, content at x 228; the line PT Serif 80 / 1 at 1191 wide, 80 gap,
   the 1464×1080 film. */
.mv-calm { background: #fbf7f5; container-type: inline-size; }
.mv-calm__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(228 * var(--u)); display: flex; flex-direction: column; gap: calc(80 * var(--u)); }
.mv-calm__title { margin: 0; width: calc(1191 * var(--u)); font: 400 calc(80 * var(--u)) / 1 "PT Serif", Georgia, serif; color: #000; }
.mv-calm__media { margin: 0; aspect-ratio: 1464 / 1080; overflow: hidden; background: #2f3a33; }
.mv-calm__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .mv-calm__frame { padding: 40px 16px 64px; gap: 24px; }
  .mv-calm__title { width: auto; font-size: 34px; line-height: 1.05; }
}

/* ---------- 08 · The UI on colour, ever scrolling (Figma 2146:6323) ----------
   Full-bleed strip: 497×621 tiles, 40 apart, in the page's 1920 units (--u, capped like every section). The track
   holds two identical sets and moves left by exactly one set (6 × 537 u), so the loop is seamless; ~40 px/s at 1920. */
.mv-strip { background: #fbf7f5; container-type: inline-size; overflow: hidden; }
.mv-strip { --u: min(var(--mv-cap), 100cqw / 1920); }
.mv-strip__track { --tile: calc(497 * var(--u)); --gap: calc(40 * var(--u)); display: flex; width: max-content;
  padding: calc(45 * var(--u)) 0 calc(124 * var(--u)); animation: mv-strip 80s linear infinite; will-change: transform; }
.mv-strip__set { display: flex; gap: var(--gap); padding-right: var(--gap); }
.mv-strip__set img { display: block; width: var(--tile); height: calc(var(--tile) * 621 / 497); object-fit: cover; }
.mv-strip.is-paused .mv-strip__track { animation-play-state: paused; }
@keyframes mv-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mv-strip__track { animation: none; } .mv-strip { overflow-x: auto; } }
@media (max-width: 700px) {
  .mv-strip__track { --tile: 232px; --gap: 16px; padding: 0 0 64px; animation-duration: 60s; }
}

/* ---------- 09 · In the hand (Figma 2146:4767) ----------
   Same 1920 frame and --u: 80 around, content at x 228; two 612 squares 80 apart, 80, one 1304×731. */
.mv-hand { background: #fbf7f5; container-type: inline-size; }
.mv-hand__frame { --u: min(var(--mv-cap), 100cqw / 1920); max-width: calc(1920 * var(--mv-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(228 * var(--u)); display: flex; flex-direction: column; gap: calc(80 * var(--u)); }
.mv-hand__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(80 * var(--u)); }
.mv-hand__sq, .mv-hand__wide { margin: 0; overflow: hidden; background: #6f879b; }
.mv-hand__sq { aspect-ratio: 1; }
.mv-hand__wide { aspect-ratio: 1304 / 731; }
.mv-hand__sq img, .mv-hand__sq video, .mv-hand__wide video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .mv-hand__frame { padding: 0 16px 64px; gap: 16px; }
  .mv-hand__row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- 10 · The app, at work (after sierra.ai's panel; study in Cases/MyVault/reference/sierra) ----------
   Same frame as 02b: full-bleed 16:9 stage, 120 above and below. Inside, everything is in 1920-stage units:
   --k = stage width / 1920; each card has --x --y --w in those units. Ghost = .26, lit = 1, crossfades by JS. */
@font-face { font-family: 'General Sans'; src: url(assets/case/myvault/GeneralSans-Variable.ttf) format('truetype'); font-weight: 200 700; font-display: swap; }
.mv-board { background: #fbf7f5; container-type: inline-size; }
.mv-board__frame { --u: min(var(--mv-cap), 100cqw / 1920); padding: calc(120 * var(--u)) 0; }   /* truly edge to edge: no side edges on wide screens */
.mv-board__stage { --k: calc(100cqw / 1920); position: relative; container-type: inline-size; aspect-ratio: 1920 / 1080; overflow: hidden;
  background: linear-gradient(180deg, #fbf7f5 0%, #f6f1ef 14%, #ede4e1 36%, #ddd6d2 58%, #bfcdca 80%, #9fbcbc 100%);   /* starts exactly at the page ground: no break at the top (Markiian) */
  font-family: 'General Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; }
.mv-board__grain { position: absolute; inset: 0; opacity: .18; mix-blend-mode: multiply; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .40 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mv-board__c, .mv-board__msg { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); }
.mv-board__c { display: block; height: auto; opacity: .26; will-change: opacity; }
/* the centre: MyVault speaking */
.mv-board__msg { box-sizing: border-box; padding: calc(30 * var(--k)) calc(36 * var(--k)) calc(34 * var(--k)); border-radius: calc(30 * var(--k));
  background: rgba(255,255,255,.62); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 calc(2 * var(--k)) calc(6 * var(--k)) rgba(0,0,0,.03), 0 calc(18 * var(--k)) calc(48 * var(--k)) rgba(44,60,58,.10); }
.mv-board__who { margin: 0 0 calc(16 * var(--k)); display: flex; align-items: center; gap: calc(12 * var(--k)); font-size: calc(22 * var(--k)); line-height: 1; color: #094545; }
.mv-board__mark { width: calc(26 * var(--k)); height: calc(29 * var(--k)); background: #094545; -webkit-mask: url(assets/case/myvault/logo-mark.svg) center / contain no-repeat; mask: url(assets/case/myvault/logo-mark.svg) center / contain no-repeat; }
.mv-board__line { margin: 0; min-height: 2.5em; font-size: calc(34 * var(--k)); line-height: 1.25; letter-spacing: -.005em; color: #1d2a2a; }
.mv-board__line span { display: inline-block; white-space: pre; will-change: opacity, filter; }
/* the Ask bar (live glass, from Figma 2146:5087) */
.mv-board__ask { box-sizing: border-box; height: calc(60 * var(--k)); padding: 0 calc(20 * var(--k)); display: flex; align-items: center; gap: calc(12 * var(--k));
  border-radius: calc(30 * var(--k)); background: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.65), 0 0 4px rgba(0,0,0,.04), 0 2px 20px rgba(0,0,0,.08); font-size: calc(19 * var(--k)); color: rgba(7,56,56,.25); }
.mv-board__ask span { flex: 1; }
.mv-board__plus, .mv-board__mic { width: calc(30 * var(--k)); height: calc(30 * var(--k)); background: #094545; flex: none; }
.mv-board__plus { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.75v16.5M3.75 12h16.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.75v16.5M3.75 12h16.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mv-board__mic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='8.25' y='2.25' width='7.5' height='13.5' rx='3.75'/%3E%3Cpath d='M5.25 12a6.75 6.75 0 0 0 13.5 0M12 18.75v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='8.25' y='2.25' width='7.5' height='13.5' rx='3.75'/%3E%3Cpath d='M5.25 12a6.75 6.75 0 0 0 13.5 0M12 18.75v3'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Deep Work card (live, from Figma 2146:6212; 420-unit design scaled by --w/420) */
.mv-board__deep { aspect-ratio: 420 / 188; }
.mv-deep { --s: calc(var(--w) / 420 * var(--k)); position: absolute; inset: 0; color: #fff; }
.mv-deep__hdr { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(8 * var(--s)); font-size: calc(15 * var(--s)); color: #696969; white-space: nowrap; }
.mv-deep__coin { position: relative; width: calc(32 * var(--s)); height: calc(32 * var(--s)); border-radius: 50%; background: rgb(19,104,26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.mv-deep__coin::after { content: ''; position: absolute; inset: calc(6 * var(--s)); background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 5.6v8.8M12.2 7.4H9.1a1.55 1.55 0 0 0 0 3.1h1.8a1.55 1.55 0 0 1 0 3.1H7.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 5.6v8.8M12.2 7.4H9.1a1.55 1.55 0 0 0 0 3.1h1.8a1.55 1.55 0 0 1 0 3.1H7.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.mv-deep__log { position: absolute; left: calc(24 * var(--s)); right: calc(24 * var(--s)); top: calc(84 * var(--s)); bottom: calc(6 * var(--s)); overflow: hidden; border-radius: 0 0 calc(25 * var(--s)) calc(25 * var(--s)); }
.mv-deep__log { filter: blur(calc(2.6 * var(--s))); }   /* the glass blur, painted on the log (backdrop-filter is cut off by the fading parent) */
.mv-deep__log p { margin: 0 0 calc(7 * var(--s)); font-size: calc(12 * var(--s)); line-height: calc(16 * var(--s)); color: #696969; }
.mv-deep__card { position: absolute; left: 0; right: 0; top: calc(44 * var(--s)); bottom: 0; border-radius: calc(25 * var(--s)); overflow: hidden;
  background: linear-gradient(180deg, rgb(19,104,26) 0%, rgba(57,56,52,.2) 100%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: inset 0 calc(-40 * var(--s)) calc(10 * var(--s)) calc(-40 * var(--s)) rgba(40,40,40,.6), inset 0 0 0 .5px rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.04); }
.mv-deep__card > * { position: absolute; }
.mv-deep__loader { left: calc(12 * var(--s)); top: calc(13.5 * var(--s)); width: calc(24 * var(--s)); height: calc(24 * var(--s)); }
.mv-deep__title { left: calc(40 * var(--s)); top: calc(12 * var(--s)); font-weight: 500; font-size: calc(20 * var(--s)); line-height: calc(27 * var(--s)); white-space: nowrap; }
.mv-deep__meta { right: calc(44 * var(--s)); top: calc(12 * var(--s)); text-align: right; opacity: .5; font-size: calc(15 * var(--s)); line-height: calc(20 * var(--s)); white-space: nowrap; }
.mv-deep__notify { left: 50%; transform: translateX(-50%); top: calc(92 * var(--s)); padding: 0 calc(16 * var(--s)); height: calc(32 * var(--s)); line-height: calc(32 * var(--s)); border-radius: calc(16 * var(--s));
  background: rgba(255,255,255,.88); color: rgb(19,104,26); font-size: calc(15 * var(--s)); white-space: nowrap; }

/* v2 centre: the app's Ask MyVault bar, large; questions type into it */
.mv-board__askc { position: absolute; left: calc((650 - var(--ox, 0)) * var(--k)); top: calc(497 * var(--k)); width: calc(620 * var(--k)); height: calc(86 * var(--k)); box-sizing: border-box;
  padding: 0 calc(26 * var(--k)); display: flex; align-items: center; gap: calc(16 * var(--k)); border-radius: calc(43 * var(--k)); isolation: isolate;
  /* liquid glass (iOS 26): a clear pill that refracts what's behind it at the edges, a little saturation lift, a bright rim and specular light */
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%, rgba(255,255,255,.12));
  backdrop-filter: url(#mv-liquid) blur(1.5px) saturate(1.8) brightness(1.05); -webkit-backdrop-filter: blur(1.5px) saturate(1.8) brightness(1.05);
  box-shadow: inset 0 calc(1.5 * var(--k)) calc(1 * var(--k)) rgba(255,255,255,.95), inset 0 calc(-1 * var(--k)) calc(1 * var(--k)) rgba(255,255,255,.45),
    inset 0 calc(-14 * var(--k)) calc(24 * var(--k)) calc(-14 * var(--k)) rgba(255,255,255,.55), inset 0 calc(10 * var(--k)) calc(18 * var(--k)) calc(-12 * var(--k)) rgba(255,255,255,.5),
    0 calc(1 * var(--k)) calc(2 * var(--k)) rgba(30,45,44,.06), 0 calc(14 * var(--k)) calc(36 * var(--k)) rgba(30,45,44,.12); }
.mv-board__askc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: calc(1.5 * var(--k)); pointer-events: none; z-index: -1;
  background: linear-gradient(125deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.3) 78%, rgba(255,255,255,.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mv-board__askc::after { content: ''; position: absolute; left: 8%; right: 30%; top: calc(4 * var(--k)); height: 32%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(calc(2 * var(--k))); opacity: .7; }
.mv-board__askc .mv-board__plus, .mv-board__askc .mv-board__mic { width: calc(34 * var(--k)); height: calc(34 * var(--k)); }
.mv-board__q { flex: 1; position: relative; font-size: calc(26 * var(--k)); line-height: calc(36 * var(--k)); color: #0b3b3b; white-space: nowrap; overflow: hidden; }
.mv-board__ph { color: rgba(7,56,56,.25); }
.mv-board__caret { display: inline-block; width: calc(2 * var(--k)); height: calc(28 * var(--k)); margin-left: calc(2 * var(--k)); vertical-align: calc(-5 * var(--k)); background: #094545; }


/* tablets: the middle 1200 units, so the board stays readable between phone and desktop */
@media (min-width: 701px) and (max-width: 1100px) { .mv-board__stage { --k: calc(100cqw / 1200); --ox: 360; aspect-ratio: 1200 / 1080; } }
/* v5 tiles (after Sierra's grid, but holding the REAL MyVault components at app scale ×1.15 — not designed type).
   Positions in 1920-stage units (--x --y --w --h), contents in tile units (--tx --ty --tw). JS fades .mv-t__in. */
.mv-t { position: absolute; left: calc((var(--x) - var(--ox, 0)) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); height: auto;
  box-sizing: border-box; }   /* no tile frames (Markiian): the components sit straight on the gradient; tiles only place them */
.mv-t__in { position: relative; opacity: .3; }
.mv-t__in > * { position: relative; margin: 0; }
.mv-t__img { width: calc(var(--tw) * var(--k)); height: auto; display: block; }
.mv-deep--tile { --w: 483; position: relative; inset: auto; width: calc(483 * var(--k)); height: calc(483 / 420 * 188 * var(--k)); }
/* passport: built in the app's own card pattern (header, white card, icon, copy, grey + tinted buttons, source line), ×1.15 */
.mv-pp { --p: calc(1.15 * var(--k)); width: calc(353 * var(--p)); color: #696969; }
.mv-pp p { margin: 0; }
.mv-pp__h { font-size: calc(15 * var(--p)); line-height: calc(20 * var(--p)); color: #000; margin-bottom: calc(12 * var(--p)) !important; }
.mv-pp__card { box-sizing: border-box; padding: calc(12 * var(--p)); border-radius: calc(20 * var(--p)); background: #fff; box-shadow: 0 calc(2 * var(--p)) calc(12 * var(--p)) rgba(0,0,0,.06); }
.mv-pp__row { display: flex; gap: calc(12 * var(--p)); align-items: flex-start; padding: calc(2 * var(--p)) calc(4 * var(--p)) calc(12 * var(--p)); }
.mv-pp__row p { font-size: calc(13 * var(--p)); line-height: calc(17.5 * var(--p)); }
.mv-pp__ic { flex: none; width: calc(32 * var(--p)); height: calc(32 * var(--p)); border-radius: 50%; background: #1c4778; position: relative; }
.mv-pp__ic::after { content: ''; position: absolute; inset: calc(7 * var(--p)); background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='11' r='2'/%3E%3Cpath d='M5.5 16c.6-1.5 1.7-2.2 3-2.2s2.4.7 3 2.2M14 10h4.5M14 13.5h3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='11' r='2'/%3E%3Cpath d='M5.5 16c.6-1.5 1.7-2.2 3-2.2s2.4.7 3 2.2M14 10h4.5M14 13.5h3'/%3E%3C/svg%3E") center / contain no-repeat; }
.mv-pp__btns { display: flex; gap: calc(8 * var(--p)); }
.mv-pp__btns span { flex: 1; text-align: center; height: calc(32 * var(--p)); line-height: calc(32 * var(--p)); border-radius: 99px; font-size: calc(13 * var(--p));
  background: linear-gradient(180deg, #f1f1f0, #e6e6e5); color: #696969; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.06); }
.mv-pp__btns .mv-pp__go { background: linear-gradient(180deg, #e3eaf3, #d3dfec); color: #1c4778; }
.mv-pp__src { margin-top: calc(10 * var(--p)) !important; padding-left: calc(24 * var(--p)); font-size: calc(13 * var(--p)); color: #9a9a9a; }
@media (max-width: 700px) {
  .mv-board__frame { padding: 8px 0 56px; }
  /* phones: the middle 720 units of the 1920 stage (the bar and the centre column), so the UI stays readable */
  .mv-board__stage { --k: calc(100cqw / 720); --ox: 600; aspect-ratio: 720 / 1080; }
}

/* More projects sits straight under the board: no 200 px gap (Markiian 2026-10-15) */
.mv-board + .more { margin-top: 0; }
.mv-board:has(+ .more) .mv-board__frame { padding-bottom: 0; }

/* ---------- 09b · Chat components (Figma 2172:8398): frame 1 → frame 2, case-myvault-chat.js ----------
   Full width (Markiian 2026-10-15: "it should be full width"): the whole 1920×1200 design edge to edge, so every
   position below is a Figma x/y in % of it. */
.mv-chat { background: #fbf7f5; container-type: inline-size; padding: calc(80 * min(var(--mv-cap), 100cqw / 1920)) 0; }
.mv-chat__frame { padding: 0; }
.mv-chat__stage { position: relative; aspect-ratio: 1920 / 1200; overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, #0e0a09 0%, #352d26 40%, #0a1616 100%); }
.mv-chat__world { position: absolute; inset: 0; }
.mv-chat__label { position: absolute; margin: 0; left: calc(var(--x) / 19.2 * 1%); top: calc(553.5 / 12 * 1%); white-space: nowrap;
  font-family: 'General Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: calc(40 / 1920 * 100cqw); line-height: 1.35; color: rgba(255,255,255,.5); will-change: transform, opacity, filter; }
.mv-chat__phone { position: absolute; margin: 0; overflow: hidden; left: calc(var(--x) / 19.2 * 1%); top: calc(174 / 12 * 1%); width: calc(393 / 19.2 * 1%); aspect-ratio: 393 / 852;
  transform-origin: 50% 60%; will-change: transform, opacity; }
.mv-chat__phone img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mv-chat__phone[data-p="left"], .mv-chat__phone[data-p="mid"], .mv-chat__phone[data-p="right"] { opacity: 0; }
@media (max-width: 700px) {
  .mv-chat { padding: 0 0 56px; }
  .mv-chat__stage { aspect-ratio: 1 / 1; }
  .mv-chat__world { left: -30%; right: auto; width: 160%; }
  .mv-chat__label { font-size: calc(40 / 1920 * 160cqw); }
  /* the world is 160 % wide and shifted 30 %: keep both labels inside the square (pre-launch QA: "bile app", "Chat Compone…") */
  .mv-chat__label[data-l="a"] { left: 22%; }
  .mv-chat__label[data-l="b"] { left: auto; right: 22%; }
}

/* the footer 200 under More projects, as on Daisy (the site default 400 is too much: Markiian 2026-10-15 "this gap is too big") */
footer.site-footer { padding-top: 200px; }

/* 02 · what we did: capability chips under the lockup (Spotted's tags, on the light ground: lead chip ink, the rest soft) */
.mv-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: calc(24 * var(--u)); }   /* one area per line (Markiian 2026-10-15) */
.mv-tags ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mv-tags li { padding: 2px 8px; background: rgba(0, 0, 0, .06); color: rgba(0, 0, 0, .78); font: 400 clamp(14px, calc(20 * var(--u)), 20px) / 1.25 "Tanker", "Anton", sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.mv-tags .mv-tags__lead { background: #000; color: #fff; }