/* ============================================================
   AUTOLINK — VIDEO EDITING page (/video-editing)
   Loads after core.css. Page-only styles; everything prefixed .ve-.
   Motion: transform/opacity only (frame morph = size transition
   inside a fixed stage, so nothing around it moves).
   ============================================================ */

/* ---------- Scale factor: tracks core's --grid growth on big screens (1280→1440→1720→2240) ---------- */
main { --ve-s: 1; }
@media (min-width: 1800px) { main { --ve-s: 1.125; } }
@media (min-width: 2400px) { main { --ve-s: 1.34; } }
@media (min-width: 3200px) { main { --ve-s: 1.75; } }

/* ---------- Section rhythm ---------- */
.ve-sec, .ve-demo { position: relative; z-index: 2; }
.ve-sec { padding: clamp(96px, 12vw, 160px) 0 0; }
#demo, #work { scroll-margin-top: 96px; }
.ve-h { margin: 0 0 clamp(32px, 4vw, 56px); }

/* ---------- HERO (as /ad-accounts: title + two buttons, no sub) ---------- */
.ve-hero { position: relative; z-index: 2; }

/* Hero background — the same dark layer + fade as /ad-accounts and the hub. */
.ve-hero .hero-bars {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background: #050608;
}
.ve-hero .hero-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(8,9,11,0.55) 55%, var(--bg) 100%);
}
.ve-hero > .wrap { position: relative; z-index: 2; }
.ve-fold {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(96px, 14vh, 140px) 0 clamp(40px, 6vh, 72px);
}
.ve-eyebrow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 clamp(20px, 4.5vh, 36px);
}
.ve-eyebrow .mono { margin: 0; font-size: calc(11px * var(--ve-s)); }
.ve-eyebrow .status { font-size: calc(10px * var(--ve-s)); }
.ve-fold .hero-title { text-align: center; }
/* Line 2 ("Creatives That Convert.") is ~10.3em wide — sized so it holds one line
   wherever it can, same vh cap idea as the live H1. */
/* Widest line "Cut, Caption, Scale." ≈8.65em — shorter than /ad-accounts' "Rent, Manage, Scale.", so desktop gets the same size. */
.ve-fold h1.hero-title .em { padding-bottom: 0.14em; } /* room for descenders under the silver gradient */
.ve-fold .hero-actions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(40px, 9vh, 110px);
}

