/* Scoped to the flow. Shared tokens remain the source of truth (day and night come from iovo-tokens.css). */
.iovo-flow { --flow-top: 0px; --flow-runway: 62svh; position: relative; color: var(--text); font-family: var(--font-body); }
.iovo-flow *, .iovo-flow *::before, .iovo-flow *::after { box-sizing: border-box; }
.iovo-flow-stage { position: relative; min-height: calc(100svh + var(--flow-runway)); }
.iovo-flow-pin { position: sticky; top: var(--flow-top); height: calc(100svh - var(--flow-top)); min-height: 500px; }
/* Wide layouts: the copy column (title, caption, then the step's card) on the left, the rail in the gap, the scene on
   the right. The card lives in the copy column, so it can never cover the scene or the pipe. */
.iovo-flow-inner { position: relative; display: grid; grid-template-columns: 29% 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 7%;
  width: min(1280px, calc(100% - 112px)); height: 100%; margin-inline: auto; }
.iovo-flow-copy { position: relative; z-index: 1; grid-column: 1; grid-row: 2; padding-bottom: 28px; }
.iovo-flow-index { display: block; margin-bottom: 22px; color: var(--accent-text); font: 500 11.5px var(--font-mono); letter-spacing: .16em; }
.iovo-flow-title { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(30px, 3.1vw, 46px); line-height: 1.08; font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
.iovo-flow-caption { max-width: 320px; margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; font-weight: 300; color: var(--text-2); text-wrap: pretty; }
.iovo-flow-artboard { position: relative; grid-column: 2; grid-row: 1 / -1; align-self: center; width: 100%; overflow: clip; }
/* The scene's art stays inside its own box on every size (its camera push-in never spills past the page). */
.iovo-flow-conduit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.iovo-flow-conduit path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.iovo-flow-conduit-base { stroke: var(--art-lo); stroke-opacity: .8; stroke-width: 1.25; }
/* The progress line: the ring's blue, the amber head riding it */
.iovo-flow-rail-fill { stroke: var(--blue); stroke-opacity: .95; stroke-width: 1.6; }
.iovo-flow-halo { stroke: var(--cyan); stroke-width: 6; stroke-opacity: .08; }
.iovo-flow-head { opacity: 0; }
.iovo-flow-head-core { fill: var(--accent); }
.iovo-flow-head-glow { fill: var(--accent); fill-opacity: .2; }
/* The pipe arrives from above the first scene and leaves below the last one. */
.iovo-flow-stage[data-first] .iovo-flow-conduit { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }
.iovo-flow-stage[data-last] .iovo-flow-conduit { -webkit-mask-image: linear-gradient(0deg, transparent, #000 16%); mask-image: linear-gradient(0deg, transparent, #000 16%); }
.iovo-flow-controls { position: absolute; bottom: 52px; left: 36%; right: 0; display: flex; align-items: center; gap: 20px; color: var(--text-3); font: 11px var(--font-mono); }
.iovo-flow-controls label { white-space: nowrap; }
.iovo-flow-controls input { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); cursor: ew-resize; }
.iovo-flow-controls output { width: 4ch; text-align: right; color: var(--text-2); }
.iovo-flow :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.iovo-flow[data-manual] .iovo-flow-stage { min-height: calc(100svh - var(--flow-top)); }
.iovo-flow[data-manual] .iovo-flow-pin { position: relative; }
.iovo-flow[data-manual] .iovo-flow-pin { top: 0; }
.iovo-flow-stage[hidden] { display: none; }
@media (max-width: 900px) {
  .iovo-flow-inner { width: calc(100% - 64px); grid-template-columns: 30% 1fr; column-gap: 7%; }
  .iovo-flow-title { font-size: clamp(26px, 3.6vw, 34px); }
  .iovo-flow-caption { font-size: 15px; }
  .iovo-flow-controls { left: 34%; }
}

/* ---------- The card: ONE component for every step (ui.js). Same box, radius, padding and type on every step. ---------- */
.iovo-card { --card-w: 340px; --card-h: 292px; --shot-h: 124px; --pad: 16px;
  position: relative; grid-column: 1; grid-row: 3; align-self: start; box-sizing: border-box;
  width: 100%; max-width: var(--card-w); height: var(--card-h); padding: var(--pad); border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); color: var(--text); }
.iovo-card-face { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; }
.iovo-card-tag { display: flex; align-items: center; margin: 0 0 7px; color: var(--accent-text); font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.iovo-card-tag i { width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.iovo-card-tag span:first-of-type { white-space: pre; }
.iovo-card-line { margin: 0; height: 4.14em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: 14px; line-height: 1.38; letter-spacing: -.005em; color: var(--text); text-wrap: pretty; }
/* The small device: the WHOLE real screen, never cropped (a landscape iPad; an iPhone on phones). ui.js picks the device
   and its capture; the screen box has the capture's exact aspect ratio. Tap/click → the same device opens full size. */
.iovo-card-shot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; margin: 8px 0; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iovo-mini { --ar: 1180 / 820; --bz: 4px; position: relative; display: block; height: 100%; padding: var(--bz); border-radius: 12px; background: #0B0D11;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 10px 22px -12px rgba(0, 0, 0, .75); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.iovo-mini[data-kind="phone"] { --ar: 390 / 844; --bz: 3px; border-radius: 11px; }
.iovo-mini-screen { position: relative; display: block; height: 100%; aspect-ratio: var(--ar); overflow: hidden; border-radius: 8px; background: var(--card-shot-bg, #0B0E13); }
.iovo-mini[data-kind="phone"] .iovo-mini-screen::after { content: ""; position: absolute; top: 3.2%; left: 50%; width: 30%; height: 3.4%; border-radius: 99px; background: #000; transform: translateX(-50%); }
.iovo-mini-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.iovo-card-see { position: absolute; right: -9px; bottom: -8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--text); font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5); transition: background-color .25s, color .25s, border-color .25s; }
.iovo-card-see svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iovo-card-shot:hover .iovo-mini, .iovo-card-shot:focus-visible .iovo-mini { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 16px 28px -12px rgba(0, 0, 0, .8); }
.iovo-card-shot:active .iovo-mini { transform: scale(.97); transition-duration: .12s; }
.iovo-card-shot:hover .iovo-card-see, .iovo-card-shot:focus-visible .iovo-card-see { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.iovo-card-shot:focus-visible { outline: none; }
.iovo-card-shot:focus-visible .iovo-mini { outline: 2px solid var(--accent); outline-offset: 3px; }
/* AQUIS: the same small mark and one line, in the same spot, on every step */
.iovo-card-aquis { display: grid; grid-template-columns: 26px auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.iovo-card-aquis img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #030814; filter: brightness(.85) saturate(.9); }
/* With motion, AQUIS itself rides the light (.iovo-rider), so the card keeps a dot in the mark's place that lights up
   while AQUIS is at this step. Reduced motion: the fixed small mark per step. */
.iovo-card-aq-dot { display: none; justify-self: center; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--blue-line); background: var(--blue-soft);
  transition: background-color .4s, border-color .4s, box-shadow .4s; }
.iovo-flow:not([data-reduced]) .iovo-card-aquis img { display: none; }
.iovo-flow:not([data-reduced]) .iovo-card-aq-dot { display: block; }
.iovo-card.is-here .iovo-card-aq-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--blue-soft); }
.iovo-card-aquis b { color: var(--blue-text); font: 500 10px var(--font-mono); letter-spacing: .12em; }
.iovo-card-aquis span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The screen, opened inside the same card */
.iovo-card-view { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 8px; padding: var(--pad); background: var(--card); }
.iovo-card-view img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 0; border-radius: 10px; background: var(--card-shot-bg, #0B0E13); }
.iovo-card-note { margin: 0; padding-right: 44px; color: var(--text-3); font: 500 9.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iovo-card-x { position: absolute; right: 8px; bottom: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-2); cursor: pointer; }
.iovo-card-x:hover { color: var(--text); background: rgba(var(--fg-rgb), .06); }
.iovo-card-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 1280px) {
  .iovo-card { --card-w: 300px; --card-h: 268px; --shot-h: 108px; --pad: 14px; }
  .iovo-card-line { font-size: 13.2px; }
}
/* Short landscape screens (phones on their side): the compact card, same as on phones */
@media (min-width: 601px) and (max-height: 600px) and (orientation: landscape) {
  .iovo-card { --card-w: 320px; --card-h: 138px; --pad: 12px; }
  .iovo-card-face { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; }
  .iovo-card-shot { grid-column: 1; grid-row: 1 / 3; height: 72px; margin: 0; }
  .iovo-card-tag, .iovo-card-line { grid-column: 2; }
  .iovo-card-line { font-size: 12.5px; line-height: 1.32; height: 3.96em; }
  .iovo-card-see b { display: none; }
  .iovo-card-see { padding: 0; width: 22px; justify-content: center; }
  .iovo-card-aquis { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; }
  .iovo-flow-title { margin-bottom: 8px; }
  .iovo-flow-index { margin-bottom: 10px; }
  .iovo-flow-copy { padding-bottom: 14px; }
}

/* ---------- Phones and portrait tablets: copy, then the scene, then the card. Keep in step with STACKED in flow.js. ----------
   The rail runs down the column's left edge; copy, scene and card are inset past it (and the head's glow), and the
   scene and its pipe stay inside the right edge. flow.js scales the art (--art-f) so copy, art, the pipe's return and
   the card fit the pinned height. */
@media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
  .iovo-flow { --flow-runway: 55svh; }
  .iovo-flow-pin { min-height: 540px; }
  .iovo-flow-inner { width: calc(100% - 36px); display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 14px 0 22px 18px; }
  .iovo-flow-copy { align-self: stretch; padding: 0 4px; }
  .iovo-flow-index { font-size: 10.5px; margin-bottom: 10px; }
  .iovo-flow-title { font-size: 30px; margin-bottom: 6px; }
  .iovo-flow-caption { max-width: 340px; font-size: 15px; line-height: 1.5; }
  .iovo-flow-artboard { --art-f: 1; flex: none; width: calc(var(--art-f) * 100%); margin-inline: auto; }
  .iovo-flow-controls { left: 27px; bottom: 35px; gap: 12px; }
  /* the pipe's return passes under the scene: the card starts below it */
  .iovo-card { --card-w: 520px; --card-h: 158px; --pad: 12px; flex: none; margin: 18px auto 0; }
  .iovo-card-face { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; }
  .iovo-card-shot { grid-column: 1; grid-row: 1 / -1; height: 100%; margin: 0; padding-right: 4px; }
  .iovo-card-tag, .iovo-card-line, .iovo-card-aquis { grid-column: 2; }
  .iovo-card-tag { margin-bottom: 4px; }
  .iovo-card-line { font-size: 13px; line-height: 1.32; height: 5.28em; -webkit-line-clamp: 4; }
  .iovo-card-aquis { margin-top: 6px; padding-top: 7px; line-height: 1.25; }
  .iovo-card-aquis span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .iovo-card-see b { display: none; }
  .iovo-card-see { right: -7px; bottom: -6px; padding: 0; width: 22px; height: 22px; justify-content: center; }
}
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .iovo-flow-inner { width: calc(100% - 96px); gap: 36px; padding-left: 36px; }
  .iovo-flow-copy { padding: 0 12px; }
  .iovo-flow-index { font-size: 11.5px; margin-bottom: 16px; }
  .iovo-flow-title { font-size: 46px; margin-bottom: 12px; }
  .iovo-flow-caption { max-width: 480px; font-size: 19px; }
  .iovo-card { --card-w: 560px; --card-h: 168px; --pad: 16px; margin-top: 14px; }
  .iovo-card-face { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
  .iovo-card-shot { height: 92px; }
  .iovo-card-tag { font-size: 10.5px; }
  .iovo-card-line { font-size: 15px; line-height: 1.32; height: 3.96em; }
  .iovo-card-aquis { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .iovo-flow-stage { min-height: 100svh; }
  .iovo-flow-pin { position: relative; }
  .iovo-mini { transition: none; }
}
/* Scene 8 (not on the landing since pass 11; kept for direct use): the AQUIS loop in a soft round mask. */
.iovo-flow-aquis { position: absolute; aspect-ratio: 1; opacity: 0; transform-origin: 50% 60%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.iovo-flow-aquis video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5) translateY(5%); mix-blend-mode: lighten;
  filter: brightness(.85) saturate(.9); }

/* ---------- Pass 11 §6 · AQUIS rides the light (aquis.js). Fixed to the viewport, eased on the rail's x: empty space on
   every layout (the gap between copy and scene when wide, the left margin when stacked). The pass-9 look: the rendered
   loop, matte, in a round dark frame (so it reads the same in day mode). ---------- */
.iovo-rider { --rider: 96px; position: fixed; left: 0; top: 0; z-index: 5; width: var(--rider); height: var(--rider); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-out); will-change: transform; }
.iovo-rider.is-on { opacity: 1; }
.iovo-rider img, .iovo-finale-core img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none;
  filter: drop-shadow(0 10px 18px rgba(3, 8, 20, .35)); }
.iovo-rider.is-live img { animation: iovo-aq-float 3.6s ease-in-out infinite; }
@keyframes iovo-aq-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@media (max-width: 600px), (max-width: 900px) and (orientation: portrait) { .iovo-rider { --rider: 60px; } }
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) { .iovo-rider { --rider: 80px; } }
@media (prefers-reduced-motion: reduce) { .iovo-rider.is-live img { animation: none; } }
.iovo-flow[data-reduced] .iovo-rider { display: none; }

