/* Film scenes. Sizes use container units so each scene scales with its frame. */
.film { container-type: inline-size; }
.film .fs { font-size: max(10px, 1.25cqw); }

/* Orb sizing inside films */
.orb.fill { --s: 100%; width: 100%; height: 100%; }
.orb.fill::before { filter: blur(18px); }

/* ---------- Film A: Ultra morning brief ----------
   Three zones that never overlap: the cards area on top, a reserved voice dock
   (orb + caption) above the player bar, and the player bar itself.
   --ui: player bar height; --dock: voice dock height. */
.filmA { --ui: 58px; --dock: max(64px, 8cqw); --pad: 4cqw; }
.filmA .fa-grid {
  position: absolute; top: calc(44px + 2.6cqw); left: var(--pad); right: var(--pad);
  bottom: calc(var(--ui) + var(--dock) + 1.4cqw);
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 1.6cqw;
}
.filmA .blk { padding: 2cqw 2.2cqw; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.filmA .bignum { font-size: 6.4cqw; margin-top: auto; }
.filmA .delta { font-size: max(10px, 1.15cqw); }
.filmA .bars { height: auto; flex: 1; min-height: 24px; margin-top: 1.4cqw; gap: 0.9cqw; }
.filmA .bars-x { gap: 0.9cqw; font-size: max(9px, 1cqw); }
.filmA .prop { display: grid; gap: 1cqw; margin-top: 1.2cqw; }
.filmA .prop div { border-radius: 1cqw; background: var(--stage-3); padding: 1.1cqw 1.3cqw; font-size: max(10px, 1.2cqw); line-height: 1.35; }
.filmA .prop div b { display: block; font-weight: 560; margin-bottom: 0.3cqw; }
/* Column 3 holds one thing at a time: proposals, then the question, then the receipt. */
.filmA .fa-col { position: relative; min-width: 0; min-height: 0; }
.filmA .fa-col > * { position: absolute; top: 0; left: 0; right: 0; }
.filmA .fa-col > .blk:first-child { bottom: auto; max-height: 100%; }
.filmA .fa-confirm { padding: 1.8cqw 2cqw; display: grid; gap: 1.4cqw; }
.filmA .fa-confirm .q { font-size: max(11px, 1.3cqw); line-height: 1.35; }
.filmA .fa-confirm .yn { display: flex; gap: 0.8cqw; justify-content: flex-end; }
.filmA .chip { height: auto; padding: 0.7cqw 1.8cqw; font-size: max(10px, 1.2cqw); }
.filmA .fa-done { right: auto; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 999px; padding: 0.9cqw 1.8cqw; font-size: max(11px, 1.25cqw); }

/* The orb: centred and large when the screen is empty, docked when content appears. */
.filmA .fa-orb {
  position: absolute; z-index: 3; aspect-ratio: 1;
  left: 50%; top: 44%; width: 17cqw; translate: -50% -50%;
  transition: left 1.1s var(--ease), top 1.1s var(--ease), width 1.1s var(--ease), translate 1.1s var(--ease);
}
.filmA .fa-orb.small { left: calc(var(--pad) + var(--dock) * 0.1); top: calc(100% - var(--ui) - var(--dock) * 0.5); width: calc(var(--dock) * 0.8); translate: 0 -50%; }
.filmA .fa-cap { position: absolute; left: 12%; right: 12%; top: min(calc(44% + 11cqw), calc(100% - var(--ui) - var(--dock) * 1.1 - 4px)); height: calc(var(--dock) * 1.1); text-align: center; z-index: 3; transition: all 1.1s var(--ease); }
.filmA .fa-cap.small { left: calc(var(--pad) + var(--dock) + 1.6cqw); right: var(--pad); top: calc(100% - var(--ui) - var(--dock)); height: var(--dock); text-align: left; }
.filmA .fa-cap p { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-start; justify-content: center; font-size: max(14px, 2.2cqw); }
.filmA .fa-cap.small p { align-items: center; justify-content: flex-start; font-size: max(13px, 1.75cqw); }
/* Iteration 6: Ultra as the real product shows it. The figure she is saying glows; figures carry their counted time and
   definition; proposals say who made them; the question states its effect; the executive answers aloud; the microphone
   and the universal commands stay fixed on the right of the dock. */
.filmA { --ctlw: 27cqw; }
.filmA .blk { transition: opacity 600ms var(--ease), transform 700ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.filmA .blk.say { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 28px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.filmA .blk.fig .bignum { margin-top: 1.2cqw; }
.filmA .fa-mix { display: grid; gap: 0.7cqw; margin: auto 0 0.2cqw; padding-top: 1.4cqw; }
.filmA .fa-mix div { display: grid; grid-template-columns: 7.5cqw minmax(0, 1fr) auto; align-items: center; gap: 0.8cqw; font-size: max(9px, 0.95cqw); color: var(--stage-muted); }
.filmA .fa-mix i { height: 0.6cqw; min-height: 4px; border-radius: 9px; background: linear-gradient(to right, var(--accent) var(--w), rgba(250, 249, 245, 0.1) var(--w)); }
.filmA .fa-mix b { font-weight: 500; color: var(--stage-ink); }
.filmA .bars i { position: relative; }
.filmA .bars i em { position: absolute; bottom: 100%; left: 50%; translate: -50% -0.4em; font-style: normal; font-size: max(9px, 1cqw); color: var(--stage-ink); }
.filmA .prop .by { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 0.5cqw; font-size: max(8.5px, 0.9cqw); color: var(--stage-muted); }
.filmA .prop .by .cw-av { width: max(15px, 1.6cqw); height: max(15px, 1.6cqw); font-size: max(7px, 0.65cqw); }
.filmA .fa-eff { display: flex; align-items: flex-start; gap: 0.7cqw; font-size: max(9.5px, 1cqw); line-height: 1.35; color: var(--stage-muted); }
.filmA .fa-eff svg { width: max(11px, 1.2cqw); height: max(11px, 1.2cqw); flex: none; color: #8fd9ad; }
.filmA .fa-ctl { position: absolute; right: var(--pad); top: calc(100% - var(--ui) - var(--dock)); height: var(--dock); display: flex; align-items: center; gap: 0.7cqw; z-index: 3; opacity: 0; transition: opacity 600ms var(--ease); }
.filmA .fa-ctl.show { opacity: 1; }
.filmA .fa-cmd { padding: 0.45cqw 1.2cqw; border-radius: 999px; border: 1px solid var(--stage-line); font-size: max(9px, 0.95cqw); color: var(--stage-muted); }
.filmA .fa-mic { display: grid; place-items: center; width: max(30px, 3.4cqw); height: max(30px, 3.4cqw); margin-left: 0.4cqw; border-radius: 50%; border: 1px solid rgba(250, 249, 245, 0.2); color: var(--stage-ink); transition: background 300ms, box-shadow 300ms; }
.filmA .fa-mic svg { width: 46%; height: 46%; }
.filmA .fa-mic.hot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 0.6cqw color-mix(in srgb, var(--accent) 25%, transparent); }
.filmA .fa-cap.small { right: calc(var(--pad) + var(--ctlw)); }
.filmA .fa-cap p.you { color: var(--stage-muted); }
.filmA .fa-cap p.you .who-l { flex: none; margin-right: 0.7em; padding: 0.1em 0.7em; border: 1px solid var(--stage-line); border-radius: 999px; font-family: var(--sans); font-size: 0.7em; color: var(--stage-ink); }
/* A narrow film keeps only the microphone on the right of the dock */
@container (max-width: 860px) {
  .filmA .fa-cmd { display: none; }
  .filmA .fa-cap.small { right: calc(var(--pad) + max(30px, 3.4cqw) + 2cqw); }
}
@media (max-width: 700px) {
  .filmA { --ctlw: calc(max(30px, 3.4cqw) + 3cqw); }
  .filmA .fa-cmd, .filmA .fa-mix { display: none; }
  .filmA { aspect-ratio: 9 / 14; --ui: 54px; --dock: 22cqw; --pad: 4cqw; }
  .filmA .fa-orb { width: 30cqw; top: 40%; }
  .filmA .fa-cap { top: 62%; }
  .filmA .fa-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 3cqw; }
  .filmA .fa-col.pr { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: auto; }
  .filmA .fa-col.pr > .blk:first-child { display: none; }
  .filmA .fa-col > * { top: auto; bottom: 0; }
  .filmA .bignum { font-size: 12cqw; }
  .filmA .blk { padding: 4cqw; }
  .filmA .fa-confirm { padding: 3.5cqw; gap: 2.5cqw; }
  .filmA .fa-done { padding: 2cqw 3.5cqw; }
  .filmA .blk.yield { opacity: 0; }
}

/* ---------- Film B: Nexus workday ---------- */
/* Zones: board area, a reserved status row for the toast, then the player bar. */
.filmB { --ui: 58px; --dock: max(40px, 4.6cqw); aspect-ratio: 4 / 3; }
.filmB .fb-body { position: absolute; top: 44px; left: 0; right: 0; bottom: calc(var(--ui) + var(--dock)); display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 2cqw; padding: 2.4cqw 3cqw 0; }
.filmB .kan { min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; align-content: start; }
.filmB .kcol { display: grid; gap: 1cqw; align-content: start; }
.filmB .kcol h5 { margin: 0 0 0.4cqw; font-family: var(--mono); font-weight: 400; font-size: max(9px, 1cqw); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stage-muted); }
.filmB .tk { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 1.1cqw; padding: 1.1cqw 1.2cqw; font-size: max(10px, 1.15cqw); line-height: 1.3; }
.filmB .tk small { display: flex; align-items: center; gap: 0.6cqw; margin-top: 0.7cqw; color: var(--stage-muted); font-size: max(9px, 0.95cqw); }
.filmB .tk small i { width: 1.6cqw; height: 1.6cqw; min-width: 12px; min-height: 12px; border-radius: 50%; background: var(--stage-3); }
.filmB .tk.ai { border-color: color-mix(in srgb, var(--nexus) 65%, transparent); background: color-mix(in srgb, var(--nexus) 14%, var(--stage-2)); }
.filmB .tk .badge { display: inline-block; font-size: max(8.5px, 0.9cqw); color: #9cc9ea; margin-bottom: 0.5cqw; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.filmB .side { position: relative; min-height: 0; overflow: hidden; }
.filmB .side > * { position: absolute; left: 0; right: 0; top: 0; }
.filmB .side > .cal { top: calc(max(18px, 2.4cqw) + 1.4cqw); }
.filmB .mail { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 1.4cqw; padding: 1.6cqw 1.8cqw; font-size: max(10px, 1.15cqw); }
.filmB .mail .hd { display: flex; justify-content: space-between; color: var(--stage-muted); font-size: max(9px, 1cqw); border-bottom: 1px solid var(--stage-line); padding-bottom: 0.8cqw; margin-bottom: 1cqw; }
.filmB .mail .txt { min-height: 9cqw; line-height: 1.45; }
.filmB .mail .act { display: flex; gap: 0.8cqw; margin-top: 1.2cqw; align-items: center; }
.filmB .chip { height: auto; padding: 0.6cqw 1.4cqw; font-size: max(9.5px, 1.05cqw); }
.filmB .chip.yes { background: var(--nexus); }
.filmB .cal { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 1.4cqw; padding: 1.4cqw 1.6cqw; }
.filmB .cal .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6cqw; margin-top: 0.8cqw; }
.filmB .cal .d { height: 7cqw; border-radius: 0.8cqw; background: var(--stage-3); position: relative; font-size: max(8.5px, 0.9cqw); color: var(--stage-muted); padding: 0.5cqw; }
.filmB .cal .ev { position: absolute; left: 0.4cqw; right: 0.4cqw; border-radius: 0.5cqw; background: rgba(243,241,234,0.14); height: 1.6cqw; }
.filmB .cal .ev.nx { background: var(--nexus); }
.filmB .fb-toast { position: absolute; left: 3cqw; bottom: calc(var(--ui) + (var(--dock) - 2.2em) / 2); max-width: calc(100% - 6cqw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--stage-ink); color: var(--stage); border-radius: 999px; padding: 0.8cqw 1.8cqw; font-size: max(10px, 1.15cqw); display: flex; align-items: center; gap: 0.8cqw; z-index: 4; }
.filmB .fb-toast .o { width: 1.6cqw; height: 1.6cqw; min-width: 11px; min-height: 11px; border-radius: 50%; background: var(--nexus); }
/* Iteration 6: the workday as a real app shows it. Owners, lateness, the email that started it, the draft's sources,
   exactly what approval sends, a person pressing it, and an activity log. The proposed slot is dashed, not booked. */
.filmB .st-top .fb-ask { margin-left: auto; min-width: 18cqw; padding: 4px 12px; border-radius: 999px; background: var(--stage-2); border: 1px solid var(--stage-line); font-size: 11.5px; }
.filmB .st-top .fb-ask + .who { margin-left: 0; }
.filmB .fb-main { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1.2cqw; padding-bottom: 1.4cqw; }
/* A card that moves leaves no hole: it takes space only while shown, and the arriving card pops in */
.filmB .kcol .tk[data-at]:not(.on) { display: none; }
.filmB .kcol .tk.ai.on { animation: fbpop 700ms var(--ease); }
@keyframes fbpop { from { opacity: 0; transform: scale(0.94); } }
.filmB .fb-head { display: flex; align-items: baseline; gap: 1.2cqw; font-size: max(10.5px, 1.3cqw); }
.filmB .fb-head b { font-weight: 600; }
.filmB .fb-head span { color: var(--stage-muted); font-size: max(9px, 1cqw); }
.filmB .tk small i { display: grid; place-items: center; font-style: normal; font-size: max(6.5px, 0.7cqw); font-weight: 600; color: var(--stage-ink); background: color-mix(in srgb, var(--nexus) 30%, var(--stage-3)); }
.filmB .tk small .od { margin-left: auto; font-weight: 500; color: #f0937f; }
.filmB .fb-log { margin-top: auto; border-top: 1px solid var(--stage-line); padding-top: 1.2cqw; display: grid; gap: 0.6cqw; font-size: max(9px, 1cqw); color: var(--stage-muted); }
.filmB .fb-log .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filmB .fb-log .ln b { color: var(--stage-ink); font-weight: 500; margin-right: 0.6cqw; }
.filmB .fb-in { background: var(--stage-2); border: 1px solid color-mix(in srgb, var(--nexus) 50%, transparent); border-radius: 1.4cqw; padding: 1.4cqw 1.6cqw; display: grid; gap: 0.5cqw; font-size: max(10px, 1.15cqw); }
.filmB .fb-in b { font-weight: 600; }
.filmB .fb-in .att { display: inline-flex; align-items: center; gap: 0.6cqw; width: max-content; margin-top: 0.6cqw; padding: 0.4cqw 1cqw; border-radius: 0.7cqw; background: var(--stage-3); color: var(--stage-muted); font-size: max(9px, 0.95cqw); }
.filmB .fb-in .att svg { width: max(10px, 1.1cqw); height: max(10px, 1.1cqw); }
.filmB .mail .ctx { margin: -0.2cqw 0 1cqw; color: var(--stage-muted); font-size: max(9px, 0.95cqw); }
.filmB .mail .eff { display: flex; align-items: center; gap: 0.7cqw; margin-top: 1.2cqw; font-size: max(9.5px, 1cqw); }
.filmB .mail .eff svg { width: max(11px, 1.2cqw); height: max(11px, 1.2cqw); flex: none; color: #8fd9ad; }
.filmB .chip.yes { position: relative; }
.filmB .fb-cur { position: absolute; left: 58%; top: 52%; width: max(13px, 1.5cqw); translate: 7cqw 5cqw; transition: translate 900ms var(--ease), opacity 400ms; z-index: 2; pointer-events: none; }
.filmB .fb-cur.go { translate: 0 0; }
.filmB .fb-cur svg { display: block; width: 100%; height: auto; }
.filmB .done-line { white-space: nowrap; min-width: 0; }
.filmB .done-line .lk { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 0.8cqw; color: var(--stage-ink); text-decoration: underline; text-decoration-color: rgba(250, 249, 245, 0.3); text-underline-offset: 3px; }
.filmB .cal .ch { display: flex; justify-content: space-between; gap: 1cqw; }
.filmB .cal .d { height: 9.5cqw; }
.filmB .cal .ev { height: auto; padding: 0.2cqw 0.5cqw; font-size: max(7.5px, 0.8cqw); line-height: 1.3; color: rgba(250, 249, 245, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filmB .cal .ev.nx { background: color-mix(in srgb, var(--nexus) 22%, transparent); outline: 1px dashed var(--nexus); outline-offset: -1px; color: #cfe6f7; }
@media (max-width: 700px) {
  .filmB .fb-log, .filmB .st-top .fb-ask { display: none; }
  .filmB .st-top .fb-ask + .who { margin-left: auto; }
  .filmB { aspect-ratio: 9 / 14; }
  .filmB { --ui: 54px; --dock: 12cqw; }
  .filmB .fb-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 4cqw 4cqw 0; gap: 3cqw; }
  .filmB .kan .kcol:first-child { display: none; }
  .filmB .kan { grid-template-columns: 1fr 1fr; gap: 2.5cqw; }
  .filmB .cal { display: none; }
  .filmB .fb-toast { left: 4cqw; }
}

/* ---------- Film C: Ethos member phone ---------- */
.filmC .phone {
  position: absolute; left: 50%; top: 6%; bottom: auto; height: 84%; width: auto; aspect-ratio: 9 / 18.5; translate: -50% 0;
  border-radius: 36px; background: #0d0d0c; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 6px #1c1b19, 0 30px 60px -20px rgba(0,0,0,0.6); padding: 14px 12px 16px; display: flex; flex-direction: column;
}
.filmC .phone .bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--stage-muted); padding: 4px 6px 12px; border-bottom: 1px solid var(--stage-line); }
.filmC .phone .bar b { color: var(--stage-ink); font-weight: 560; }
.filmC .phone .bar .o { width: 18px; height: 18px; }
.filmC .chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; overflow: hidden; padding-top: 10px; }
.filmC .chat > * { flex-shrink: 0; }
.filmC .chat > [data-at] { max-height: 0; margin: 0; overflow: hidden; transition: max-height 700ms var(--ease), opacity 500ms, margin 700ms var(--ease), transform 600ms var(--ease); }
.filmC .chat > [data-at].on { max-height: 260px; margin-top: 10px; }
.filmC .chat > [data-at]:not(.on) { padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; }
.filmC .me { align-self: flex-end; max-width: 82%; background: var(--ethos); color: #fff; border-radius: 18px 18px 4px 18px; padding: 9px 13px; font-size: 13.5px; line-height: 1.35; }
.filmC .ai { align-self: flex-start; max-width: 92%; font-size: 13.5px; line-height: 1.45; color: var(--stage-ink); }
.filmC .ai .tx { font-family: var(--serif); font-size: 15.5px; }
.filmC .cecard { display: flex; align-items: center; gap: 12px; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; padding: 12px; }
.filmC .cecard .ring-prog { width: 58px; flex: none; animation: none; --p: 0; transition: --p 1.6s var(--ease); }
.filmC .on .ring-prog, .filmC .cecard.on .ring-prog { --p: 64; }
.filmC .cecard .ring-prog::after { font-size: 15px; }
.filmC .cecard small { display: block; color: var(--stage-muted); font-size: 11.5px; }
.filmC .cls { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; padding: 12px 13px; font-size: 13px; }
.filmC .cls b { display: block; font-weight: 560; font-size: 14px; }
.filmC .cls .meta { color: var(--stage-muted); font-size: 12px; margin: 3px 0 10px; }
.filmC .cls .go { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 999px; background: var(--ethos); color: #fff; font-size: 13px; font-weight: 520; }
.filmC .cls .go.press { animation: press 500ms var(--ease); }
.filmC .ok { display: flex; gap: 8px; align-items: center; color: #8fd9ad; font-size: 13px; }
.filmC .renew { background: linear-gradient(135deg, color-mix(in srgb, var(--ethos) 55%, #1b1a18), #1b1a18 70%); border: 1px solid var(--stage-line); border-radius: 16px; padding: 14px; font-size: 13px; }
.filmC .renew b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 2px; }
.filmC .renew .go { margin-top: 10px; height: 34px; border-radius: 999px; background: var(--stage-ink); color: var(--stage); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 560; }
/* Iteration 6: the member app as a phone shows it. A status bar, who the member is, message times, typing, CE by
   requirement with its source, seats and price, itemized dues, the payment and its receipt, and the message field. */
.filmC .phone .sb { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 6px; font-size: 11px; color: var(--stage-ink); }
.filmC .phone .sb b { font-weight: 600; }
.filmC .phone .sb .ic { display: inline-flex; gap: 5px; align-items: center; }
.filmC .phone .sb .ic svg { height: 9px; width: auto; fill: currentColor; color: var(--stage-ink); }
.filmC .phone .bar .av { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ethos) 45%, var(--stage-3)); font-size: 9px; font-weight: 600; color: var(--stage-ink); }
.filmC .me small { display: block; margin-top: 3px; text-align: right; font-size: 10px; opacity: 0.75; }
.filmC .typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 16px; background: var(--stage-2); }
.filmC .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--stage-muted); animation: tdot 1.2s infinite; }
.filmC .typing i:nth-child(2) { animation-delay: 0.15s; } .filmC .typing i:nth-child(3) { animation-delay: 0.3s; }
.filmC .cecard .ce-l { display: grid; gap: 3px; font-size: 12px; }
.filmC .cecard .ce-l span { display: flex; align-items: center; gap: 6px; }
.filmC .cecard .ce-l i { width: 7px; height: 7px; border-radius: 50%; background: #e5c07b; flex: none; }
.filmC .cecard .ce-l i.ok { background: #8fd9ad; }
.filmC .cls .meta2 { margin: -6px 0 10px; font-size: 11.5px; color: #8fd9ad; }
.filmC .renew .dues { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; margin: 8px 0 6px; font-size: 12px; color: rgba(250, 249, 245, 0.8); }
.filmC .renew .dues .t { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--stage-line); font-weight: 600; color: var(--stage-ink); }
.filmC .renew small { display: block; font-size: 11px; color: var(--stage-muted); }
.filmC .renew .go.press { animation: press 500ms var(--ease); }
/* The real steps before a confirmation: confirm and pay for the class; a secure checkout sheet for the renewal */
.filmC .phone { overflow: hidden; }
.filmC .cfm { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; padding: 12px 13px; font-size: 12.5px; }
.filmC .cfm .t { display: block; margin-bottom: 8px; font-weight: 600; font-size: 13.5px; }
.filmC .cfm .ln { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--stage-line); }
.filmC .cfm .ln span { display: inline-flex; align-items: center; gap: 6px; }
.filmC .cfm .ln svg { width: 12px; height: 12px; color: #8fd9ad; }
.filmC .cfm .mu { color: var(--stage-muted); }
.filmC .cfm .go { margin-top: 8px; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 999px; background: var(--ethos); color: #fff; font-weight: 520; }
.filmC .cfm .go.press { animation: press 500ms var(--ease); }
.filmC .proc { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--stage-muted); }
.filmC .proc i, .filmC .sheet .bz i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(250, 249, 245, 0.25); border-top-color: var(--stage-ink); animation: spin 0.8s linear infinite; }
.filmC .dim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.5); }
.filmC .dim[data-at] { transform: none; }
.filmC .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 14px 16px; border-radius: 22px 22px 0 0; background: #1d1c1a; border-top: 1px solid rgba(250, 249, 245, 0.14); box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, 0.7); font-size: 12px; }
.filmC .sheet[data-at] { opacity: 1; transform: translateY(105%); transition: transform 600ms var(--ease); }
.filmC .sheet[data-at].on { transform: none; }
.filmC .sheet .sh-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.filmC .sheet .sh-h b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.filmC .sheet .sh-h svg { width: 13px; height: 13px; color: #8fd9ad; }
.filmC .sheet .sh-h span { color: var(--stage-muted); }
.filmC .sheet .sh-m { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 10px; border-bottom: 1px solid var(--stage-line); margin-bottom: 10px; color: var(--stage-muted); }
.filmC .sheet .sh-m b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--stage-ink); }
.filmC .sheet label { display: block; margin: 0 0 3px; font-size: 10.5px; color: var(--stage-muted); }
.filmC .sheet .fld { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: var(--stage-3); border: 1px solid rgba(250, 249, 245, 0.1); font-size: 12.5px; letter-spacing: 0.02em; }
.filmC .sheet .cc { width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #8aa4c8, #4a6488); }
.filmC .sheet .r3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.filmC .sheet .pay { position: relative; display: grid; place-items: center; height: 38px; margin-top: 4px; border-radius: 999px; background: var(--stage-ink); color: var(--stage); font-size: 13.5px; font-weight: 600; }
.filmC .sheet .pay.press { animation: press 500ms var(--ease); }
.filmC .sheet .pay .bz { display: none; align-items: center; gap: 8px; }
.filmC .sheet .pay .bz i { border-color: rgba(20, 20, 19, 0.25); border-top-color: var(--stage); }
.filmC .sheet .pay.busy .lb { display: none; }
.filmC .sheet .pay.busy .bz { display: inline-flex; }
.filmC .sheet .sec { display: block; margin-top: 8px; text-align: center; font-size: 10.5px; color: var(--stage-muted); }
.filmC .fc-in { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--stage-2); border: 1px solid var(--stage-line); font-size: 12.5px; color: var(--stage-muted); }
.filmC .fc-in .mic { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ethos); color: #fff; }
.filmC .fc-in .mic svg { width: 13px; height: 13px; }
@media (max-width: 767px) { .filmC .phone { height: 82%; top: 5%; border-radius: 28px; } .filmC .me, .filmC .ai { font-size: 12.5px; } .filmC .ai .tx { font-size: 14px; } }