/* ---------- EDITOR DEMO (#demo) ---------- */
.ve-demo { padding: clamp(8px, 2vh, 24px) 0 clamp(56px, 7vw, 96px); }
.ve-demo-cap {
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(24px, 3vw, 36px);
}
/* Same type as the live hero-dash caption ("One panel. Total control.") */
.ve-demo-title {
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, calc(52px * var(--ve-s)));
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
}
.ve-demo-title .em {
  font-weight: 400;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8BAC0 60%, #6E7079 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
/* Scroll-driven rise — same keyframes as ad-accounts .hero-dash (dashSectionEnter). */
@supports (animation-timeline: view()) {
  html:not(.reduced) .ve-demo-stage {
    animation: dashSectionEnter linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 35%;
    will-change: transform, opacity;
  }
  @keyframes dashSectionEnter {
    0%   { opacity: 0; transform: translateY(14vh) scale(0.94); filter: blur(10px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  /* Phones/tablets: no filter under transform (DESIGN-LESSONS §1.5). */
  @media (max-width: 900px) {
    html:not(.reduced) .ve-demo-stage { animation-name: dashSectionEnterLite; }
    @keyframes dashSectionEnterLite {
      0%   { opacity: 0; transform: translateY(10vh) scale(0.96); }
      60%  { opacity: 1; }
      100% { opacity: 1; transform: none; }
    }
  }
}

.ve-editor { box-shadow: 0 60px 120px -60px rgba(0,0,0,0.9); }
.ve-ver { margin-left: 12px; font-size: calc(9px * var(--ve-s)); flex-shrink: 0; }
.ve-editor .winbar { padding: calc(12px * var(--ve-s)) calc(14px * var(--ve-s)); }
.ve-editor .winbar b { width: calc(8px * var(--ve-s)); height: calc(8px * var(--ve-s)); }
.ve-editor .winbar .url { font-size: calc(11px * var(--ve-s)); }
.ve-ed-grid { display: grid; grid-template-columns: calc(220px * var(--ve-s)) minmax(0, 1fr) calc(240px * var(--ve-s)); }
.ve-ed-grid > * { min-width: 0; }

.ve-lab {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: calc(10px * var(--ve-s)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  margin-bottom: calc(8px * var(--ve-s));
}

/* Media bin */
.ve-bin { border-right: 1px solid var(--line); padding: calc(18px * var(--ve-s)) calc(14px * var(--ve-s)); display: flex; flex-direction: column; gap: calc(6px * var(--ve-s)); }
.ve-bin .ve-lab { padding: 0 8px; }
.ve-clip {
  display: grid; grid-template-columns: calc(44px * var(--ve-s)) minmax(0, 1fr); gap: calc(10px * var(--ve-s)); align-items: center;
  padding: calc(7px * var(--ve-s)) calc(8px * var(--ve-s)); border-radius: 9px;
  font-size: calc(12px * var(--ve-s)); line-height: 1.35; color: var(--text-2);
}
.ve-clip.is-on { background: rgba(255,255,255,0.05); color: var(--text); }
.ve-clip-txt { min-width: 0; display: flex; flex-direction: column; }
.ve-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-clip small { font-size: calc(11px * var(--ve-s)); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ve-th { position: relative; overflow: hidden; height: calc(28px * var(--ve-s)); border-radius: 5px; background: linear-gradient(160deg, #2A2C33, #121318); border: 1px solid rgba(255,255,255,0.08); }
/* Stylized frames (#vf-* symbols in the page sprite): fill their box like a desaturated still. */
.ve-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ve-shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ve-clip { transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.ve-clip.is-on .ve-th { border-color: rgba(255,255,255,0.3); }
.ve-th.is-audio { background: #15171C; }
.ve-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85); }
.ve-th-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Viewer: a square stage holds the frame; the frame morphs its size inside it. */
.ve-view {
  padding: calc(26px * var(--ve-s));
  display: flex; flex-direction: column; align-items: center; gap: calc(14px * var(--ve-s));
  background: radial-gradient(400px 300px at 50% 40%, rgba(255,255,255,0.03), transparent 70%);
}
.ve-stage {
  position: relative;
  /* capped by width AND viewport height so the editor fits short screens */
  width: min(100%, calc(390px * var(--ve-s)), 56svh);
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}
/* Desktop: the whole editor (bar + viewer + timeline ≈ stage + 315px) fits under the
   nav on 1366×768 and 1280×720 laptops too. */
@media (min-width: 961px) {
  .ve-stage { width: min(100%, calc(390px * var(--ve-s)), 56svh, max(260px, calc(100svh - 420px))); }
}
.ve-frame {
  position: absolute; left: 50%; top: 50%;
  width: 56.25%; height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(170deg, #2C2E35 0%, #17181D 55%, #0E0F12 100%);
  border: 1px solid rgba(255,255,255,0.1);
  /* Format changes are hard cuts (at the loop wrap), never a morph. Frame units (cqw/cqh/cqmin)
     size the captions, label and end card so they compose in every format. */
  container-type: size;
}
.ve-frame[data-fmt="4x5"]  { width: 80%;  height: 100%; }
.ve-frame[data-fmt="1x1"]  { width: 100%; height: 100%; }
.ve-frame[data-fmt="16x9"] { width: 100%; height: 56.25%; }

/* The ad itself: fills the 9:16 frame. Its poster (first frame) shows until it plays. */
.ve-ad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0B0C0F; }
.ve-safe {
  position: absolute; inset: 9% 6.5% 18%;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 8px;
}
.ve-frame[data-fmt="16x9"] .ve-safe { inset: 12% 5% 14%; }
.ve-frame-lab {
  position: absolute; z-index: 3; top: 3.4cqmin; left: 4cqmin;
  font-size: clamp(8px, 4cqmin, calc(9px * var(--ve-s))); color: #C9CBD1;
  white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.ve-transport {
  display: flex; align-items: center; gap: 10px;
  font-size: calc(12px * var(--ve-s)); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.ve-play {
  width: calc(44px * var(--ve-s)); height: calc(44px * var(--ve-s)); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: #FFFFFF; cursor: pointer;
}
.ve-play:focus-visible { border-radius: 50%; }
.ve-play { min-width: 44px; min-height: 44px; } /* real control: 44px tap target at any scale */
.ve-play-dot {
  width: calc(34px * var(--ve-s)); height: calc(34px * var(--ve-s)); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  transition: transform 0.4s var(--ease-out);
}
.ve-play svg { display: block; width: calc(12px * var(--ve-s)); height: auto; }
.ve-play .i-pause { display: none; }
.ve-editor[data-playing="true"] .ve-play .i-pause { display: block; }
.ve-editor[data-playing="true"] .ve-play .i-play { display: none; }
.ve-tc-dur { color: var(--text-3); }
/* Sound: same control as play; the hint on the frame shows until the sound is on. */
.ve-snd .i-snd { display: none; }
.ve-editor.has-sound .ve-snd .i-snd { display: block; }
.ve-editor.has-sound .ve-snd .i-mute { display: none; }
.ve-editor.has-sound .ve-snd .ve-play-dot { background: #FFFFFF; color: #08090B; border-color: #FFFFFF; }
#veFrame { cursor: pointer; }
.ve-snd-hint {
  position: absolute; left: 50%; bottom: calc(12px * var(--ve-s)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: calc(6px * var(--ve-s)) calc(11px * var(--ve-s));
  border-radius: 99px; background: rgba(8,9,11,0.62); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: calc(11px * var(--ve-s)); font-weight: 500; color: #FFFFFF; letter-spacing: 0.01em;
  pointer-events: none; transition: opacity 0.35s var(--ease-out);
}
.ve-snd-hint svg { width: calc(12px * var(--ve-s)); height: auto; flex-shrink: 0; }
.ve-editor.has-sound .ve-snd-hint { opacity: 0; }
html.reduced .ve-snd-hint { display: none; }

/* Inspector */
.ve-insp { border-left: 1px solid var(--line); padding: calc(18px * var(--ve-s)); display: flex; flex-direction: column; gap: calc(18px * var(--ve-s)); }
.ve-insp p { margin: 0; font-size: calc(13px * var(--ve-s)); color: var(--text-2); }
.ve-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ve-pill {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  font-size: calc(10px * var(--ve-s)); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
  padding: calc(5px * var(--ve-s)) calc(10px * var(--ve-s)); border-radius: 100px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
  transition: color 0.35s var(--ease-out);
}
.ve-pill::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; background: #FFFFFF;
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.ve-pill.is-sel { color: #08090B; }
.ve-pill.is-sel::before { opacity: 1; transform: none; }
.ve-export-wrap { position: relative; margin-top: auto; }
.ve-export-m { display: none; }
.ve-export {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: calc(12px * var(--ve-s)) calc(18px * var(--ve-s)); border-radius: 100px;
  background: #FFFFFF; color: #08090B;
  font-size: calc(14px * var(--ve-s)); font-weight: 500; white-space: nowrap;
  transition: box-shadow 0.25s var(--ease-out);
}
/* Click sequence (shared 2.85s cursor from .is-clicking): arrives 1.77s → hover ring →
   rest → press + ripple at 1.95s → "Exporting…" at 2.12s (JS) → "Exported" + check at 3.78s. */
.ve-export-cursor { left: calc(62% - 3px); top: calc(50% - 2px); }
.ve-export .art-ripple { left: 62%; top: 50%; border-color: rgba(8,9,11,0.35); background: rgba(8,9,11,0.12); }
.ve-editor.is-clicking .ve-export { box-shadow: 0 0 0 4px rgba(255,255,255,0.14); transition-delay: 1.77s; animation: artBtnPress 0.45s var(--ease-snappy) 1.95s; }
.ve-editor.is-clicking .ve-export .art-ripple { animation: artRipple 0.7s var(--ease-out) 1.95s 1 both; }
.ve-export .ve-chk { opacity: 0; transition: opacity 0.2s var(--ease-out); }
.ve-export.is-done .ve-chk { opacity: 1; }
.ve-export .ve-chk path { transition-delay: 0.05s; }
.ve-export.is-done .ve-chk path { stroke-dashoffset: 0; }
.ve-export-l { transition: opacity 0.16s var(--ease-out); }
.ve-export-l.is-dip { opacity: 0; }
/* Loop paused (off-screen / Pause button): freeze the click mid-way too. */
.ve-editor.is-frozen .art-cursor, .ve-editor.is-frozen .ve-export, .ve-editor.is-frozen .art-ripple { animation-play-state: paused; }

/* Timeline */
.ve-tl {
  --tl-pad: calc(22px * var(--ve-s)); --tl-lab: calc(36px * var(--ve-s)); --tl-gap: calc(10px * var(--ve-s)); --lane-h: calc(26px * var(--ve-s));
  border-top: 1px solid var(--line);
  padding: 16px var(--tl-pad) 20px;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.ve-track { display: grid; grid-template-columns: var(--tl-lab) minmax(0, 1fr); gap: var(--tl-gap); align-items: center; }
.ve-track > span:first-child { font-size: calc(10px * var(--ve-s)); color: var(--text-3); letter-spacing: 0.08em; }
.ve-ruler { position: relative; height: calc(13px * var(--ve-s)); font-size: calc(10px * var(--ve-s)); line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ve-ruler span { position: absolute; top: 0; left: calc(var(--t) / var(--tl-dur, 32) * 100%); transform: translateX(-50%); }
.ve-ruler span:first-child { transform: none; }
.ve-lane { display: flex; gap: 3px; height: var(--lane-h); }
.ve-lane > span { border-radius: 4px; min-width: 0; }
.ve-lane.is-caps { height: calc(var(--lane-h) * 0.62); }
.ve-lane.is-thin { height: calc(var(--lane-h) * 0.46); }
.c-a { background: #3A3D46; }
.c-b { background: #4A4E59; }
.c-c { background: #40434D; }
.c-d { background: #23252B; }
.ve-lane .is-sel { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.ve-blk { background: #FFFFFF; opacity: 0.38; transition: opacity 0.15s var(--ease-out); }
.ve-blk.is-on { opacity: 1; }
/* V1 / V2 clip blocks: label inside, the one under the playhead lights up. */
.ve-cb { display: flex; align-items: center; padding: 0 calc(7px * var(--ve-s)); overflow: hidden; transition: box-shadow 0.15s var(--ease-out), filter 0.15s var(--ease-out); }
.ve-cb i { font-style: normal; font-size: calc(9px * var(--ve-s)); color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ve-cb.is-on { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); filter: brightness(1.35); }
.ve-cb.is-on i { color: #FFFFFF; }
.ve-wave { width: 100%; height: var(--lane-h); display: block; }
.ve-ph-layer {
  position: absolute; top: 10px; bottom: 14px;
  left: calc(var(--tl-pad) + var(--tl-lab) + var(--tl-gap));
  right: var(--tl-pad);
  pointer-events: none;
}
.ve-ph { position: absolute; inset: 0; will-change: transform; }
/* Scrubber (video-editing.js): the whole timeline takes a click or a sideways drag. */
.ve-tl[role="slider"] { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ve-tl[role="slider"]:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: -2px; border-radius: 0 0 14px 14px; }
.ve-editor.is-scrubbing .ve-tl { cursor: grabbing; }
.ve-ph::after { transition: transform 0.2s var(--ease-out); }
.ve-tl[role="slider"]:hover .ve-ph::after, .ve-editor.is-scrubbing .ve-ph::after { transform: scale(1.3); }
.ve-editor.is-prebuild .ve-tl { cursor: default; }

/* Build-in (video-editing.js, once): until the timeline is in view the tracks are empty and the preview waits;
   then clips snap onto V1, inserts drop onto V2, caption blocks wipe in, the VO draws and the playhead starts.
   --d is each piece's delay. Fill "both" holds the hidden start through the delay. */
.ve-ph-layer { transition: opacity 0.4s var(--ease-out); }
.ve-frame .ve-ad, .ve-frame .ve-frame-lab { transition: opacity 0.5s var(--ease-out); }
.ve-editor.is-prebuild .ve-ph-layer,
.ve-editor.is-prebuild .ve-ruler span,
.ve-editor.is-prebuild .ve-cb { opacity: 0; }
.ve-editor.is-prebuild .ve-frame .ve-ad { opacity: 0.3; }
.ve-editor.is-prebuild .ve-frame .ve-frame-lab { opacity: 0; }
.ve-editor.is-prebuild .ve-blk,
.ve-editor.is-prebuild .ve-lane.is-thin > span { transform: scaleX(0); }
.ve-editor.is-prebuild .ve-wave { clip-path: inset(0 100% 0 0); }
.ve-editor.is-building .ve-ruler span { animation: veFadeIn 0.4s var(--ease-out) var(--d) both; }
.ve-editor.is-building .ve-cb {
  animation: veSnap 0.6s var(--ease-snappy) var(--d) both, veSnapLit 0.7s var(--ease-out) calc(var(--d) + 0.3s);
}
.ve-editor.is-building #veV2 .ve-cb { animation-name: veDrop, veSnapLit; }
.ve-editor.is-building .ve-blk,
.ve-editor.is-building .ve-lane.is-thin > span { transform-origin: 0 50%; animation: veWipe 0.5s var(--ease-out) var(--d) both; }
.ve-editor.is-building .ve-wave { animation: veDraw 0.9s var(--ease-in-out) var(--d) both; }
@keyframes veFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veSnap {
  from { opacity: 0; transform: translate3d(-22px, -6px, 0) scale(0.94); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes veDrop {
  from { opacity: 0; transform: translate3d(0, -16px, 0) scale(0.96); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes veSnapLit {
  from { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 0 14px rgba(255,255,255,0.18); filter: brightness(1.5); }
  to   { box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 0 14px rgba(255,255,255,0); filter: none; }
}
@keyframes veWipe { from { transform: scaleX(0); } to { transform: none; } }
@keyframes veDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ve-ph::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,0.7);
}
.ve-ph::after {
  content: ""; position: absolute; top: -2px; left: -5px;
  width: 11px; height: 11px; border-radius: 3px; background: #FFFFFF;
}

/* ---------- PARTNERS (copied from /ad-accounts) ---------- */
/* === PARTNERS === */
.partners {
  padding: 28px 0 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
  overflow: hidden;
}
.partners-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.partners-row .partner-logo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 56px;
  opacity: 0.78;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.partners-row .partner-logo:hover { opacity: 1; transform: translateY(-2px); }
.partners-row .partner-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  filter: brightness(1.4);
}
.partners-row .partner-logo.text-only {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.85);
}

/* ---------- SAMPLES — one row of 9:16 tiles (4 across; 2×2 on phones) ---------- */
.ve-reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ve-tile {
  position: relative; isolation: isolate;
  aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(12px, 6cqw, calc(18px * var(--ve-s)));
  background: linear-gradient(170deg, #2C2E35 0%, #16171C 60%, #0E0F12 100%);
  container-type: inline-size;
  min-width: 0;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), border-color 0.3s var(--ease-out);
}
.ve-tile.reveal { transition-delay: calc(var(--col, 0) * 0.08s), calc(var(--col, 0) * 0.08s), 0s; }
.ve-tile:nth-child(4n+2) { background: linear-gradient(170deg, #26282E 0%, #141519 60%, #0D0E11 100%); }
.ve-tile:nth-child(4n+3) { background: linear-gradient(170deg, #2A2C32 0%, #15161A 60%, #0E0F12 100%); }
.ve-tile:nth-child(4n+4) { background: linear-gradient(170deg, #222429 0%, #121317 60%, #0D0E11 100%); }
.ve-tile[tabindex]:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; }
.ve-tile-top, .ve-tile-bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 1; min-width: 0; }
.ve-tile-top .tag { background: rgba(8,9,11,0.35); }
.ve-tile .tag { font-size: calc(10px * var(--ve-s)); }
.ve-dur { font-size: calc(10px * var(--ve-s)); color: #C9CBD1; font-variant-numeric: tabular-nums; }
.ve-niche { margin: 0; font-size: calc(10px * var(--ve-s)); min-width: 0; line-height: 1.5; }
.ve-tcap {
  position: relative; z-index: 1;
  margin: 0;
  font-size: clamp(13px, 7.2cqw, calc(20px * var(--ve-s))); font-weight: 500; line-height: 1.32; letter-spacing: -0.02em;
  text-align: center;
  overflow-wrap: anywhere;
  transition: opacity 0.4s var(--ease-out);
}
.ve-tcap b {
  background: #FFFFFF; color: #08090B; font-weight: 500;
  padding: 0.1em 0.3em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ve-playic {
  flex-shrink: 0;
  width: calc(46px * var(--ve-s)); height: calc(46px * var(--ve-s)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.ve-playic svg { display: block; transform: translateX(1px); width: 30%; height: auto; }
/* Real media (when a REEL item has src/poster) */
.ve-tile-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.ve-tile.has-poster .ve-tile-vid, .ve-tile.is-playing .ve-tile-vid { opacity: 1; }
.ve-tile.has-poster .ve-tcap { opacity: 0; }
.ve-tile.is-playing .ve-playic { opacity: 0; transform: scale(0.8); }
/* Stylized still behind the tile UI; a real poster/video (z-index 0) sits above it. */
.ve-tile > .ve-shot { z-index: -1; }

@media (hover: hover) and (pointer: fine) {
  .ve-tile:hover { border-color: rgba(255,255,255,0.18); }
  .ve-tile:hover .ve-playic { transform: scale(1.08); }
  .ve-play:hover .ve-play-dot { transform: scale(1.08); }
}

/* ============================================================
   JOURNEY STEP ART — 480×320 .hiw-art cards (components.css owns the card,
   the timeline and the comparison table; only the mocks live here).
   Every state change is one element: nothing crossfades two labels.
   ============================================================ */
/* ART 02 — order form (ported from /ad-accounts step 01): lines add, cursor clicks, "Paid from wallet" */
.hiw-form-card {
  height: 100%;
  display: flex; flex-direction: column;
  gap: 0;
  position: relative;
}
.hiw-form-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  transform: translateX(-12px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .hiw-form-row {
  transform: translateX(0); opacity: 1;
}
.hiw-step:is(.is-active, .is-played) .hiw-form-row:nth-child(1) { transition-delay: 0.36s; }
.hiw-step:is(.is-active, .is-played) .hiw-form-row:nth-child(2) { transition-delay: 0.47s; }
.hiw-step:is(.is-active, .is-played) .hiw-form-row:nth-child(3) { transition-delay: 0.58s; }
.hiw-step:is(.is-active, .is-played) .hiw-form-row:nth-child(4) { transition-delay: 0.68s; }
.hiw-form-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hiw-form-val {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hiw-form-cta {
  margin-top: auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px;
  background: #15171C;
  color: #F4F4F4;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease-out) 0.9s, transform 0.55s var(--ease-out) 0.9s;
  overflow: hidden;
  min-height: 60px;
}
.hiw-step:is(.is-active, .is-played) .hiw-form-cta { opacity: 1; transform: translateY(0); }
/* Click: cursor starts 0.5s → arrives 2.27s (hover: CTA brightens) → rests → press + ripple 2.45s
   → only then the state machine leaves "Pay from Wallet" (2.62s) → signature 2.88s → "Paid from wallet" 4.7s. */
.hiw-form-cta { transition: opacity 0.55s var(--ease-out) 0.9s, transform 0.55s var(--ease-out) 0.9s, background 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.hiw-step:is(.is-active, .is-played) .hiw-form-cta {
  background: #1E2027; border-color: rgba(255,255,255,0.22);
  transition-delay: 0.9s, 0.9s, 2.27s, 2.27s;
  animation: artBtnPress 0.45s var(--ease-snappy) 2.45s;
}
.ve-pay-cursor { left: calc(62% - 3px); bottom: 8px; --cur-d: 0.5s; }
.hiw-form-cta .art-ripple { left: 62%; top: 50%; z-index: 2; }
.hiw-step:is(.is-active, .is-played) .hiw-form-cta .art-ripple { animation: artRipple 0.7s var(--ease-out) 2.45s 1 both; }

/* CTA state machine */
.hiw-cta-state {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  position: absolute;
  inset: 0;
  padding: 0 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.hiw-cta-idle {
  justify-content: space-between;
  opacity: 1;
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-idle    { animation: hiwCtaStateOut 0.23s var(--ease-out) 2.62s forwards; }
.hiw-step:is(.is-active, .is-played) .hiw-cta-loading { animation: hiwCtaStateIn  0.23s var(--ease-out) 2.86s forwards,
                                                  hiwCtaStateOut 0.23s var(--ease-out) 4.45s forwards; }
.hiw-step:is(.is-active, .is-played) .hiw-cta-sent    { animation: hiwCtaStateIn  0.27s var(--ease-snappy) 4.7s forwards; }
@keyframes hiwCtaStateIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hiwCtaStateOut { from { opacity: 1; } to { opacity: 0; } }

.hiw-cta-text { letter-spacing: -0.005em; }
.hiw-form-arrow {
  transition: transform 0.4s var(--ease-out);
}
/* Loading: real AutoLink signature drawing in black ink */
.hiw-cta-sig {
  width: 132px;
  height: 38px;
  display: block;
  overflow: visible;
}
.hiw-cta-sig-stroke {
  /* pathLength="1" normalized + draw via TRANSITION (not a keyframe animation):
     on WebKit/iOS Safari a keyframe-animated stroke-dashoffset inside a
     transform:scale fragments the strokes (the same bug the agreement signature
     had). A transition to a resting state composites cleanly. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset var(--dur, 0.4s) cubic-bezier(0.45, 0.05, 0.4, 1) calc(2.88s + var(--d, 0s));
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-loading .hiw-cta-sig-stroke {
  opacity: 1;
  stroke-dashoffset: 0;
}
/* Per-stroke timing — compressed AutoLink signature, ~1.5s total */
.hiw-cta-sig-stroke[data-i="0"] { --len: 220; --dur: 0.16s; --d: 0.00s; }
.hiw-cta-sig-stroke[data-i="1"] { --len: 28;  --dur: 0.05s; --d: 0.18s; }
.hiw-cta-sig-stroke[data-i="2"] { --len: 520; --dur: 0.36s; --d: 0.24s; }
.hiw-cta-sig-stroke[data-i="3"] { --len: 22;  --dur: 0.05s; --d: 0.62s; }
.hiw-cta-sig-stroke[data-i="4"] { --len: 220; --dur: 0.18s; --d: 0.68s; }
.hiw-cta-sig-stroke[data-i="5"] { --len: 380; --dur: 0.31s; --d: 0.87s; }
.hiw-cta-sig-stroke[data-i="6"] { --len: 120; --dur: 0.11s; --d: 1.19s; }
.hiw-cta-sig-stroke[data-i="7"] { --len: 480; --dur: 0.29s; --d: 1.31s; }
@keyframes hiwCtaSigDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
/* i-dot pop */
.hiw-cta-sig-dot {
  opacity: 0;
  transform-origin: center;
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-loading .hiw-cta-sig-dot {
  animation: hiwCtaSigDot 0.16s var(--ease-snappy) calc(2.88s + 1.08s) forwards;
}
@keyframes hiwCtaSigDot {
  0%   { opacity: 0; transform: translateY(-2px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(0) scale(1.3); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sent state — premium */
.hiw-cta-sent {
  gap: 11px;
}
.hiw-cta-check-wrap {
  flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.hiw-cta-check-wrap::after {
  /* soft glow halo behind the badge */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
  opacity: 0;
  z-index: -1;
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-check-wrap::after {
  animation: hiwCtaBadgeGlow 0.55s var(--ease-out) 4.95s forwards;
}
@keyframes hiwCtaBadgeGlow {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.hiw-cta-check-svg {
  display: block;
}
/* Ring draws around first */
.hiw-cta-check-ring {
  stroke-dasharray: 66;
  stroke-dashoffset: 66;
  transform-origin: center;
  transform: rotate(-90deg);
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-check-ring {
  animation: hiwCtaRingDraw 0.4s cubic-bezier(0.5, 0, 0.2, 1) 4.75s forwards;
}
@keyframes hiwCtaRingDraw {
  to { stroke-dashoffset: 0; }
}
/* Tick follows, with snap */
.hiw-cta-check-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-check-tick {
  animation: hiwCtaTickDraw 0.29s cubic-bezier(0.65, 0, 0.35, 1) 5.02s forwards;
}
@keyframes hiwCtaTickDraw {
  to { stroke-dashoffset: 0; }
}
/* Single-line copy */
.hiw-cta-sent-copy {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}
.hiw-cta-sent-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #F4F4F4;
  opacity: 0;
  transform: translateY(4px);
}
.hiw-step:is(.is-active, .is-played) .hiw-cta-sent-label {
  animation: hiwCtaSentCopy 0.36s var(--ease-out) 4.9s forwards;
}
@keyframes hiwCtaSentCopy {
  to { opacity: 1; transform: translateY(0); }
}

/* Shared bits for the video step art */
.ve-art { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ve-art-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
/* Art headers share the hub label style: 10px, uppercase, 1.4px tracking, muted. */
.ve-art-title, .art-lbl {
  font-family: var(--font-sans);
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ve-art-meta { font-size: 9px; color: var(--text-3); letter-spacing: 0.18em; text-transform: uppercase; }
.ve-ready {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
  padding: 4px 9px; border-radius: 100px; border: 1px solid var(--line-2);
}
.ve-ready i { width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF; }
/* One-shot status pop: the element appears once (no label swap) and stays. */
.ve-pop {
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.35s var(--ease-out) var(--pd, 1.7s), transform 0.45s var(--ease-snappy) var(--pd, 1.7s);
}
.hiw-step:is(.is-active, .is-played) .ve-pop { opacity: 1; transform: none; }
.ve-chk { width: 11px; height: 11px; flex-shrink: 0; overflow: visible; }
.ve-chk path {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--pd, 1.7s) + 0.25s);
}
.hiw-step:is(.is-active, .is-played) .ve-chk path { stroke-dashoffset: 0; }

/* ART 01 — wallet = the hub's "Load your wallet." art, rule for rule (hub.css step 02), with
   BANK · USDT · USDC. Panel 0.36s → chips 0.495s → Top Up 0.63s. Click: cursor starts 1.26s →
   rests on Top Up (border brightens 3.015s) → press + ripple 3.195s → balance fills from 3.375s →
   "Funds added" 4.5s. */
.art-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.art-pop {
  font-size: 9px; color: #08090B; background: #FFFFFF;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.36s var(--ease-snappy), transform 0.36s var(--ease-snappy);
}
.art-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  min-height: 48px;
  background: #15171C;
  color: #F4F4F4;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.54s var(--ease-out) 0.765s, transform 0.54s var(--ease-out) 0.765s,
              background 0.36s var(--ease-out), color 0.36s var(--ease-out), border-color 0.36s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .art-btn { opacity: 1; transform: none; }
.art-btn-icon { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; }
.wal { position: relative; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.wal-panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.54s var(--ease-out) 0.36s, transform 0.54s var(--ease-out) 0.36s;
}
.hiw-step:is(.is-active, .is-played) .wal-panel { opacity: 1; transform: none; }
.wal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wal-note { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wal-meter { height: 10px; border-radius: 10px; background: rgba(255,255,255,0.06); overflow: hidden; }
.wal-fill {
  display: block; height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.55), #FFFFFF);
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
  transform-origin: left center;
  transform: scaleX(0.14);
  transition: transform 1.08s var(--ease-out) 3.375s;
}
.hiw-step:is(.is-active, .is-played) .wal-fill { transform: scaleX(0.88); }
.wal-methods {
  display: flex; gap: 6px; flex-wrap: wrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s var(--ease-out) 0.495s, transform 0.45s var(--ease-out) 0.495s;
}
.wal-methods .tag { font-size: 9px; padding: 4px 10px; transition: color 0.36s var(--ease-out), border-color 0.36s var(--ease-out); }
.hiw-step:is(.is-active, .is-played) .wal-methods { opacity: 1; transform: none; }
.wal-pick { color: var(--text); border-color: rgba(255,255,255,0.4); }
.wal-cta { position: relative; overflow: hidden; }
.art-wallet .art-btn { transition-delay: 0.63s, 0.63s, 0s, 0s, 3.015s; }
.hiw-step:is(.is-active, .is-played) .wal-cta { border-color: rgba(255,255,255,0.32); animation: artBtnPress 0.405s var(--ease-snappy) 3.195s; }
.wal-cta .art-ripple { left: calc(70% + 3px); top: 50%; }
.hiw-step:is(.is-active, .is-played) .wal-cta .art-ripple { animation: artRipple 0.63s var(--ease-out) 3.222s 1 forwards; }
.wal-cursor { left: 70%; bottom: 2px; --cur-d: 1.26s; }
.hiw-step:is(.is-active, .is-played) .wal-added { opacity: 1; transform: scale(1); transition-delay: 4.5s; }

/* ART 03 — upload: script + footage bars fill */
.ve-up { display: flex; flex-direction: column; }
.ve-up-row {
  padding: 11px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.ve-up-row:last-child { border-bottom: 0; }
/* Rows in from 0.36s (0.11s apart) → bars fill 2.0s each from 0.54 / 0.9 / 1.26 / 1.62s → "Sent to editor" 4.15s. */
.hiw-step:is(.is-active, .is-played) .ve-up-row { opacity: 1; transform: none; transition-delay: 0.36s; }
.hiw-step:is(.is-active, .is-played) .ve-up-row:nth-child(2) { transition-delay: 0.47s; }
.hiw-step:is(.is-active, .is-played) .ve-up-row:nth-child(3) { transition-delay: 0.58s; }
.hiw-step:is(.is-active, .is-played) .ve-up-row:nth-child(4) { transition-delay: 0.69s; }
.ve-up-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ve-dim { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ve-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.ve-bar i {
  display: block; height: 100%; background: #FFFFFF; border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 2s var(--ease-out) var(--d, 0s);
}
.hiw-step:is(.is-active, .is-played) .ve-bar i { transform: scaleX(var(--w, 1)); }

/* ART 04 — first edit: clips build 0.36→1.8s, playhead runs once 1.6→3.2s, "Ready" 3.4s,
   "Sent to you for review" 3.95s (check drawn by ~4.55s) */
.ve-art-cut1 { gap: 12px; }
.ve-mtl { position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ve-mtl-lane { display: flex; gap: 3px; height: 22px; }
.ve-mtl-lane > span { border-radius: 4px; min-width: 0; }
.ve-mtl-lane.is-v2 { height: 16px; }
.ve-mtl-lane.is-caps { height: 8px; }
.ve-mtl-lane.is-caps > span { border-radius: 2px; background: rgba(255,255,255,0.55); }
.ve-mtl-lane.is-audio { height: 6px; }
.ve-grow {
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.63s var(--ease-out) var(--d, 0s);
}
.hiw-step:is(.is-active, .is-played) .ve-grow { transform: scaleX(1); }
.ve-mtl-ph {
  position: absolute; left: 0; right: 0; top: 16px; bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: transform 1.6s var(--ease-in-out) 1.6s, opacity 0.27s var(--ease-out) 1.45s;
}
.ve-mtl-ph::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,0.7);
}
.hiw-step:is(.is-active, .is-played) .ve-mtl-ph { opacity: 1; transform: translateX(calc(100% - 1px)); }
.ve-sent {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text);
  transform-origin: left center;
}

/* ART 05 — review: pins pop in, notes land, cursor clicks "Send Notes", then "Edit v2 ready" */
.ve-art-cut { gap: 12px; }
.ve-cut-ruler { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ve-cut-lane { position: relative; height: 34px; display: flex; gap: 3px; }
.ve-cut-lane > span { border-radius: 4px; }
.ve-pin {
  position: absolute; left: var(--x); top: -6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 10px #FFFFFF;
  transform: scale(0);
  transition: transform 0.5s var(--ease-snappy) var(--d, 0s);
}
.ve-pin.is-b { background: #C9CBD1; box-shadow: none; }
.hiw-step:is(.is-active, .is-played) .ve-pin { transform: scale(1); }
.ve-notes { display: flex; flex-direction: column; gap: 8px; }
.ve-note {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; line-height: 1.4;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s var(--ease-out) var(--d, 0s), transform 0.55s var(--ease-out) var(--d, 0s);
}
.ve-note-t { font-size: 9px; letter-spacing: 0.14em; color: var(--text-3); margin-right: 10px; font-variant-numeric: tabular-nums; }
.hiw-step:is(.is-active, .is-played) .ve-note { opacity: 1; transform: none; }
.ve-act {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s var(--ease-out) 2.25s, transform 0.55s var(--ease-out) 2.25s;
}
.hiw-step:is(.is-active, .is-played) .ve-act { opacity: 1; transform: none; }
.ve-act-l { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.ve-btn-wrap { position: relative; display: inline-flex; }
.ve-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 16px; border-radius: 10px;
  background: #D9DADF; color: #08090B;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.ve-btn .ve-chk { --pd: 3.1s; opacity: 0; transition: opacity 0.2s var(--ease-out) 3.27s; }
.ve-btn .art-ripple { left: 60%; top: 50%; border-color: rgba(8,9,11,0.35); background: rgba(8,9,11,0.12); }
.ve-swap { transition: opacity 0.16s var(--ease-out); }
.ve-swap.is-dip { opacity: 0; }
/* Pins 0.54 / 0.9s → notes 1.26 / 1.71s → action row 2.25s. Click: cursor starts 1.15s → arrives 2.92s
   (hover: button brightens) → rests → press + ripple 3.1s → "Send Notes" → "Notes sent" from 3.27s (JS)
   + check → "Edit v2 ready" 4.05s. */
.hiw-step:is(.is-active, .is-played) .ve-btn {
  background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
  transition-delay: 2.92s;
  animation: artBtnPress 0.45s var(--ease-snappy) 3.1s;
}
.hiw-step:is(.is-active, .is-played) .ve-btn .ve-chk { opacity: 1; }
.hiw-step:is(.is-active, .is-played) .ve-btn .art-ripple { animation: artRipple 0.7s var(--ease-out) 3.1s 1 both; }
.ve-send-cursor { left: calc(60% - 3px); top: calc(50% - 2px); --cur-d: 1.15s; }

/* ART 06 — winner gets new hooks + a new-CTA variant: tiles 0.36s (0.11s apart), captions 1.26→2.86s (0.4s apart), count 3.6s */
.ve-hk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ve-hk {
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: linear-gradient(160deg, #2A2C33, #111216);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 7px; min-width: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(0.36s + var(--i, 0) * 0.11s);
}
.ve-hk:nth-child(2) { background: linear-gradient(160deg, #25272D, #101114); }
.ve-hk:nth-child(3) { background: linear-gradient(160deg, #212328, #0F1013); }
.ve-hk:nth-child(4) { background: linear-gradient(160deg, #1D1F24, #0E0F12); }
.ve-hk.is-cta { border-style: dashed; border-color: rgba(255,255,255,0.32); }
.ve-hk { position: relative; overflow: hidden; }
.ve-hk > .ve-shot { z-index: 0; }
.ve-hk-id, .ve-hk-cap { position: relative; z-index: 1; }
/* Real frames of the ad (assets/video/hk-*.jpg): a top shade keeps the H-label readable. */
img.ve-shot { object-fit: cover; }
.ve-hk::after { content: ""; position: absolute; inset: 0 0 auto; height: 34%; z-index: 0; pointer-events: none; background: linear-gradient(rgba(8,9,11,0.55), transparent); }
.ve-hk.is-cta img.ve-shot { filter: brightness(0.5) saturate(0.85); }
.ve-hk-offer {
  position: absolute; left: 0; right: 0; top: 30%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.ve-hk-offer b { font-size: clamp(16px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.ve-hk-offer i { font-style: normal; font-size: clamp(9px, 0.9vw, 12px); font-weight: 600; letter-spacing: 0.12em; margin-top: 3px; }
.ve-hk-offer em { font-style: normal; font-size: clamp(6px, 0.55vw, 8px); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 5px; }
.ve-hk-id { font-size: 9px; letter-spacing: 0.14em; color: var(--text-2); text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.ve-hk.is-cta .ve-hk-id { color: var(--text); }
.ve-hk-cap {
  font-size: 10px; line-height: 1.25; font-weight: 500;
  background: #FFFFFF; color: #08090B;
  border-radius: 3px; padding: 4px 4px; text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(1.26s + var(--i, 0) * 0.4s);
}
.hiw-step:is(.is-active, .is-played) .ve-hk,
.hiw-step:is(.is-active, .is-played) .ve-hk-cap { opacity: 1; transform: none; }
.ve-hk-foot {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
  opacity: 0; transition: opacity 0.45s var(--ease-out) 3.6s;
}
.hiw-step:is(.is-active, .is-played) .ve-hk-foot { opacity: 1; }

/* ---------- Reduced motion: finished static frames ---------- */
html.reduced .ve-frame, html.reduced .ve-blk, html.reduced .ve-pill, html.reduced .ve-pill::before { transition: none; }
html.reduced .ve-play { display: none; } /* the demo never plays, so no pause/play control */
html.reduced .hiw-form-row, html.reduced .hiw-form-cta, html.reduced .ve-up-row, html.reduced .ve-note,
html.reduced .ve-pop, html.reduced .ve-hk, html.reduced .ve-hk-cap, html.reduced .ve-hk-foot, html.reduced .ve-act,
html.reduced .art-pop, html.reduced .art-btn, html.reduced .wal-panel, html.reduced .wal-methods { opacity: 1; transform: none; transition: none; animation: none; }
html.reduced .wal-fill { transform: scaleX(0.88); transition: none; }
html.reduced .ve-btn, html.reduced .hiw-form-cta { transition: none; animation: none; }
html.reduced .ve-btn .ve-chk { opacity: 1; transition: none; }
html.reduced .ve-bar i { transform: scaleX(var(--w, 1)); transition: none; }
html.reduced .ve-grow { transform: none; transition: none; }
html.reduced .ve-pin { transform: scale(1); transition: none; }
html.reduced .ve-chk path { stroke-dashoffset: 0; transition: none; }
html.reduced .ve-mtl-ph { display: none; }
html.reduced .hiw-cta-idle, html.reduced .hiw-cta-loading { opacity: 0; animation: none; }
html.reduced .hiw-cta-sent, html.reduced .hiw-cta-sent-label { opacity: 1; transform: none; animation: none; }
html.reduced .hiw-cta-check-ring, html.reduced .hiw-cta-check-tick { stroke-dashoffset: 0; animation: none; }
html.reduced .hiw-caret { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ve-demo-stage { animation: none !important; }
  .ve-tile { transition: none; }
}

/* ============================================================
   Responsive — kept last so it wins.
   ============================================================ */
/* Desktop: the two-line H1 has no forced breaks. */
.br-m { display: none; }

@media (max-width: 1100px) {
  .ve-ed-grid { grid-template-columns: minmax(0, 1fr) 220px; }
  .ve-bin { display: none; }
}
/* Inspector stays on landscape screens (room beside the stage); portrait drops it. */
@media (max-width: 960px) and (max-aspect-ratio: 1/1), (max-width: 700px) {
  .ve-ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ve-insp { display: none; }
  .ve-export-m { display: block; margin-top: 2px; }
  .ve-export-m .ve-export { font-size: 13px; padding: 11px 18px; }
}
/* Partners: one row on phones + tablets (as /ad-accounts). */
@media (max-width: 960px) {
  .partners-row { flex-wrap: nowrap; gap: clamp(8px, 2vw, 28px); }
  .partners-row .partner-logo { flex: 1 1 0; min-width: 0; height: clamp(30px, 4.4vw, 48px); }
  .partners-row .partner-logo img { max-width: 100%; max-height: 100%; }
  .partners-row .partner-logo.text-only { font-size: clamp(13px, 3.6vw, 26px); white-space: nowrap; }
}
/* Art is scaled as a unit on mobile (transform:scale) — no filters under it. */
@media (max-width: 760px) {
  .ve-fold .hero-actions .btn-lg { min-height: 44px; }
}
@media (max-width: 600px) {
  /* Phone H1: phrase-level breaks ("Cut, Caption," / "Scale." / "Creatives That" / "Convert."),
     one fluid size — widest line is ~6.7em. */
  .br-m { display: inline; }
  .ve-fold h1.hero-title { font-size: min(56px, calc((100vw - 48px) / 5.86)); } /* /ad-accounts' 56px; widest phrase "Cut, Caption," ≈5.81em (caret takes no net width) */
  .ve-fold .hero-title .ln { white-space: nowrap; }
  /* CTAs side by side like /ad-accounts while they fit; stacked below 380px. */
  .ve-fold .hero-actions { gap: 12px; flex-wrap: wrap; margin-top: clamp(32px, 6vh, 56px); }
  .ve-fold .hero-actions .btn-lg { justify-content: center; padding: 15px 22px; font-size: 15px; min-height: 52px; }
  .ve-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ve-tile { border-radius: 16px; padding: 10px; }
  .ve-view { padding: 20px 14px 14px; }
  .ve-tl { --tl-pad: 14px; --tl-lab: 26px; --tl-gap: 8px; --lane-h: 22px; padding-top: 14px; padding-bottom: 16px; gap: 7px; }
  .ve-ver { display: none; }
  .ve-frame-lab { font-size: 9px; }
  .ve-cb i { display: none; }
}
@media (max-width: 420px) {
  .ve-ruler span:nth-child(even) { display: none; }
}
@media (max-width: 380px) {
  .ve-fold .hero-actions .btn-lg { padding: 15px 24px; font-size: 15px; }
}
@media (max-height: 600px) {
  .ve-fold { padding-top: 84px; padding-bottom: 20px; }
  .ve-eyebrow { margin-bottom: 12px; }
  .ve-fold .hero-actions { margin-top: 24px; gap: 12px; }
  .ve-fold .hero-actions .btn-lg { padding: 12px 22px; font-size: 15px; }
  .ve-view { padding-top: 16px; padding-bottom: 10px; gap: 8px; }
  .ve-tl { --lane-h: 18px; gap: 6px; padding-top: 12px; padding-bottom: 14px; }
}
/* Landscape phones: clear the floating nav, keep CTAs inside the fold. */
@media (max-height: 520px) {
  .ve-fold { padding-top: 100px; padding-bottom: 12px; }
  .ve-eyebrow { margin-bottom: 8px; }
  .ve-fold .hero-actions { margin-top: 20px; }
}
/* Short phones (e.g. 375×553 in-app browsers): CTAs stay above the fold. */
@media (max-width: 600px) and (max-height: 700px) {
  .ve-fold { padding-top: 88px; padding-bottom: 24px; }
  .ve-eyebrow { margin-bottom: 14px; }
  .ve-fold .hero-actions { margin-top: 28px; gap: 10px; }
  .ve-fold .hero-actions .btn-lg { padding-top: 14px; padding-bottom: 14px; }
}

/* Narrow reel tiles (2×2 on phones, 4 across on small landscape): keep the
   niche label clear of the play button and at most 2 lines. */
.ve-niche { flex: 1 1 auto; }
@container (max-width: 170px) {
  .ve-playic { width: 30px; height: 30px; }
  .ve-niche { font-size: 9px; letter-spacing: 0.08em; }
  .ve-tile-top .tag { padding: 4px 8px; letter-spacing: 0.08em; }
  .ve-tcap { font-size: max(10px, 7cqw); }
  .ve-tcap b { padding: 0.1em 0.22em; }
}

@media (max-width: 380px) {
  .ve-fold .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
}

/* Mockup button: looks like the product, but is not a control (#16). */
.ve-export-m { pointer-events: none; cursor: default; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   PHONES (#6): every journey art is laid out at 360×320 (.hiw-art-phone, components.js)
   and scaled to the content width (≈0.97 at 390, ≈0.78 at 320). Inner area 304×264.
   Key text is ≥12px here so it renders ≥9px at 320 and ≥11px at 390; same story + timings.
   ============================================================ */
.ve-n-phone { display: none; }
@media (max-width: 600px) {
  .hiw-art-phone .art-lbl, .hiw-art-phone .ve-art-title { font-size: 11.5px; letter-spacing: 0.12em; }
  .hiw-art-phone .art-pop, .hiw-art-phone .ve-ready { font-size: 11px; letter-spacing: 0.12em; padding: 4px 10px; }
  /* 01 wallet */
  .hiw-art-phone .wal { gap: 14px; }
  .hiw-art-phone .wal-note { font-size: 12.5px; }
  .hiw-art-phone .wal-methods .tag { font-size: 11px; padding: 5px 11px; }
  .hiw-art-phone .art-btn { font-size: 14.5px; }
  /* 02 order */
  .hiw-art-phone .hiw-form-row { padding: 12px 0; }
  .hiw-art-phone .hiw-form-label { font-size: 11.5px; letter-spacing: 0.12em; }
  .hiw-art-phone .hiw-form-val { font-size: 14.5px; }
  .hiw-art-phone .hiw-form-cta, .hiw-art-phone .hiw-cta-sent-label { font-size: 14.5px; }
  /* 03 upload */
  .hiw-art-phone .ve-up-row { padding: 9px 0; gap: 7px; }
  .hiw-art-phone .ve-up-top { font-size: 14px; }
  .hiw-art-phone .ve-up-top .ve-dim { font-size: 12px; }
  .hiw-art-phone .ve-ph-drop { display: none; }
  /* 04 first edit + 05 review */
  .hiw-art-phone .ve-cut-ruler { font-size: 11.5px; }
  .hiw-art-phone .ve-sent { font-size: 14px; }
  .hiw-art-phone .ve-notes { gap: 6px; }
  .hiw-art-phone .ve-note { font-size: 13px; padding: 8px 10px; }
  .hiw-art-phone .ve-note-t { font-size: 11px; margin-right: 8px; }
  .hiw-art-phone .ve-act-l { font-size: 11px; }
  .hiw-art-phone .ve-btn { font-size: 14px; min-height: 38px; }
  /* 06 hooks: four bigger tiles (H1–H3 + the new CTA) instead of five small ones */
  .hiw-art-phone .ve-hk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .hiw-art-phone .ve-hk:nth-child(4) { display: none; }
  .hiw-art-phone .ve-hk-id { font-size: 11px; }
  .hiw-art-phone .ve-hk-cap { font-size: 12px; padding: 4px 5px; }
  .hiw-art-phone .ve-hk-offer { top: 21%; } /* clears the two-line "Shop now" */
  .hiw-art-phone .ve-hk-foot { font-size: 11px; letter-spacing: 0.12em; }
  .hiw-art-phone .ve-n-desk { display: none; }
  .hiw-art-phone .ve-n-phone { display: inline; }
}

/* ============================================================
   REDUCED MOTION (#25): zero animations / transitions on this page. Every art shows its
   final state (the .is-active/.is-played end values, with nothing in between); no cursor.
   ============================================================ */
html.reduced .hiw-step .hiw-art *, html.reduced .hiw-step .hiw-art *::before, html.reduced .hiw-step .hiw-art *::after,
html.reduced #veEditor *, html.reduced #veEditor *::before, html.reduced #veEditor *::after {
  animation: none !important; transition: none !important;
}
html.reduced .hiw-step .hiw-cta-idle, html.reduced .hiw-step .hiw-cta-loading { opacity: 0; }
html.reduced .hiw-step .hiw-cta-sent, html.reduced .hiw-step .hiw-cta-sent-label { opacity: 1; transform: none; }
html.reduced .hiw-step .hiw-cta-check-ring, html.reduced .hiw-step .hiw-cta-check-tick { stroke-dashoffset: 0; }
html.reduced .hiw-step .hiw-cta-check-wrap::after { opacity: 0; }
/* Page-level guards for shared pieces that live in this page's markup (reported to lead):
   the signature preloader is skipped and the H1 underline is simply drawn. */
html.reduced #preloader { display: none; }
html.reduced h1.hero-title .em-underline::after { animation: none !important; transform: scaleX(1); }