/* ---------- The finale after Office: AQUIS rises; every step lights up around it ---------- */
.iovo-finale { position: relative; padding: clamp(96px, 12vw, 180px) 0 clamp(72px, 9vw, 140px); }
.iovo-finale-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 7%; width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.iovo-finale-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--blue-text); font: 500 11.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.iovo-finale-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.iovo-finale-title { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(34px, 4vw, 58px); line-height: 1.05; font-weight: 400; letter-spacing: -.04em; text-wrap: balance; }
.iovo-finale-title em { font-style: normal; color: var(--text-2); }
.iovo-finale-line { max-width: 34em; margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; font-weight: 300; color: var(--text-2); text-wrap: pretty; }
.iovo-finale-orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 56px auto; }
.iovo-finale-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.iovo-finale-ring circle { fill: none; }
.iovo-finale-ring-base { stroke: var(--art-lo); stroke-width: 1.25; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
/* no non-scaling-stroke here: Chromium then ignores pathLength for the dash (the ring stopped short) */
.iovo-finale-ring-fill { stroke: var(--blue); stroke-width: .4; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.iovo-finale-core { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); }
.iovo-finale-steps { list-style: none; margin: 0; padding: 0; }
.iovo-finale-steps li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text-3);
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .5s, border-color .5s; }
.iovo-finale-steps li i { width: 6px; height: 6px; border-radius: 50%; background: var(--art-lo); transition: background-color .5s, box-shadow .5s; }
.iovo-finale-steps li.is-lit { color: var(--text); border-color: var(--blue-line); }
.iovo-finale-steps li.is-lit i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 900px) {
  .iovo-finale-inner { grid-template-columns: 1fr; width: calc(100% - 64px); }
  .iovo-finale-orbit { width: min(100% - 96px, 400px); margin: 64px auto 40px; }
}
@media (max-width: 600px) {
  .iovo-finale-inner { width: calc(100% - 40px); }
  .iovo-finale-title { font-size: 32px; }
  .iovo-finale-line { font-size: 15.5px; }
  .iovo-finale-orbit { width: calc(100% - 104px); margin: 48px auto 32px; }
  .iovo-finale-steps li { padding: 5px 9px 5px 8px; font-size: 9.5px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .iovo-finale-steps li, .iovo-finale-steps li i { transition: none; } }

/* Day mode: the card's screen area and its buttons follow the page (the screens themselves are the app's light captures). */
html[data-theme="light"] .iovo-card { --card-shot-bg: #EEF1F5; }
html[data-theme="light"] .iovo-card-see { background: #fff; color: #11141A; box-shadow: 0 2px 8px -2px rgba(17, 20, 26, .25); }
html[data-theme="light"] .iovo-mini { box-shadow: 0 0 0 1px rgba(17, 20, 26, .5), 0 10px 22px -12px rgba(17, 20, 26, .5); }
html[data-theme="light"] .iovo-card-view { background: var(--card); }

/* ---------- AQUIS inside every step (replaces the rider on the light) ---------- */
.iovo-card-aquis img { display: block !important; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #040C1C; filter: none;
  opacity: .55; transform: scale(.86); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s; }
.iovo-card-aquis span { opacity: .7; transition: opacity .6s var(--ease-out), color .6s; }
.iovo-card.is-here .iovo-card-aquis img { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px var(--blue-soft), 0 4px 14px -4px rgba(40, 140, 255, .55); }
.iovo-card.is-here .iovo-card-aquis span { opacity: 1; color: var(--text); }
.iovo-card-aq-dot { display: none !important; }
.iovo-rider { display: none !important; }

/* ---------- Finale: the full drop, no frame, soft light behind it ---------- */
.iovo-finale-core { width: 40%; }
.iovo-finale-core::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(56, 160, 255, .22), rgba(56, 160, 255, 0) 70%); }
html[data-theme="light"] .iovo-finale-core::before { background: radial-gradient(closest-side, rgba(40, 130, 240, .16), rgba(40, 130, 240, 0) 70%); }
.iovo-finale-core img { filter: none; }

/* ---------- The device overlay (ui.js openDevice) ----------
   Landscape iPad on iPad and desktop, iPhone with a dynamic island on phones. The screen box has the capture's exact
   aspect ratio (--ar) and the image covers it: no letterbox, no page background at any edge. Sized to fit the
   viewport with room for the caption and the close button, at every size. */
html.iovo-device-lock, html.iovo-device-lock body { overflow: hidden; }
.iovo-device { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.iovo-device[hidden] { display: none; }
.iovo-device-scrim { position: absolute; inset: 0; background: rgba(4, 7, 12, .66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .26s ease; }
.iovo-device-frame { --bz: 16px; --sw: min(100vw - 48px - 2 * var(--bz), (100svh - 170px - 2 * var(--bz)) * 1.439, 1080px);
  position: relative; margin: 0; display: grid; gap: 14px; justify-items: center;
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .26s ease, transform .32s var(--ease-out); }
.iovo-device-frame[data-kind="phone"] { --bz: 11px; --sw: min(100vw - 64px - 2 * var(--bz), (100svh - 170px - 2 * var(--bz)) * .4621, 420px); }
.iovo-device-body { position: relative; padding: var(--bz); border-radius: calc(var(--bz) + 16px); background: #0B0C0F;
  box-shadow: 0 0 0 1.5px #2C3038, inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 90px -30px rgba(0, 0, 0, .75); }
.iovo-device-frame[data-kind="phone"] .iovo-device-body { border-radius: calc(var(--bz) + 40px); }
.iovo-device-screen { position: relative; width: var(--sw); aspect-ratio: var(--ar, 1180 / 820); overflow: hidden; border-radius: 16px; background: #0B0F14; }
.iovo-device-frame[data-theme="light"] .iovo-device-screen { background: #EEF2F5; }
.iovo-device-frame[data-kind="phone"] .iovo-device-screen { border-radius: 40px; }
.iovo-device-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* iPad: the front camera in the top bezel (landscape). iPhone: the dynamic island on the screen. */
.iovo-device-sensor { position: absolute; top: calc(var(--bz) / 2 - 3px); left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #1C2129; transform: translateX(-50%); }
.iovo-device-frame[data-kind="phone"] .iovo-device-sensor { z-index: 3; top: calc(var(--bz) + var(--sw) * .03); width: calc(var(--sw) * .3); height: calc(var(--sw) * .085); border-radius: 99px; background: #000; }
.iovo-device-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; align-items: baseline; color: #F4F1EC; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.iovo-device-cap span { color: rgba(244, 241, 236, .6); }
.iovo-device-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.iovo-device-x:hover { background: rgba(255, 255, 255, .24); }
.iovo-device-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.iovo-device.is-open .iovo-device-scrim, .iovo-device.is-open .iovo-device-frame { opacity: 1; }
.iovo-device.is-open .iovo-device-frame { transform: none; }

/* Financing: the approval comes back live (the spec of the site's financing scene, scene-5.js): loading ring → amber
   flash → the green check draws → the app's real approval modal fills in: title, then lender + approval ID, then the
   rest. The modal stages are the app's own captures; the ring sits in the middle of the modal box. */
.iovo-device-stages { position: absolute; inset: 0; pointer-events: none; }
.is-approval .iovo-device-img { visibility: hidden; }
.iovo-stage { opacity: 0; }
.iovo-stage[data-n="0"] { opacity: 1; }
.iovo-approve-box { position: absolute; display: grid; place-items: center; }
.iovo-approve { width: 30%; max-height: 46%; aspect-ratio: 1; overflow: visible; opacity: 0; }
.iovo-device-frame[data-kind="phone"] .iovo-approve { width: 34%; }
.iovo-approve circle, .iovo-approve path { fill: none; transform-box: fill-box; transform-origin: center; }
.iovo-approve-track { stroke: rgba(222, 246, 246, .16); stroke-width: 3; }
.iovo-approve-spin { stroke: #4DD9C0; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .26 .74; }
.iovo-approve-flash { stroke: var(--accent, #FF9A27); stroke-width: 6; opacity: 0; }
.iovo-approve-ring { stroke: #36D399; stroke-width: 3.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.iovo-approve-check { stroke: #36D399; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.iovo-device-frame[data-theme="light"] .iovo-approve-track { stroke: rgba(16, 32, 51, .14); }
.iovo-device-frame[data-theme="light"] .iovo-approve-spin { stroke: #0F9AA3; }
.iovo-device-frame[data-theme="light"] .iovo-approve-ring, .iovo-device-frame[data-theme="light"] .iovo-approve-check { stroke: #18A96F; }
.is-playing .iovo-approve { animation: iovo-appr-show 2.2s var(--ease-out) both; }
.is-playing .iovo-approve-spin { animation: iovo-appr-spin .5s linear 2, iovo-appr-out .15s .95s both; }
.is-playing .iovo-approve-track { animation: iovo-appr-out .2s 1s both; }
.is-playing .iovo-approve-flash { animation: iovo-appr-flash .55s 1s both; }
.is-playing .iovo-approve-ring { animation: iovo-appr-draw .35s 1s var(--ease-out) both; }
.is-playing .iovo-approve-check { animation: iovo-appr-draw .4s 1.2s var(--ease-out) both; }
.is-playing .iovo-stage[data-n="1"] { animation: iovo-appr-in .35s 2s both; }
.is-playing .iovo-stage[data-n="2"] { animation: iovo-appr-in .35s 2.5s both; }
.is-playing .iovo-stage[data-n="3"] { animation: iovo-appr-in .35s 3s both; }
@keyframes iovo-appr-show { 0% { opacity: 0; transform: scale(.85) } 12% { opacity: 1; transform: none } 82% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(.94) } }
@keyframes iovo-appr-spin { to { transform: rotate(360deg) } }
@keyframes iovo-appr-out { to { opacity: 0 } }
@keyframes iovo-appr-flash { 0% { opacity: 0; transform: scale(1) } 30% { opacity: .9 } 100% { opacity: 0; transform: scale(1.28) } }
@keyframes iovo-appr-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes iovo-appr-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .iovo-device-frame, .iovo-device-scrim, .iovo-mini { transition: none; } }
/* ---------- Pass 12 · AQUIS finale Easter egg (aquis.js) ----------
   Tap / click / Enter on the drop: squash-and-bounce + blink, a ripple rings out across the orbit, each role lights up in
   turn, a few droplets sparkle. ~2.2 s, repeatable. Reduced motion: the roles light up in turn, nothing moves. */
button.iovo-finale-core { padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.iovo-finale-core:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.iovo-aq-body { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 86%; }
.iovo-aq-lid { position: absolute; left: var(--x); top: 49.6%; width: 9.6%; height: 9.6%; border-radius: 50%; background: #02060F; transform: translate(-50%, -50%) scaleY(0); }
.iovo-egg-fx { position: absolute; inset: 0; pointer-events: none; }
.iovo-egg-ripple { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--cyan); opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.iovo-egg-spark { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--cyan); opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.iovo-egg-spark:nth-child(odd) { background: var(--accent); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.is-egg .iovo-aq-body { animation: iovo-egg-bounce .95s cubic-bezier(.3, .7, .4, 1) both; }
.is-egg .iovo-aq-lid { animation: iovo-egg-blink .34s .82s both, iovo-egg-blink .3s 1.32s both; }
.is-egg .iovo-egg-ripple { animation: iovo-egg-ripple 1.3s .12s ease-out both; }
.is-egg .iovo-egg-ripple + .iovo-egg-ripple { animation-delay: .46s; }
.is-egg .iovo-egg-spark { animation: iovo-egg-spark .7s calc(.5s + var(--k) * .12s) ease-out both; }
.is-egg .iovo-finale-steps li { animation: iovo-egg-role .62s calc(.35s + var(--k) * .17s) both; }
.is-egg .iovo-finale-steps li i { animation: iovo-egg-dot .62s calc(.35s + var(--k) * .17s) both; }
@keyframes iovo-egg-bounce { 0% { transform: none } 14% { transform: scale(1.14, .84) } 34% { transform: translateY(-16%) scale(.92, 1.1) }
  54% { transform: translateY(0) scale(1.06, .94) } 70% { transform: scale(.98, 1.02) } 100% { transform: none } }
@keyframes iovo-egg-blink { 0%, 100% { transform: translate(-50%, -50%) scaleY(0) } 45%, 55% { transform: translate(-50%, -50%) scaleY(1) } }
@keyframes iovo-egg-ripple { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.6) } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.55) } }
@keyframes iovo-egg-spark { 0% { opacity: 0; transform: scale(.2) } 40% { opacity: 1; transform: scale(1.25) rotate(20deg) } 100% { opacity: 0; transform: scale(.4) rotate(90deg) } }
@keyframes iovo-egg-role { 0%, 100% { } 35% { color: var(--text); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 4px var(--accent-soft); } }
@keyframes iovo-egg-dot { 0%, 100% { } 35% { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } }
@keyframes iovo-egg-role-still { 0%, 100% { } 30%, 60% { color: var(--text); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) {
  .is-egg .iovo-aq-body, .is-egg .iovo-aq-lid, .is-egg .iovo-egg-ripple, .is-egg .iovo-egg-spark, .is-egg .iovo-finale-steps li i { animation: none; }
  .is-egg .iovo-finale-steps li { animation: iovo-egg-role-still .8s calc(var(--k) * .2s) both; }
}