/* ---------- Spotlight visuals (product pages) ---------- */
.vis { position: absolute; inset: 0; padding: 7%; display: grid; container-type: inline-size; }
.vis .blk { border-radius: 14px; }
.vis .lab { font-family: var(--mono); font-size: max(9.5px, 2cqw); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stage-muted); }

/* Meeting: waveform + summary + tasks */
.v-meet { align-content: center; gap: 4cqw; }
.wave { display: flex; align-items: center; gap: 1cqw; height: 16cqw; }
.wave i { flex: 1; border-radius: 99px; background: rgba(243,241,234,0.25); height: 30%; animation: wv 1.4s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -0.3s; } .wave i:nth-child(4n) { animation-delay: -0.7s; background: var(--accent); } .wave i:nth-child(5n) { animation-delay: -1s; }
@keyframes wv { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.v-meet .sum { display: grid; gap: 2cqw; }
.v-meet .line { font-size: max(12px, 2.8cqw); line-height: 1.4; }
.v-meet .tasks { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.v-meet .tasks span { font-size: max(11px, 2.4cqw); border-radius: 999px; padding: 1cqw 2.4cqw; background: var(--stage-3); border: 1px solid var(--stage-line); display: inline-flex; gap: 1.4cqw; align-items: center; }
.v-meet .tasks span::before { content: ""; width: 1.6cqw; height: 1.6cqw; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--accent); }

/* Market line chart */
.v-market { align-content: center; gap: 3cqw; }
.v-market svg { width: 100%; height: auto; overflow: visible; }
.v-market .ln { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.4s var(--ease); }
.in .v-market .ln, .v-market.in .ln { stroke-dashoffset: 0; }
.v-market .ln2 { fill: none; stroke: rgba(243,241,234,0.3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.v-market .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.v-market .kpis div { font-size: max(10px, 2.2cqw); color: var(--stage-muted); }
.v-market .kpis b { display: block; font-family: var(--serif); font-weight: 400; font-size: max(18px, 5.4cqw); color: var(--stage-ink); }
/* Iteration 6 (Ultra): the meeting as its recording, with decisions, owners and the approval; the market chart with axes */
.v-meet.ul2 { gap: 2.6cqw; }
.v-meet .mt-head { display: flex; justify-content: space-between; gap: 2cqw; }
.v-meet .mt-track { position: relative; height: 1.2cqw; min-height: 5px; border-radius: 9px; background: var(--stage-3); margin: 1.4cqw 0 3.4cqw; }
.v-meet .mt-track .pl { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: rgba(243,241,234,0.35); transition: width 2.4s var(--ease); }
.in .v-meet .mt-track .pl { width: 100%; }
.v-meet .mt-track .mk { position: absolute; left: var(--x); top: 50%; width: 2.4cqw; height: 2.4cqw; min-width: 9px; min-height: 9px; border-radius: 50%; translate: -50% -50%; background: var(--accent); }
.v-meet .mt-track .mk b { font-style: normal; position: absolute; top: 160%; left: 50%; translate: -50% 0; font-family: var(--mono); font-weight: 400; font-size: max(8.5px, 1.7cqw); color: var(--stage-muted); }
.v-meet .mt-rows { display: grid; gap: 1.4cqw; }
.v-meet .mt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2cqw; padding: 1.6cqw 2cqw; border-radius: 1.6cqw; background: var(--stage-2); border: 1px solid var(--stage-line); }
.v-meet .mt-row b { display: block; font-weight: 500; font-size: max(10.5px, 2.3cqw); }
.v-meet .mt-row small { display: block; font-size: max(9px, 1.8cqw); color: var(--stage-muted); }
.v-meet .mt-row em { font-style: normal; font-size: max(9px, 1.8cqw); color: #8fd9ad; }
.v-meet .mt-foot { margin: 0; font-size: max(9.5px, 1.9cqw); color: var(--stage-muted); }
.v-market.ul2 { gap: 1.6cqw; padding: 5% 7%; }
.v-market.ul2 svg { display: block; width: 100%; height: 22cqw; max-height: none; }
.v-market .mk-chart .dot { position: absolute; right: -0.7cqw; top: calc(21.9% - 0.7cqw); width: 1.4cqw; height: 1.4cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); }
/* Narrow panels keep the essentials: the recording's decisions and owners; the chart and its three figures */
@container (max-width: 440px) {
  .v-meet.ul2 { gap: 2cqw; padding: 5% 6%; }
  .v-meet .mt-head, .v-meet .mt-foot, .v-meet .mt-row small, .v-meet .mt-row em { display: none; }
  .v-meet .mt-track { margin: 1cqw 0 5.5cqw; }
  .v-meet .mt-row { padding: 1.4cqw 2.2cqw; }
  .v-market.ul2 > .lab:last-child, .v-market .mk-chart .yl.m { display: none; }
  .v-market.ul2 svg { height: 30cqw; }
}
@container (max-width: 300px) {
  .v-meet .mt-track { margin: 0 0 4.5cqw; }
  .v-meet .mt-rows { gap: 1cqw; }
  .v-market.ul2 { padding: 4% 6%; gap: 1.2cqw; }
  .v-market.ul2 > .lab:first-child { display: none; }
  .v-market.ul2 svg { height: 26cqw; }
  .v-market.ul2 .kpis { grid-template-columns: 1fr 1fr; }
  .v-market.ul2 .kpis div:nth-child(3) { display: none; }
  .v-market.ul2 .kpis b { font-size: max(14px, 4.4cqw); }
}
.v-market .mk-chart { position: relative; padding-left: 9cqw; }
.v-market .mk-chart .yl { position: absolute; left: 0; font-family: var(--mono); font-size: max(8px, 1.6cqw); color: var(--stage-muted); }
.v-market .mk-chart .yl.t { top: 0; } .v-market .mk-chart .yl.b { bottom: 0; }
.v-market .mk-chart .yl.m { top: 52%; right: 0; left: auto; translate: 0 -130%; }
.v-market .mk-x { position: relative; height: 1.4em; margin-left: 9cqw; font-family: var(--mono); font-size: max(8px, 1.6cqw); color: var(--stage-muted); }
.v-market .mk-x span { position: absolute; top: 0; translate: -50% 0; }
.v-market .mk-x span:first-child { translate: 0 0; } .v-market .mk-x span:last-child { translate: -100% 0; }
.v-market.ul2 .kpis b { font-size: max(16px, 4.4cqw); }

/* Cited report card */
.v-report { align-content: center; }
.v-report .doc { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; padding: 5cqw; display: grid; gap: 2.4cqw; }
.v-report h6 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: max(17px, 4.4cqw); line-height: 1.15; }
.v-report p { margin: 0; font-size: max(11.5px, 2.5cqw); color: var(--ink-on, #cfccc2); line-height: 1.5; }
.v-report sup { color: var(--accent); font-family: var(--mono); font-size: 0.75em; }
.v-report .cites { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.v-report .cites span { font-family: var(--mono); font-size: max(9.5px, 1.9cqw); color: var(--stage-muted); border: 1px solid var(--stage-line); border-radius: 6px; padding: 0.6cqw 1.4cqw; }

/* Smart flow chain */
.v-flow { align-content: center; gap: 1.2cqw; }
.v-flow .node { display: flex; align-items: center; gap: 3cqw; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 14px; padding: 2.4cqw 3.2cqw; font-size: max(12px, 2.7cqw); }
.v-flow .node .ic { width: 7cqw; height: 7cqw; min-width: 28px; min-height: 28px; border-radius: 10px; display: grid; place-items: center; background: var(--stage-3); font-family: var(--mono); font-size: max(9px, 1.9cqw); letter-spacing: 0.04em; color: var(--accent); flex: none; }
.v-flow .node small { display: block; color: var(--stage-muted); font-size: max(10px, 2.1cqw); }
.v-flow .join { height: 2.6cqw; width: 1px; margin-left: 7.2cqw; background: linear-gradient(var(--accent), transparent); }
.v-flow .node.last { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* Week calendar (Nexus) */
.v-cal { align-content: center; }
.v-cal .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; }
.v-cal .col { display: grid; grid-template-rows: auto repeat(8, 5.4cqw); gap: 0.8cqw; }
.v-cal .col > span { font-family: var(--mono); font-size: max(9.5px, 2cqw); color: var(--stage-muted); padding-bottom: 1cqw; }
.v-cal .ev { border-radius: 1.4cqw; background: rgba(243,241,234,0.12); font-size: max(9px, 1.9cqw); padding: 1cqw 1.4cqw; overflow: hidden; line-height: 1.2; }
.v-cal .ev.ai { background: var(--accent); color: #fff; opacity: 0; transform: translateY(-6px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.in .v-cal .ev.ai { opacity: 1; transform: none; }
.in .v-cal .ev.ai:nth-of-type(2n) { transition-delay: 400ms; }

/* Chat (HR / service) */
.v-chat { align-content: end; gap: 2.6cqw; padding-bottom: 9%; }
.v-chat .me, .v-chat .ai { max-width: 82%; font-size: max(12px, 2.8cqw); line-height: 1.45; }
.v-chat .me { justify-self: end; background: var(--accent); color: #fff; padding: 2.2cqw 3.2cqw; border-radius: 18px 18px 4px 18px; }
.v-chat .ai { justify-self: start; background: var(--stage-2); border: 1px solid var(--stage-line); padding: 2.6cqw 3.2cqw; border-radius: 18px 18px 18px 4px; }
.v-chat .ai .src { margin-top: 1.6cqw; font-size: max(10px, 2.1cqw); color: var(--stage-muted); }
.v-chat .typing { justify-self: start; display: flex; gap: 1cqw; padding: 2.4cqw 3cqw; border-radius: 18px; background: var(--stage-2); }
.v-chat .typing i { width: 1.6cqw; height: 1.6cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--stage-muted); animation: tdot 1.2s infinite; }
.v-chat .typing i:nth-child(2) { animation-delay: 0.15s; } .v-chat .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Pipeline (CRM) */
.v-pipe { align-content: center; gap: 3cqw; }
.v-pipe .stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.v-pipe .stage { display: grid; gap: 1.2cqw; align-content: start; }
.v-pipe .stage > span { font-family: var(--mono); font-size: max(9px, 1.8cqw); color: var(--stage-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.v-pipe .deal { background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 1.6cqw; padding: 1.6cqw 1.8cqw; font-size: max(9.5px, 2cqw); line-height: 1.3; }
.v-pipe .deal .meter { height: 0.8cqw; min-height: 3px; border-radius: 9px; background: var(--stage-3); margin-top: 1.4cqw; overflow: hidden; }
.v-pipe .deal .meter i { display: block; height: 100%; width: var(--w); background: var(--accent); }
.v-pipe .note { font-size: max(11px, 2.4cqw); color: var(--stage-muted); border-top: 1px solid var(--stage-line); padding-top: 2.4cqw; }
.v-pipe .note b { color: var(--stage-ink); font-weight: 500; }
/* Iteration 6 (Nexus): hours and a key on the calendar; each deal shows its status instead of a bare meter */
.v-cal.nx2 { gap: 2.4cqw; padding: 6% 6% 6% 4%; }
.v-cal .cal-key { display: flex; gap: 3cqw; padding-left: 5.4cqw; font-size: max(9px, 1.9cqw); color: var(--stage-muted); }
.v-cal .cal-key span { display: inline-flex; align-items: center; gap: 1.2cqw; }
.v-cal .cal-key i { width: 2cqw; height: 2cqw; min-width: 8px; min-height: 8px; border-radius: 0.6cqw; background: rgba(243,241,234,0.2); }
.v-cal .cal-key i.ai { background: var(--accent); }
.v-cal.nx2 .grid { grid-template-columns: 4cqw repeat(5, 1fr); }
.v-cal .hrs { display: grid; grid-template-rows: auto repeat(8, 5.4cqw); gap: 0.8cqw; font-family: var(--mono); font-size: max(8px, 1.6cqw); color: var(--stage-muted); text-align: right; }
.v-cal .hrs span:first-child { padding-bottom: 1cqw; font-size: max(9.5px, 2cqw); visibility: hidden; }
.v-cal .hrs span:first-child::before { content: "Mon"; }
.v-cal.nx2 .ev { white-space: nowrap; text-overflow: ellipsis; }
.v-cal.nx2 .ev small { display: block; margin-top: 0.4cqw; font-size: max(8px, 1.55cqw); opacity: 0.85; }
.v-pipe.nx2 .deal small { display: block; margin-top: 1cqw; font-size: max(8.5px, 1.65cqw); color: var(--stage-muted); line-height: 1.3; }
.v-pipe.nx2 .deal.hot { border-color: color-mix(in srgb, var(--nexus) 60%, transparent); }
.v-pipe.nx2 .deal.hot small { color: #9cc9ea; }

/* Calibration (Nexus) */
.v-cali { align-content: center; gap: 2.4cqw; }
.v-cali .row { display: grid; grid-template-columns: 26cqw 1fr; align-items: center; gap: 2cqw; font-size: max(10.5px, 2.3cqw); }
.v-cali .track { position: relative; height: 1.4cqw; min-height: 5px; border-radius: 9px; background: var(--stage-3); }
.v-cali .track i { position: absolute; top: 50%; width: 3cqw; height: 3cqw; min-width: 11px; min-height: 11px; border-radius: 50%; translate: -50% -50%; left: var(--x); transition: left 1.6s var(--ease); }
.v-cali .track i.self { background: var(--stage-ink); }
.v-cali .track i.obs { background: var(--accent); }
.v-cali .key { display: flex; gap: 4cqw; font-size: max(10px, 2.1cqw); color: var(--stage-muted); margin-top: 1.4cqw; }
.v-cali .key span { display: inline-flex; gap: 1.2cqw; align-items: center; }
.v-cali .key span::before { content: ""; width: 2.2cqw; height: 2.2cqw; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--c); }

/* Benefits wallet (Ethos) */
.v-wallet { align-content: center; justify-items: center; }
.v-wallet .stack { position: relative; width: 74cqw; height: 70cqw; }
.v-wallet .card {
  position: absolute; left: 0; right: 0; height: 40cqw; border-radius: 4cqw; padding: 4.4cqw 5cqw; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); transition: transform 1s var(--ease);
}
.v-wallet .card b { font-family: var(--serif); font-weight: 400; font-size: max(16px, 4.6cqw); }
.v-wallet .card small { font-size: max(10px, 2.3cqw); opacity: 0.8; }
.v-wallet .card .row { display: flex; justify-content: space-between; align-items: end; }
.v-wallet .card .row span { font-family: var(--mono); font-size: max(9px, 2cqw); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.v-wallet .c1 { top: 0; background: linear-gradient(135deg, #3d5a4b, #1e2a24); transform: translateY(6cqw) scale(0.9); }
.v-wallet .c2 { top: 10cqw; background: linear-gradient(135deg, #5a4a3c, #2a221c); transform: translateY(3cqw) scale(0.95); }
.v-wallet .c3 { top: 20cqw; background: linear-gradient(135deg, var(--ethos), #24473a); }
.in .v-wallet .c1 { transform: translateY(0) scale(0.94); }
.in .v-wallet .c2 { transform: translateY(0) scale(0.97); }
/* Iteration 6 (Ethos): the wallet says what each benefit is worth, who is eligible and the next step */
.v-wallet.et2 { gap: 2cqw; justify-items: stretch; }
.v-wallet .wl-head { display: flex; justify-content: space-between; padding: 0 2cqw; }
.v-wallet.et2 .stack { justify-self: center; width: 74cqw; height: 44cqw; }
.v-wallet.et2 .card { height: 29cqw; min-height: 0; padding: 3.4cqw 4.4cqw; }
.v-wallet.et2 .c2 { top: 7cqw; } .v-wallet.et2 .c3 { top: 14cqw; }
.v-wallet .card .top { display: flex; justify-content: space-between; align-items: center; }
.v-wallet .card .top em { font-style: normal; font-size: max(9px, 2cqw); padding: 0.4cqw 1.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.v-wallet .card .big { font-size: max(12px, 3cqw); font-weight: 500; }
.v-wallet .wl-foot { margin: 0; text-align: center; font-size: max(9px, 1.9cqw); color: var(--stage-muted); }

/* Listing video (Ethos) */
.v-video { align-content: center; gap: 2.4cqw; }
.v-video .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #222; }
.v-video .scene { position: absolute; inset: 0; opacity: 0; animation: scenes 12s infinite; background-size: cover; }
.v-video .scene:nth-child(1) { background: linear-gradient(180deg, #7aa3c4 0%, #c9d8e0 55%, #6d7e5a 56%, #4f6041 100%); animation-delay: 0s; }
.v-video .scene:nth-child(2) { background: linear-gradient(160deg, #d7c7ad, #b69c78 55%, #6c5a45); animation-delay: 4s; }
.v-video .scene:nth-child(3) { background: linear-gradient(180deg, #2c3a55 0%, #e0925f 60%, #3b2a2a 61%, #1d1818); animation-delay: 8s; }
.v-video .scene::after { content: ""; position: absolute; inset: 0; animation: kb 4s linear infinite; background: radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,0.12), transparent 70%); }
@keyframes scenes { 0% { opacity: 0; transform: scale(1.06); } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.v-video .house { position: absolute; left: 50%; bottom: 26%; translate: -50% 0; width: 36%; aspect-ratio: 5 / 3; }
.v-video .title { position: absolute; left: 5%; bottom: 8%; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.v-video .title b { display: block; font-family: var(--serif); font-weight: 400; font-size: max(15px, 4.2cqw); }
.v-video .title small { font-size: max(10px, 2.2cqw); opacity: 0.9; }
.v-video .rec { position: absolute; top: 5%; right: 4%; font-family: var(--mono); font-size: max(9px, 1.9cqw); background: rgba(0,0,0,0.45); color: #fff; padding: 0.6cqw 1.6cqw; border-radius: 99px; }
.v-video .strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1cqw; }
.v-video .strip i { aspect-ratio: 16 / 10; border-radius: 1cqw; background: var(--stage-3); }
.v-video .strip i:nth-child(1) { background: linear-gradient(180deg, #7aa3c4, #6d7e5a); } .v-video .strip i:nth-child(2) { background: linear-gradient(160deg, #d7c7ad, #6c5a45); } .v-video .strip i:nth-child(3) { background: linear-gradient(180deg, #2c3a55, #e0925f); }
.v-video .strip i.add { border: 1px dashed var(--stage-line); background: transparent; }
/* Iteration 6 (Ethos): the listing's attribution on the video, the photo count and the checks */
.v-video.et2 { padding: 4% 13%; gap: 2cqw; }
.v-video .cr { position: absolute; right: 4%; bottom: 8%; font-size: max(8.5px, 1.7cqw); color: rgba(255, 255, 255, 0.85); }
.v-video .scene img, .v-video .strip i img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The scenes are real photographs: a bottom shade keeps the white captions readable on bright rooms */
.v-video .scene::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%); }
.v-video .strip i { overflow: hidden; }
.v-video.et2 .strip { grid-template-columns: repeat(5, 1fr); }
.v-video .strip i.more { display: grid; place-items: center; font-family: var(--mono); font-size: max(9px, 1.9cqw); color: var(--stage-ink); background: var(--stage-3); }
.v-video .vd-foot { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.v-video .vd-foot span { padding: 0.6cqw 1.6cqw; border-radius: 99px; background: var(--stage-3); font-size: max(9px, 1.8cqw); color: var(--stage-muted); }
@container (max-width: 360px) { .v-video .vd-foot span:nth-child(3), .v-video .cr { display: none; } }
@container (max-width: 440px) { .v-wallet .wl-foot, .v-wallet.et2 .card .row small, .v-wallet .card .top em { display: none; } }

/* Matching (Ethos) */
.v-match svg { width: 100%; height: 100%; }
.v-match .edge { stroke: var(--accent); stroke-width: 1.4; fill: none; stroke-dasharray: 3 6; animation: flow 1.8s linear infinite; }
.v-match .edge.dim { stroke: rgba(243,241,234,0.14); animation: none; stroke-dasharray: none; }
.v-match text { font-family: var(--sans); fill: var(--stage-ink); }
/* Iteration 2: keep the market chart inside its frame */
.v-market svg { max-height: 36cqw; }
.v-market { gap: 2.4cqw; }