/* ============================================================
   WatchFlow marketing — animated app-screen mockups (bundle)
   Generated from per-screen files in /marketing/mockups/.
   Each screen scoped under .wf-mock-<screen>; safe to concat.
   ============================================================ */

/* ===================== dashboard ===================== */
/* WatchFlow marketing mockup — Dashboard screen
   All selectors scoped under .wf-mock-dashboard. Keyframes prefixed wfm-dash-.
   Sizing in container units so it scales inside a portrait phone frame. */

/* ---- Animated count-up registers (rendered via counter()) ---- */
@property --wfm-dash-rev-k { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --wfm-dash-rev-l { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --wfm-dash-inv-a { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --wfm-dash-inv-b { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --wfm-dash-deals { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --wfm-dash-sold  { syntax: "<integer>"; initial-value: 0; inherits: false; }

.wf-mock-dashboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  box-sizing: border-box;
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(125,151,179,0.18), transparent 60%),
    linear-gradient(180deg, #0f141b 0%, #0a0e13 100%);
  color: #fff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.wf-mock-dashboard *,
.wf-mock-dashboard *::before,
.wf-mock-dashboard *::after { box-sizing: border-box; }

/* ---- Status bar ---- */
.wf-mock-dashboard .wfm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqh 5.5cqw 0.6cqh;
  font-size: 3.1cqw;
  font-weight: 600;
  color: #e0e0e0;
  letter-spacing: 0.02em;
}
.wf-mock-dashboard .wfm-status-right {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.wf-mock-dashboard .wfm-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6cqw;
  height: 3cqw;
}
.wf-mock-dashboard .wfm-bars i {
  width: 0.9cqw;
  background: #e0e0e0;
  border-radius: 999px;
}
.wf-mock-dashboard .wfm-bars i:nth-child(1) { height: 35%; }
.wf-mock-dashboard .wfm-bars i:nth-child(2) { height: 55%; }
.wf-mock-dashboard .wfm-bars i:nth-child(3) { height: 78%; }
.wf-mock-dashboard .wfm-bars i:nth-child(4) { height: 100%; }
.wf-mock-dashboard .wfm-batt {
  width: 6cqw;
  height: 3cqw;
  border: 1px solid rgba(224,224,224,0.7);
  border-radius: 1px;
  position: relative;
  padding: 0.4cqw;
}
.wf-mock-dashboard .wfm-batt::after {
  content: "";
  position: absolute;
  right: -1.1cqw;
  top: 30%;
  height: 40%;
  width: 0.7cqw;
  background: rgba(224,224,224,0.7);
  border-radius: 0 1px 1px 0;
}
.wf-mock-dashboard .wfm-batt i {
  display: block;
  height: 100%;
  width: 80%;
  background: #4caf50;
  border-radius: 1px;
}

/* ---- Header ---- */
.wf-mock-dashboard .wfm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4cqh 5.5cqw 1cqh;
}
.wf-mock-dashboard .wfm-header h1 {
  margin: 0;
  font-size: 6.4cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wf-mock-dashboard .wfm-header .wfm-sub {
  margin: 0.4cqh 0 0;
  font-size: 3cqw;
  color: #999;
  font-weight: 500;
}
.wf-mock-dashboard .wfm-avatar {
  width: 10.5cqw;
  height: 10.5cqw;
  border-radius: 999px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.8cqw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7d97b3, #42a5f5);
  border: 1px solid #2c3645;
  box-shadow: 0 0.4cqh 1.6cqw rgba(0,0,0,0.45);
}

/* ---- Scroll body ---- */
.wf-mock-dashboard .wfm-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 4cqw 3cqh;
  display: flex;
  flex-direction: column;
  gap: 2.4cqh;
}

/* ---- Card base ---- */
.wf-mock-dashboard .wfm-card {
  background: linear-gradient(180deg, #1f2733, #161c25);
  border: 1px solid #2c3645;
  border-radius: 14px;
  box-shadow: 0 0.8cqh 2.2cqw rgba(0,0,0,0.35);
}
.wf-mock-dashboard .wfm-card-title {
  font-size: 3.3cqw;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- KPI grid ---- */
.wf-mock-dashboard .wfm-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
}
.wf-mock-dashboard .wfm-kpi {
  padding: 1.9cqh 3.4cqw 2cqh;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.wf-mock-dashboard .wfm-kpi .wfm-kpi-label {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 2.9cqw;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.wf-mock-dashboard .wfm-kpi .wfm-dot {
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 999px;
  flex: 0 0 auto;
}
.wf-mock-dashboard .wfm-kpi .wfm-num {
  margin-top: 1cqh;
  font-size: 7.2cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.wf-mock-dashboard .wfm-kpi .wfm-delta {
  margin-top: 0.9cqh;
  font-size: 2.7cqw;
  font-weight: 600;
}
.wf-mock-dashboard .wfm-delta.up { color: #4caf50; }
.wf-mock-dashboard .wfm-delta.flat { color: #999; }

/* count-up renderers — final values declared so resting state is complete */
.wf-mock-dashboard .wfm-num-rev {
  --wfm-dash-rev-k: 142;
  --wfm-dash-rev-l: 800;
  counter-reset: revk var(--wfm-dash-rev-k) revl var(--wfm-dash-rev-l);
  animation: wfm-dash-count-rev 5.5s ease-out infinite;
}
.wf-mock-dashboard .wfm-num-rev::after {
  content: "$" counter(revk) "," counter(revl, decimal-leading-zero);
}
.wf-mock-dashboard .wfm-num-inv {
  --wfm-dash-inv-a: 1;
  --wfm-dash-inv-b: 24;
  counter-reset: inva var(--wfm-dash-inv-a) invb var(--wfm-dash-inv-b);
  animation: wfm-dash-count-inv 5.5s ease-out infinite;
}
.wf-mock-dashboard .wfm-num-inv::after {
  content: "$" counter(inva) "." counter(invb, decimal-leading-zero) "M";
}
.wf-mock-dashboard .wfm-num-deals {
  --wfm-dash-deals: 18;
  counter-reset: deals var(--wfm-dash-deals);
  animation: wfm-dash-count-deals 5.5s ease-out infinite;
}
.wf-mock-dashboard .wfm-num-deals::after { content: counter(deals); }
.wf-mock-dashboard .wfm-num-sold {
  --wfm-dash-sold: 7;
  counter-reset: sold var(--wfm-dash-sold);
  animation: wfm-dash-count-sold 5.5s ease-out infinite;
}
.wf-mock-dashboard .wfm-num-sold::after { content: counter(sold); }

@keyframes wfm-dash-count-rev {
  0%   { --wfm-dash-rev-k: 0;   --wfm-dash-rev-l: 0; }
  55%  { --wfm-dash-rev-k: 142; --wfm-dash-rev-l: 800; }
  100% { --wfm-dash-rev-k: 142; --wfm-dash-rev-l: 800; }
}
@keyframes wfm-dash-count-inv {
  0%   { --wfm-dash-inv-a: 0; --wfm-dash-inv-b: 0; }
  55%  { --wfm-dash-inv-a: 1; --wfm-dash-inv-b: 24; }
  100% { --wfm-dash-inv-a: 1; --wfm-dash-inv-b: 24; }
}
@keyframes wfm-dash-count-deals {
  0%   { --wfm-dash-deals: 0; }
  55%  { --wfm-dash-deals: 18; }
  100% { --wfm-dash-deals: 18; }
}
@keyframes wfm-dash-count-sold {
  0%   { --wfm-dash-sold: 0; }
  55%  { --wfm-dash-sold: 7; }
  100% { --wfm-dash-sold: 7; }
}

/* shimmer sweep on the revenue KPI card */
.wf-mock-dashboard .wfm-kpi.wfm-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(168,192,214,0.16), transparent);
  transform: skewX(-18deg);
  animation: wfm-dash-shimmer 5.5s ease-in-out infinite;
}
@keyframes wfm-dash-shimmer {
  0%, 20% { left: -150%; }
  55%     { left: 150%; }
  100%    { left: 150%; }
}

/* ---- Revenue chart card ---- */
.wf-mock-dashboard .wfm-chart-card { padding: 2cqh 4cqw 2.2cqh; }
.wf-mock-dashboard .wfm-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wf-mock-dashboard .wfm-chart-head .wfm-chart-val {
  font-size: 3.4cqw;
  font-weight: 700;
  color: #a8c0d6;
}
.wf-mock-dashboard .wfm-chart {
  margin-top: 1.8cqh;
  height: 13cqh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.2cqw;
  position: relative;
}
.wf-mock-dashboard .wfm-chart::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #2c3645;
}
.wf-mock-dashboard .wfm-chart .wfm-bar {
  flex: 1 1 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #a8c0d6, #42a5f5);
  transform-origin: bottom center;
  transform: scaleY(1);
  animation: wfm-dash-grow 5.5s ease-out infinite;
}
.wf-mock-dashboard .wfm-chart .wfm-bar.lo {
  background: linear-gradient(180deg, #3a4757, #28323f);
}
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(1) { height: 42%; animation-delay: 0.05s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(2) { height: 58%; animation-delay: 0.12s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(3) { height: 38%; animation-delay: 0.19s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(4) { height: 72%; animation-delay: 0.26s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(5) { height: 55%; animation-delay: 0.33s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(6) { height: 88%; animation-delay: 0.40s; }
.wf-mock-dashboard .wfm-chart .wfm-bar:nth-child(7) { height: 100%; animation-delay: 0.47s; }
@keyframes wfm-dash-grow {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
.wf-mock-dashboard .wfm-chart-axis {
  margin-top: 1cqh;
  display: flex;
  justify-content: space-between;
  font-size: 2.5cqw;
  color: #666;
  font-weight: 600;
}

/* ---- To-Do ---- */
.wf-mock-dashboard .wfm-todo-card { padding: 1.8cqh 4cqw 1.4cqh; }
.wf-mock-dashboard .wfm-todo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8cqh;
}
.wf-mock-dashboard .wfm-pill {
  font-size: 2.5cqw;
  font-weight: 700;
  color: #0a0e13;
  background: #ffb74d;
  border-radius: 999px;
  padding: 0.4cqh 2cqw;
}
.wf-mock-dashboard .wfm-todo {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 1.3cqh 0;
  border-top: 1px solid #1f2733;
}
.wf-mock-dashboard .wfm-todo:first-of-type { border-top: none; }
.wf-mock-dashboard .wfm-check {
  width: 4.6cqw;
  height: 4.6cqw;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid #3a4757;
}
.wf-mock-dashboard .wfm-check.done {
  background: #4caf50;
  border-color: #4caf50;
  position: relative;
}
.wf-mock-dashboard .wfm-check.done::after {
  content: "";
  position: absolute;
  left: 35%;
  top: 14%;
  width: 24%;
  height: 52%;
  border: solid #0a0e13;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.wf-mock-dashboard .wfm-todo .wfm-todo-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 3.4cqw;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-mock-dashboard .wfm-todo .wfm-todo-text small {
  display: block;
  font-size: 2.7cqw;
  font-weight: 500;
  color: #999;
  margin-top: 0.3cqh;
}
.wf-mock-dashboard .wfm-todo .wfm-todo-text.done {
  color: #666;
  text-decoration: line-through;
  text-decoration-color: #4a4a4a;
}
.wf-mock-dashboard .wfm-todo .wfm-flag {
  flex: 0 0 auto;
  width: 1.8cqw;
  height: 4.6cqw;
  border-radius: 999px;
}
.wf-mock-dashboard .wfm-todo .wfm-flag.red { background: #ef5350; }
.wf-mock-dashboard .wfm-todo .wfm-flag.amber { background: #ffb74d; }
.wf-mock-dashboard .wfm-todo .wfm-flag.blue { background: #42a5f5; }

/* fresh to-do fades in, loops with a hold */
.wf-mock-dashboard .wfm-todo.fresh {
  opacity: 1;
  animation: wfm-dash-fresh 5.5s ease-in-out infinite;
}
@keyframes wfm-dash-fresh {
  0%, 12%   { opacity: 0; transform: translateY(1.4cqh); }
  26%, 100% { opacity: 1; transform: translateY(0); }
}

/* ---- Contacts ---- */
.wf-mock-dashboard .wfm-contacts-card { padding: 1.8cqh 4cqw 2cqh; }
.wf-mock-dashboard .wfm-contacts {
  margin-top: 1.2cqh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wf-mock-dashboard .wfm-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7cqh;
  flex: 1 1 0;
}
.wf-mock-dashboard .wfm-contact .wfm-ava {
  width: 12cqw;
  height: 12cqw;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4cqw;
  font-weight: 700;
  color: #fff;
  border: 1px solid #2c3645;
}
.wf-mock-dashboard .wfm-contact:nth-child(1) .wfm-ava { background: linear-gradient(135deg,#7d97b3,#42a5f5); }
.wf-mock-dashboard .wfm-contact:nth-child(2) .wfm-ava { background: linear-gradient(135deg,#4caf50,#2f7d33); }
.wf-mock-dashboard .wfm-contact:nth-child(3) .wfm-ava { background: linear-gradient(135deg,#ffb74d,#c77f1d); }
.wf-mock-dashboard .wfm-contact:nth-child(4) .wfm-ava { background: linear-gradient(135deg,#ef5350,#a83432); }
.wf-mock-dashboard .wfm-contact:nth-child(5) .wfm-ava { background: linear-gradient(135deg,#a8c0d6,#6b7f95); }
.wf-mock-dashboard .wfm-contact .wfm-add {
  background: #161c25;
  border: 1.5px dashed #3a4757;
  color: #7d97b3;
  font-size: 5.5cqw;
  font-weight: 400;
  line-height: 0;
}
.wf-mock-dashboard .wfm-contact .wfm-name {
  font-size: 2.6cqw;
  color: #999;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .wf-mock-dashboard * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================== pipeline ===================== */
/* WatchFlow marketing mockup — Deals Pipeline (kanban)
   Fully scoped under .wf-mock-pipeline. Container-query sized. */

.wf-mock-pipeline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;

  /* palette */
  --void: #0a0e13;
  --base: #0f141b;
  --raised: #161c25;
  --panel: #1f2733;
  --hover: #28323f;
  --border: #1f2733;
  --border-light: #2c3645;
  --accent: #7d97b3;
  --accent-bright: #a8c0d6;
  --text: #fff;
  --off: #e0e0e0;
  --muted: #999;
  --green: #4caf50;
  --red: #ef5350;
  --amber: #ffb74d;
  --blue: #42a5f5;

  font-family: var(--font-body);
  background:
    radial-gradient(120cqw 60cqh at 80% -5%, rgba(125,151,179,.10), transparent 60%),
    linear-gradient(180deg, var(--base) 0%, var(--void) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.wf-mock-pipeline * { box-sizing: border-box; }

/* ---------- status strip ---------- */
.wf-mock-pipeline .wfm-status {
  position: relative;
  height: 5.6cqh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5cqw;
}
.wf-mock-pipeline .wfm-time {
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: .02em;
}
.wf-mock-pipeline .wfm-sys {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.wf-mock-pipeline .wfm-sys i {
  display: block;
  background: var(--off);
  border-radius: 1px;
}
.wf-mock-pipeline .wfm-sig { width: 4cqw; height: 2.6cqw; clip-path: polygon(0 100%,22% 100%,22% 55%,0 55%,0 100%,33% 100%,33% 40%,55% 40%,55% 100%,66% 100%,66% 22%,88% 22%,88% 100%,100% 100%,100% 0,77% 0,77% 100%); }
.wf-mock-pipeline .wfm-wifi { width: 3.4cqw; height: 2.6cqw; clip-path: polygon(50% 100%, 0 38%, 14% 24%, 50% 60%, 86% 24%, 100% 38%); }
.wf-mock-pipeline .wfm-batt {
  width: 6cqw; height: 2.9cqw; background: none;
  border: 1px solid var(--off); border-radius: 1.2px; position: relative; padding: .5px;
}
.wf-mock-pipeline .wfm-batt::before { content: ""; position: absolute; inset: .8px; width: 72%; background: var(--off); border-radius: .5px; }
.wf-mock-pipeline .wfm-batt::after { content: ""; position: absolute; right: -1.2cqw; top: 28%; height: 44%; width: 1cqw; background: var(--off); border-radius: 0 1px 1px 0; }

/* ---------- header ---------- */
.wf-mock-pipeline .wfm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.4cqh 5cqw 1.8cqh;
}
.wf-mock-pipeline .wfm-title {
  font-size: 7cqw;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.wf-mock-pipeline .wfm-sub {
  font-size: 3cqw;
  color: var(--muted);
  margin-top: .9cqh;
  letter-spacing: .01em;
}
.wf-mock-pipeline .wfm-new {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #0a0e13;
  font-size: 3.3cqw;
  font-weight: 650;
  padding: 1cqh 3.4cqw;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(125,151,179,.30);
}
.wf-mock-pipeline .wfm-new svg { width: 3.2cqw; height: 3.2cqw; display: block; }

/* ---------- board ---------- */
.wf-mock-pipeline .wfm-board {
  position: relative;
  height: 100%;
  padding-top: .4cqh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.wf-mock-pipeline .wfm-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 3cqw;
  padding: 0 3cqw;
  transform: translateX(-40cqw);
  height: 100%;
}

/* columns */
.wf-mock-pipeline .wfm-col {
  flex: 0 0 40cqw;
  width: 40cqw;
}
.wf-mock-pipeline .wfm-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1cqw 1.6cqh;
  height: 6.4cqh;
}
.wf-mock-pipeline .wfm-col-name {
  font-size: 3.4cqw;
  font-weight: 600;
  color: var(--off);
  letter-spacing: .01em;
}
.wf-mock-pipeline .wfm-badge {
  position: relative;
  min-width: 5.2cqw;
  height: 4.6cqw;
  padding: 0 1.4cqw;
  border-radius: 999px;
  font-size: 2.9cqw;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a0e13;
}
.wf-mock-pipeline .wfm-b-lead { background: rgba(66,165,245,.22); color: var(--blue); }
.wf-mock-pipeline .wfm-b-neg  { background: rgba(255,183,77,.22); color: var(--amber); }
.wf-mock-pipeline .wfm-b-agr  { background: rgba(168,192,214,.22); color: var(--accent-bright); }
.wf-mock-pipeline .wfm-b-clo  { background: rgba(76,175,80,.22); color: var(--green); }

/* crossfading counts */
.wf-mock-pipeline .wfm-count { position: relative; display: inline-grid; place-items: center; }
.wf-mock-pipeline .wfm-count span { grid-area: 1 / 1; }
.wf-mock-pipeline .wfm-num-from { animation: wfm-pipe-count-out 7s linear infinite; }
.wf-mock-pipeline .wfm-num-to   { opacity: 0; animation: wfm-pipe-count-in 7s linear infinite; }

.wf-mock-pipeline .wfm-col-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2cqh;
  padding: .4cqh 0 4cqh;
}

/* ---------- deal card ---------- */
.wf-mock-pipeline .wfm-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--raised));
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.7cqh 3cqw 1.7cqh 4.6cqw;
  height: 16cqh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 3px 8px rgba(0,0,0,.28);
}
.wf-mock-pipeline .wfm-stage {
  position: absolute;
  left: 0; top: 14%;
  width: 2.4cqw; height: 72%;
  border-radius: 999px;
}
.wf-mock-pipeline .wfm-s-lead { background: linear-gradient(180deg, var(--blue), #2b6fa8); }
.wf-mock-pipeline .wfm-s-neg  { background: linear-gradient(180deg, var(--amber), #c98a2e); }
.wf-mock-pipeline .wfm-s-agr  { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); }
.wf-mock-pipeline .wfm-s-clo  { background: linear-gradient(180deg, var(--green), #2f7a33); }

.wf-mock-pipeline .wfm-card-top { display: flex; align-items: center; gap: 2.6cqw; }

/* watch dial */
.wf-mock-pipeline .wfm-dial {
  position: relative;
  flex: 0 0 8.4cqw;
  width: 8.4cqw; height: 8.4cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #3a4654, #141a22 72%);
  border: .8cqw solid #20262f;
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.wf-mock-pipeline .wfm-dial::before,
.wf-mock-pipeline .wfm-dial::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--accent-bright);
  border-radius: 999px;
  transform-origin: 50% 100%;
}
.wf-mock-pipeline .wfm-dial::before { width: .7cqw; height: 3cqw; transform: translate(-50%, -100%) rotate(28deg); }
.wf-mock-pipeline .wfm-dial::after  { width: .55cqw; height: 3.7cqw; transform: translate(-50%, -100%) rotate(-115deg); background: var(--off); }

.wf-mock-pipeline .wfm-info { min-width: 0; }
.wf-mock-pipeline .wfm-brand {
  font-size: 3.3cqw;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-mock-pipeline .wfm-ref {
  font-size: 2.7cqw;
  color: var(--muted);
  margin-top: .5cqh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-mock-pipeline .wfm-card-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wf-mock-pipeline .wfm-price {
  font-size: 3.6cqw;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.wf-mock-pipeline .wfm-avatar {
  flex: 0 0 auto;
  width: 5.6cqw; height: 5.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.8cqw;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(140deg, #3b4a5c, #232c38);
  border: 1px solid var(--border-light);
}

/* ---------- traveling card ---------- */
.wf-mock-pipeline .wfm-travel {
  position: absolute;
  left: 48.6cqw;            /* Negotiation slot-3 inside translated track */
  top: 45cqh;
  width: 34cqw;
  z-index: 5;
  animation: wfm-pipe-travel 7s cubic-bezier(.55,.05,.25,1) infinite;
  will-change: transform, opacity;
}

/* ===================== keyframes ===================== */
@keyframes wfm-pipe-travel {
  0%, 8% {
    transform: translateX(0) scale(1);
    opacity: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 3px 8px rgba(0,0,0,.28);
  }
  16% {
    transform: translateX(.4cqw) translateY(-.6cqh) scale(1.035);
    opacity: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14cqw 26cqw rgba(0,0,0,.5);
  }
  52% {
    transform: translateX(43cqw) translateY(-.6cqh) scale(1.035);
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14cqw 26cqw rgba(0,0,0,.5);
  }
  62%, 82% {
    transform: translateX(43cqw) translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 3px 8px rgba(0,0,0,.28);
  }
  88% {
    transform: translateX(43cqw) translateY(0) scale(1);
    opacity: 0;
  }
  88.5% {
    transform: translateX(0) scale(1);
    opacity: 0;
  }
  96%, 100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes wfm-pipe-count-out {
  0%, 46% { opacity: 1; }
  52%, 84% { opacity: 0; }
  88%, 100% { opacity: 1; }
}
@keyframes wfm-pipe-count-in {
  0%, 46% { opacity: 0; }
  52%, 84% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  .wf-mock-pipeline * { animation: none !important; transition: none !important; }
  /* coherent resting state: deal rests in Negotiation, counts 3 / 2 */
  .wf-mock-pipeline .wfm-travel { transform: translateX(0) scale(1); opacity: 1; }
  .wf-mock-pipeline .wfm-num-from { opacity: 1; }
  .wf-mock-pipeline .wfm-num-to { opacity: 0; }
}

/* ===================== invoices ===================== */
.wf-mock-invoices{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;container-type:size;
  background:radial-gradient(120% 80% at 50% -10%, #161c25 0%, #0f141b 42%, #0a0e13 100%);
  font-family: var(--font-body);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}

/* ---------- status strip ---------- */
.wf-mock-invoices .wf-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:2.4cqh 6cqw 0.6cqh;
  font-size:3.2cqw;font-weight:600;color:#fff;letter-spacing:.02em;
}
.wf-mock-invoices .wf-status .wf-dots{display:flex;align-items:center;gap:1.1cqw;}
.wf-mock-invoices .wf-status .wf-dots i{
  width:1.5cqw;height:1.5cqw;border-radius:999px;background:#e0e0e0;display:block;
}
.wf-mock-invoices .wf-status .wf-dots .wf-bat{
  width:5.4cqw;height:2.6cqw;border:1px solid #e0e0e0;border-radius:1px;position:relative;margin-left:.6cqw;
}
.wf-mock-invoices .wf-status .wf-dots .wf-bat::after{
  content:"";position:absolute;left:.5px;top:.5px;bottom:.5px;width:72%;background:#e0e0e0;border-radius:1px;
}
.wf-mock-invoices .wf-status .wf-dots .wf-bat::before{
  content:"";position:absolute;right:-1.4px;top:30%;height:40%;width:1.2px;background:#e0e0e0;border-radius:1px;
}

/* ---------- header ---------- */
.wf-mock-invoices .wf-head{
  padding:1.2cqh 6cqw 1.6cqh;
}
.wf-mock-invoices .wf-titlerow{
  display:flex;align-items:center;justify-content:space-between;
}
.wf-mock-invoices .wf-title{
  font-size:7cqw;font-weight:700;letter-spacing:-.02em;color:#fff;
}
.wf-mock-invoices .wf-add{
  width:9cqw;height:9cqw;border-radius:14px;
  background:linear-gradient(160deg,#28323f,#1f2733);
  border:1px solid #28323f;
  display:flex;align-items:center;justify-content:center;color:#a8c0d6;
  box-shadow:0 1cqh 2cqh rgba(0,0,0,.35);
}
.wf-mock-invoices .wf-add svg{width:4.4cqw;height:4.4cqw;}

/* ---------- segment ---------- */
.wf-mock-invoices .wf-seg{
  margin-top:1.6cqh;
  display:flex;gap:0;background:#161c25;border:1px solid #1f2733;
  border-radius:999px;padding:.7cqw;
}
.wf-mock-invoices .wf-seg button,
.wf-mock-invoices .wf-seg span{
  flex:1;text-align:center;font-size:3.2cqw;font-weight:600;
  color:#999;padding:1cqh 0;border-radius:999px;letter-spacing:.01em;
  border:0;background:transparent;
}
.wf-mock-invoices .wf-seg .wf-on{
  background:linear-gradient(160deg,#28323f,#1f2733);color:#fff;
  box-shadow:0 .4cqh 1.2cqh rgba(0,0,0,.35);
}

/* ---------- summary band ---------- */
.wf-mock-invoices .wf-summary{
  margin:0 6cqw;
  display:flex;gap:3cqw;
}
.wf-mock-invoices .wf-card{
  flex:1;background:linear-gradient(160deg,#1f2733,#161c25);
  border:1px solid #1f2733;border-radius:14px;
  padding:1.8cqh 4cqw;
}
.wf-mock-invoices .wf-card .wf-lab{
  font-size:2.9cqw;color:#999;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;
}
.wf-mock-invoices .wf-card .wf-val{
  margin-top:.7cqh;font-size:6cqw;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.wf-mock-invoices .wf-card.wf-out .wf-val{color:#ffb74d;}
.wf-mock-invoices .wf-card.wf-paid .wf-val{color:#4caf50;}
.wf-mock-invoices .wf-card .wf-sub{
  margin-top:.4cqh;font-size:2.7cqw;color:#999;
}
.wf-mock-invoices .wf-out .wf-val{
  display:inline-block;animation:wfm-inv-nudge 6s ease-in-out infinite;
}

/* ---------- list ---------- */
.wf-mock-invoices .wf-listwrap{
  flex:1;overflow:hidden;margin-top:1.8cqh;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%);
}
.wf-mock-invoices .wf-list{
  display:flex;flex-direction:column;gap:1.2cqh;padding:0 6cqw 3cqh;
}
.wf-mock-invoices .wf-row{
  display:flex;align-items:center;gap:3.4cqw;
  background:linear-gradient(160deg,#161c25,#12171f);
  border:1px solid #1f2733;border-radius:14px;
  padding:1.7cqh 4cqw;
  opacity:0;transform:translateY(2.2cqh);
  animation:wfm-inv-rowin .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.wf-mock-invoices .wf-row:nth-child(1){animation-delay:.15s;}
.wf-mock-invoices .wf-row:nth-child(2){animation-delay:.30s;}
.wf-mock-invoices .wf-row:nth-child(3){animation-delay:.45s;}
.wf-mock-invoices .wf-row:nth-child(4){animation-delay:.60s;}
.wf-mock-invoices .wf-row:nth-child(5){animation-delay:.75s;}
.wf-mock-invoices .wf-row:nth-child(6){animation-delay:.90s;}
.wf-mock-invoices .wf-row:nth-child(7){animation-delay:1.05s;}

.wf-mock-invoices .wf-ava{
  flex:none;width:9.4cqw;height:9.4cqw;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:3.4cqw;font-weight:700;color:#a8c0d6;
  background:linear-gradient(160deg,#28323f,#1f2733);
  border:1px solid #28323f;letter-spacing:.01em;
}
.wf-mock-invoices .wf-mid{flex:1;min-width:0;}
.wf-mock-invoices .wf-cli{
  font-size:3.9cqw;font-weight:700;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wf-mock-invoices .wf-watch{
  margin-top:.3cqh;font-size:3cqw;color:#999;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wf-mock-invoices .wf-inv{
  margin-top:.45cqh;font-size:2.6cqw;color:#7d97b3;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.wf-mock-invoices .wf-right{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.9cqh;
}
.wf-mock-invoices .wf-amt{
  font-size:4cqw;font-weight:700;color:#fff;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.wf-mock-invoices .wf-pill{
  display:inline-flex;align-items:center;gap:1.2cqw;
  font-size:2.7cqw;font-weight:700;letter-spacing:.02em;
  padding:.6cqh 2.4cqw;border-radius:999px;line-height:1;
}
.wf-mock-invoices .wf-pill i{width:1.6cqw;height:1.6cqw;border-radius:999px;display:block;}
.wf-mock-invoices .wf-pill.wf-paid{color:#4caf50;background:rgba(76,175,80,.13);border:1px solid rgba(76,175,80,.3);}
.wf-mock-invoices .wf-pill.wf-paid i{background:#4caf50;}
.wf-mock-invoices .wf-pill.wf-pend{color:#ffb74d;background:rgba(255,183,77,.13);border:1px solid rgba(255,183,77,.3);}
.wf-mock-invoices .wf-pill.wf-pend i{background:#ffb74d;}
.wf-mock-invoices .wf-pill.wf-over{color:#ef5350;background:rgba(239,83,80,.13);border:1px solid rgba(239,83,80,.3);}
.wf-mock-invoices .wf-pill.wf-over i{background:#ef5350;}

/* flipping pill: pending -> paid */
.wf-mock-invoices .wf-flip{
  animation:wfm-inv-flip 6s ease-in-out infinite;
}
.wf-mock-invoices .wf-flip i{animation:wfm-inv-flipdot 6s ease-in-out infinite;}
.wf-mock-invoices .wf-flip .wf-tp{animation:wfm-inv-tpend 6s steps(1,end) infinite;}
.wf-mock-invoices .wf-flip .wf-tpd{animation:wfm-inv-tpaid 6s steps(1,end) infinite;}
.wf-mock-invoices .wf-flip .wf-tpd{display:none;}

/* ---------- animations ---------- */
@keyframes wfm-inv-rowin{
  from{opacity:0;transform:translateY(2.2cqh);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes wfm-inv-nudge{
  0%,88%,100%{transform:translateY(0);}
  92%{transform:translateY(-.7cqh);}
  96%{transform:translateY(.2cqh);}
}
@keyframes wfm-inv-flip{
  0%,45%{color:#ffb74d;background:rgba(255,183,77,.13);border-color:rgba(255,183,77,.3);}
  50%{transform:scale(1.08);}
  55%,100%{color:#4caf50;background:rgba(76,175,80,.16);border-color:rgba(76,175,80,.34);transform:scale(1);}
}
@keyframes wfm-inv-flipdot{
  0%,45%{background:#ffb74d;box-shadow:0 0 0 0 rgba(255,183,77,0);}
  52%{box-shadow:0 0 0 1.4cqw rgba(76,175,80,.35);}
  55%,100%{background:#4caf50;box-shadow:0 0 0 0 rgba(76,175,80,0);}
}
@keyframes wfm-inv-tpend{0%,49.9%{display:inline;}50%,100%{display:none;}}
@keyframes wfm-inv-tpaid{0%,49.9%{display:none;}50%,100%{display:inline;}}

/* ---------- reduced motion: full resting state ---------- */
@media (prefers-reduced-motion: reduce){
  .wf-mock-invoices *{animation:none!important;transition:none!important;}
  .wf-mock-invoices .wf-row{opacity:1;transform:none;}
  .wf-mock-invoices .wf-out .wf-val{transform:none;}
  .wf-mock-invoices .wf-flip{color:#4caf50;background:rgba(76,175,80,.16);border-color:rgba(76,175,80,.34);transform:none;}
  .wf-mock-invoices .wf-flip i{background:#4caf50;box-shadow:none;}
  .wf-mock-invoices .wf-flip .wf-tp{display:none;}
  .wf-mock-invoices .wf-flip .wf-tpd{display:inline;}
}

/* ===================== inventory ===================== */
/* WatchFlow marketing mockup — The Collection / Inventory */
/* All selectors scoped under .wf-mock-inventory. Keyframes prefixed wfm-inv-grid- */

.wf-mock-inventory{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;container-type:size;
}

.wf-mock-inventory *,
.wf-mock-inventory *::before,
.wf-mock-inventory *::after{
  margin:0;padding:0;box-sizing:border-box;
}

.wf-mock-inventory{
  --void:#0a0e13;--base:#0f141b;--raised:#161c25;--panel:#1f2733;
  --hover:#28323f;--border:#1f2733;--accent:#7d97b3;--accent-bright:#a8c0d6;
  --text:#fff;--off:#e0e0e0;--muted:#999;--green:#4caf50;--amber:#ffb74d;
  font-family: var(--font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, #11171f 0%, var(--void) 60%),
    var(--void);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
}

/* ---------------- screen scaffold ---------------- */
.wfm-inv-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:0 4.6cqw;
}

/* status strip */
.wfm-inv-status{
  flex:0 0 auto;
  height:7cqh;min-height:6.2cqh;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1cqw;
  font-size:3.4cqw;font-weight:600;color:var(--off);
}
.wfm-inv-status .wfm-inv-dots{display:flex;align-items:center;gap:1.3cqw;}
.wfm-inv-status .wfm-inv-dots i{
  display:block;width:1.5cqw;height:1.5cqw;border-radius:999px;background:var(--off);opacity:.85;
}
.wfm-inv-status .wfm-inv-bat{
  width:6.4cqw;height:3cqw;border:0.18cqh solid var(--off);border-radius:1.2cqw;
  position:relative;opacity:.85;
}
.wfm-inv-status .wfm-inv-bat::before{
  content:"";position:absolute;inset:0.45cqw;width:62%;background:var(--off);border-radius:.4cqw;
}
.wfm-inv-status .wfm-inv-bat::after{
  content:"";position:absolute;right:-0.9cqw;top:30%;height:40%;width:.7cqw;
  background:var(--off);border-radius:0 .6cqw .6cqw 0;
}

/* header */
.wfm-inv-header{flex:0 0 auto;padding:1cqh 1cqw 1.6cqh;}
.wfm-inv-titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:3cqw;}
.wfm-inv-title{
  font-size:7.4cqw;font-weight:700;letter-spacing:.2px;line-height:1;
  background:linear-gradient(180deg,#fff 0%,#cfd9e3 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wfm-inv-count{
  font-size:3.3cqw;font-weight:600;color:var(--accent);
  padding:.7cqh 2.6cqw;border-radius:999px;
  background:rgba(125,151,179,.12);border:1px solid rgba(125,151,179,.22);
  white-space:nowrap;
}

/* search bar */
.wfm-inv-search{
  flex:0 0 auto;
  display:flex;align-items:center;gap:2.4cqw;
  height:6cqh;min-height:5.4cqh;
  padding:0 3.4cqw;
  background:linear-gradient(180deg,var(--raised),var(--base));
  border:1px solid var(--border);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.wfm-inv-search .wfm-inv-sicon{flex:0 0 auto;width:4.4cqw;height:4.4cqw;color:var(--muted);display:block;}
.wfm-inv-search .wfm-inv-sicon svg{width:100%;height:100%;display:block;}
.wfm-inv-search .wfm-inv-stext{font-size:3.7cqw;color:var(--muted);font-weight:400;}
.wfm-inv-cursor{
  width:.5cqw;height:4.2cqw;background:var(--accent-bright);border-radius:1px;
  margin-left:-1.4cqw;
  animation:wfm-inv-grid-blink 1.1s steps(1) infinite;
}

/* filter chips */
.wfm-inv-chips{
  flex:0 0 auto;display:flex;gap:2cqw;padding:1.7cqh 1cqw 1.4cqh;
}
.wfm-inv-chip{
  font-size:3.2cqw;font-weight:600;color:var(--muted);
  padding:.85cqh 3.4cqw;border-radius:999px;
  background:var(--raised);border:1px solid var(--border);white-space:nowrap;
}
.wfm-inv-chip.is-active{
  color:#0a0e13;font-weight:700;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  border-color:transparent;
  box-shadow:0 2px 10px rgba(125,151,179,.3);
}

/* ---------------- grid ---------------- */
.wfm-inv-grid{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:3cqw;
  padding:.4cqh 1cqw 2.5cqh;
  align-content:start;
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 92%,transparent 100%);
}

.wfm-inv-card{
  position:relative;
  display:flex;flex-direction:column;gap:1.6cqh;
  padding:3cqw 3cqw 3.4cqw;
  background:linear-gradient(180deg,var(--raised),var(--base));
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 4cqw 7cqw rgba(0,0,0,.35);
  opacity:0;
  animation:wfm-inv-grid-rise 13s ease-in-out infinite, wfm-inv-grid-sweep 13s ease-in-out infinite;
}
.wfm-inv-card:nth-child(1){animation-delay:0s,.0s;}
.wfm-inv-card:nth-child(2){animation-delay:.22s,2.1s;}
.wfm-inv-card:nth-child(3){animation-delay:.44s,4.2s;}
.wfm-inv-card:nth-child(4){animation-delay:.66s,6.3s;}
.wfm-inv-card:nth-child(5){animation-delay:.88s,8.4s;}
.wfm-inv-card:nth-child(6){animation-delay:1.1s,10.5s;}

/* card sweep highlight overlay */
.wfm-inv-card::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 1px transparent inset;
}

/* ---------------- watch thumbnail ---------------- */
.wfm-inv-thumb{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:999px;
  /* outer steel case */
  background:
    conic-gradient(from 35deg,#3a4350,#aab6c4,#5a6573,#cdd6e0,#454e5c,#9aa6b4,#3a4350);
  box-shadow:
    0 .5cqw 2cqw rgba(0,0,0,.5),
    inset 0 0 1.2cqw rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
}
.wfm-inv-bezel{
  position:absolute;inset:7%;border-radius:999px;
  background:
    conic-gradient(from 200deg,#2b333d,#8c98a6,#3a434f,#b6c1cd,#323b46,#7e8a98,#2b333d);
  box-shadow:inset 0 0 1cqw rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
.wfm-inv-face{
  position:absolute;inset:15%;border-radius:999px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 50%, var(--dial-2,#171b20), var(--dial,#0c0f13) 78%);
  box-shadow:inset 0 0 1cqw rgba(0,0,0,.7);
  overflow:hidden;
}
/* hour markers as a ring of ticks */
.wfm-inv-face::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:repeating-conic-gradient(from -8deg,
    var(--mark,#cdd3da) 0deg 4deg, transparent 4deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 70%, #000 71%, #000 84%, transparent 86%);
  mask:radial-gradient(circle, transparent 70%, #000 71%, #000 84%, transparent 86%);
  opacity:.92;
}
/* center cap */
.wfm-inv-face::after{
  content:"";position:absolute;top:50%;left:50%;width:9%;height:9%;
  transform:translate(-50%,-50%);border-radius:999px;
  background:radial-gradient(circle,#e6ebf1,#8b95a2);z-index:5;
}

.wfm-inv-hand{
  position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;
  border-radius:999px;z-index:4;
}
.wfm-inv-hand-h{
  width:2.4%;height:26%;margin-left:-1.2%;
  background:linear-gradient(180deg,var(--hand,#eef2f6),#9aa4b0);
  animation:wfm-inv-grid-spin 240s linear infinite;
}
.wfm-inv-hand-m{
  width:1.8%;height:37%;margin-left:-0.9%;
  background:linear-gradient(180deg,var(--hand,#eef2f6),#aab4c0);
  animation:wfm-inv-grid-spin 60s linear infinite;
}
.wfm-inv-hand-s{
  width:0.9%;height:40%;margin-left:-0.45%;
  background:var(--second,#e06a4f);
  animation:wfm-inv-grid-spin 12s linear infinite;
}
.wfm-inv-date{
  position:absolute;top:50%;right:11%;transform:translateY(-50%);
  font-size:2.4cqw;font-weight:700;color:#16191d;line-height:1;
  background:#e9edf1;padding:.3cqw .7cqw;border-radius:1px;
  box-shadow:inset 0 0 0 .15cqw rgba(0,0,0,.35);z-index:3;
}

/* per-dial color variants */
.wfm-inv-dial-black{--dial:#080a0d;--dial-2:#171c22;--mark:#dfe5ec;--hand:#eef2f6;--second:#e0563a;}
.wfm-inv-dial-blue {--dial:#0b2342;--dial-2:#1d4f86;--mark:#dbe6f3;--hand:#eef4fb;--second:#ffb74d;}
.wfm-inv-dial-silver{--dial:#b7bec7;--dial-2:#e7ebef;--mark:#3a414b;--hand:#2b323b;--second:#1d6fd0;}
.wfm-inv-dial-white{--dial:#dfe3e8;--dial-2:#fbfcfd;--mark:#2a3038;--hand:#20262d;--second:#1a1f25;}
.wfm-inv-dial-green{--dial:#0c3320;--dial-2:#176b3c;--mark:#e2efe6;--hand:#f0f7f2;--second:#ffd24a;}

/* ---------------- card info ---------------- */
.wfm-inv-info{display:flex;flex-direction:column;gap:.5cqh;}
.wfm-inv-brand{
  font-size:3.5cqw;font-weight:700;color:var(--text);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wfm-inv-ref{
  font-size:2.9cqw;font-weight:500;color:var(--muted);letter-spacing:.4px;
}
.wfm-inv-meta{
  display:flex;align-items:center;justify-content:space-between;gap:1.6cqw;
  margin-top:.7cqh;
}
.wfm-inv-price{
  font-size:3.5cqw;font-weight:700;color:var(--accent-bright);white-space:nowrap;
}
.wfm-inv-cond{
  font-size:2.5cqw;font-weight:700;letter-spacing:.3px;white-space:nowrap;
  padding:.45cqh 1.8cqw;border-radius:999px;
  color:var(--green);background:rgba(76,175,80,.13);border:1px solid rgba(76,175,80,.3);
}
.wfm-inv-cond.is-mint{color:var(--accent-bright);background:rgba(168,192,214,.13);border-color:rgba(168,192,214,.32);}
.wfm-inv-cond.is-bp{color:var(--amber);background:rgba(255,183,77,.12);border-color:rgba(255,183,77,.3);}

/* ---------------- keyframes ---------------- */
@keyframes wfm-inv-grid-rise{
  0%   {opacity:0;transform:translateY(3cqh) scale(.97);}
  9%   {opacity:1;transform:translateY(0) scale(1);}
  90%  {opacity:1;transform:translateY(0) scale(1);}
  100% {opacity:0;transform:translateY(1.4cqh) scale(.985);}
}
@keyframes wfm-inv-grid-sweep{
  0%,12%   {box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 4cqw 7cqw rgba(0,0,0,.35);}
  4%       {box-shadow:0 0 0 1px rgba(168,192,214,.55) inset, 0 0 5cqw rgba(125,151,179,.35), 0 5cqw 8cqw rgba(0,0,0,.45);transform:translateY(-0.7cqh) scale(1.012);}
  100%     {box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 4cqw 7cqw rgba(0,0,0,.35);}
}
@keyframes wfm-inv-grid-spin{
  from{transform:rotate(0deg);} to{transform:rotate(360deg);}
}
@keyframes wfm-inv-grid-blink{
  0%,50%{opacity:1;} 51%,100%{opacity:0;}
}

/* ---------------- reduced motion: complete resting state ---------------- */
@media (prefers-reduced-motion: reduce){
  .wf-mock-inventory *{animation:none!important;transition:none!important;}
  .wf-mock-inventory .wfm-inv-card{opacity:1;transform:none;}
  .wf-mock-inventory .wfm-inv-cursor{opacity:1;}
  .wf-mock-inventory .wfm-inv-hand-h{transform:rotate(300deg);}
  .wf-mock-inventory .wfm-inv-hand-m{transform:rotate(120deg);}
  .wf-mock-inventory .wfm-inv-hand-s{transform:rotate(195deg);}
}

/* ===================== reports ===================== */
/* WatchFlow — Reports mockup. All scoped under .wf-mock-reports */

.wf-mock-reports{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  container-type:size;
  background:#0a0e13;
  color:#fff;
  font-family: var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.wf-mock-reports *{box-sizing:border-box;}

.wf-mock-reports .wf-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:0 4.4cqw 3cqh;
  background:
    radial-gradient(120cqw 60cqh at 80% -10%, rgba(125,151,179,.10), transparent 60%),
    linear-gradient(#0a0e13,#0f141b 38%,#0a0e13);
  gap:2cqh;
  overflow:hidden;
}

/* ---------- status strip ---------- */
.wf-mock-reports .wf-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6cqh 1cqw .4cqh;
  font-size:3.1cqw;font-weight:600;color:#e0e0e0;letter-spacing:.02em;
  flex:none;
}
.wf-mock-reports .wf-status .wf-dots{display:flex;gap:1.1cqw;align-items:center;}
.wf-mock-reports .wf-status .wf-dots i{
  width:2.4cqw;height:2.4cqw;border-radius:999px;background:#e0e0e0;display:block;
}
.wf-mock-reports .wf-status .wf-dots i:nth-child(4){
  width:7cqw;height:2.6cqw;border-radius:1.2cqw;border:1px solid #e0e0e0;background:transparent;position:relative;
}
.wf-mock-reports .wf-status .wf-dots i:nth-child(4)::after{
  content:"";position:absolute;inset:.6cqw;border-radius:.6cqw;background:#4caf50;right:1.8cqw;
}

/* ---------- header ---------- */
.wf-mock-reports .wf-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex:none;margin-top:.4cqh;
}
.wf-mock-reports .wf-head h1{
  margin:0;font-size:6.6cqw;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.wf-mock-reports .wf-head .wf-sub{
  display:block;margin-top:.9cqh;font-size:3cqw;color:#999;font-weight:500;
}
.wf-mock-reports .wf-period{
  display:inline-flex;align-items:center;gap:1.4cqw;
  padding:1cqh 3cqw;border-radius:999px;
  background:#161c25;border:1px solid #1f2733;
  font-size:3cqw;font-weight:600;color:#a8c0d6;white-space:nowrap;
}
.wf-mock-reports .wf-period .wf-caret{
  width:0;height:0;border-left:1.4cqw solid transparent;border-right:1.4cqw solid transparent;
  border-top:1.6cqw solid #7d97b3;display:inline-block;
}

/* ---------- headline cards ---------- */
.wf-mock-reports .wf-cards{display:flex;gap:3cqw;flex:none;}
.wf-mock-reports .wf-card{
  flex:1;border-radius:14px;padding:1.8cqh 3.4cqw;
  background:linear-gradient(160deg,#1f2733,#161c25);
  border:1px solid #1f2733;
  position:relative;overflow:hidden;
}
.wf-mock-reports .wf-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60cqw 30cqh at 100% 0%,rgba(125,151,179,.18),transparent 70%);
  pointer-events:none;
}
.wf-mock-reports .wf-card .wf-label{font-size:2.9cqw;color:#999;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.wf-mock-reports .wf-card .wf-big{
  display:flex;align-items:baseline;gap:.6cqw;margin-top:1cqh;
  font-size:7.4cqw;font-weight:800;letter-spacing:-.03em;line-height:1;
}
.wf-mock-reports .wf-card .wf-big .wf-pre{font-size:5cqw;color:#e0e0e0;font-weight:700;}
.wf-mock-reports .wf-card .wf-big .wf-suf{font-size:4.4cqw;color:#e0e0e0;font-weight:700;}
.wf-mock-reports .wf-card .wf-delta{
  display:inline-flex;align-items:center;gap:.8cqw;margin-top:1.2cqh;
  font-size:3cqw;font-weight:700;
  padding:.5cqh 2cqw;border-radius:999px;
}
.wf-mock-reports .wf-card .wf-delta.up{color:#4caf50;background:rgba(76,175,80,.14);}
.wf-mock-reports .wf-card .wf-delta .wf-tri{
  width:0;height:0;border-left:1.3cqw solid transparent;border-right:1.3cqw solid transparent;
  border-bottom:2cqw solid #4caf50;
}

/* counter machinery — split integer/decimal so display reads correctly */
@property --wf-ri{syntax:"<integer>";inherits:false;initial-value:0;}
@property --wf-rd{syntax:"<integer>";inherits:false;initial-value:0;}
@property --wf-mi{syntax:"<integer>";inherits:false;initial-value:0;}
@property --wf-md{syntax:"<integer>";inherits:false;initial-value:0;}

/* Revenue: $1.28M */
.wf-mock-reports .wf-ri{counter-reset:--wf-ri var(--wf-ri);animation:wfm-rep-ri 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards;}
.wf-mock-reports .wf-ri::after{content:counter(--wf-ri);}
@keyframes wfm-rep-ri{from{--wf-ri:0;}to{--wf-ri:1;}}
.wf-mock-reports .wf-rd{counter-reset:--wf-rd var(--wf-rd);animation:wfm-rep-rd 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards;}
.wf-mock-reports .wf-rd::after{content:counter(--wf-rd);}
@keyframes wfm-rep-rd{from{--wf-rd:0;}to{--wf-rd:28;}}

/* Margin: 31.4% */
.wf-mock-reports .wf-mi{counter-reset:--wf-mi var(--wf-mi);animation:wfm-rep-mi 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards;}
.wf-mock-reports .wf-mi::after{content:counter(--wf-mi);}
@keyframes wfm-rep-mi{from{--wf-mi:0;}to{--wf-mi:31;}}
.wf-mock-reports .wf-md{counter-reset:--wf-md var(--wf-md);animation:wfm-rep-md 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards;}
.wf-mock-reports .wf-md::after{content:counter(--wf-md);}
@keyframes wfm-rep-md{from{--wf-md:0;}to{--wf-md:4;}}

/* ---------- section title ---------- */
.wf-mock-reports .wf-sec{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.6cqh;flex:none;
}
.wf-mock-reports .wf-sec h2{margin:0;font-size:3.6cqw;font-weight:700;letter-spacing:-.01em;}
.wf-mock-reports .wf-sec .wf-tag{font-size:2.8cqw;color:#7d97b3;font-weight:600;}

/* ---------- bar chart ---------- */
.wf-mock-reports .wf-chart{
  flex:none;border-radius:14px;padding:2cqh 3.6cqw 1.4cqh;
  background:#0f141b;border:1px solid #1f2733;
  position:relative;
}
.wf-mock-reports .wf-grid{
  position:absolute;left:3.6cqw;right:3.6cqw;top:2cqh;bottom:4.6cqh;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
}
.wf-mock-reports .wf-grid span{height:1px;background:#1f2733;display:block;}
.wf-mock-reports .wf-bars{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  height:17cqh;gap:2.4cqw;
}
.wf-mock-reports .wf-bar{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;
}
.wf-mock-reports .wf-bar .wf-col{
  width:100%;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#a8c0d6,#7d97b3);
  height:var(--h);
  transform-origin:bottom;transform:scaleY(0);
  animation:wfm-rep-grow 1.1s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d);
  box-shadow:0 0 0 1px rgba(168,192,214,.12) inset;
}
.wf-mock-reports .wf-bar:last-child .wf-col{
  background:linear-gradient(180deg,#4caf50,#3a8f3e);
}
.wf-mock-reports .wf-bar .wf-m{
  margin-top:1.1cqh;font-size:2.7cqw;color:#999;font-weight:600;
}
@keyframes wfm-rep-grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ---------- by brand ---------- */
.wf-mock-reports .wf-brands{
  flex:none;border-radius:14px;padding:1.8cqh 3.6cqw .4cqh;
  background:#0f141b;border:1px solid #1f2733;
  display:flex;flex-direction:column;gap:1.5cqh;
}
.wf-mock-reports .wf-row{display:flex;flex-direction:column;gap:.8cqh;}
.wf-mock-reports .wf-row .wf-rh{
  display:flex;align-items:center;justify-content:space-between;
  font-size:3.1cqw;font-weight:600;
}
.wf-mock-reports .wf-row .wf-rh .wf-name{color:#e0e0e0;display:flex;align-items:center;gap:1.6cqw;}
.wf-mock-reports .wf-row .wf-rh .wf-name i{width:2.2cqw;height:2.2cqw;border-radius:999px;background:#7d97b3;display:block;}
.wf-mock-reports .wf-row .wf-rh .wf-val{color:#fff;font-weight:700;}
.wf-mock-reports .wf-row .wf-rh .wf-val small{color:#999;font-weight:600;font-size:2.6cqw;margin-left:1cqw;}
.wf-mock-reports .wf-track{
  height:1.7cqh;border-radius:999px;background:#161c25;overflow:hidden;
}
.wf-mock-reports .wf-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,#7d97b3,#a8c0d6);
  animation:wfm-rep-fill 1.3s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d);
}
.wf-mock-reports .wf-row:nth-child(1) .wf-name i{background:#a8c0d6;}
.wf-mock-reports .wf-row:nth-child(1) .wf-fill{background:linear-gradient(90deg,#7d97b3,#a8c0d6);}
.wf-mock-reports .wf-row:nth-child(2) .wf-name i{background:#42a5f5;}
.wf-mock-reports .wf-row:nth-child(2) .wf-fill{background:linear-gradient(90deg,#2f7fc4,#42a5f5);}
.wf-mock-reports .wf-row:nth-child(3) .wf-name i{background:#4caf50;}
.wf-mock-reports .wf-row:nth-child(3) .wf-fill{background:linear-gradient(90deg,#3a8f3e,#4caf50);}
.wf-mock-reports .wf-row:nth-child(4) .wf-name i{background:#ffb74d;}
.wf-mock-reports .wf-row:nth-child(4) .wf-fill{background:linear-gradient(90deg,#d99632,#ffb74d);}
.wf-mock-reports .wf-row:nth-child(5) .wf-name i{background:#999;}
.wf-mock-reports .wf-row:nth-child(5) .wf-fill{background:linear-gradient(90deg,#6b6b6b,#999);}
@keyframes wfm-rep-fill{from{width:0;}to{width:var(--w);}}

/* ---------- bottom split: donut + legend ---------- */
.wf-mock-reports .wf-split{display:flex;gap:3cqw;flex:none;align-items:stretch;}
.wf-mock-reports .wf-donut-card{
  flex:none;border-radius:14px;padding:1.8cqh 3.4cqw;
  background:#0f141b;border:1px solid #1f2733;
  display:flex;align-items:center;gap:3.4cqw;flex:1;
}
.wf-mock-reports .wf-donut{
  width:24cqw;height:24cqw;border-radius:999px;flex:none;
  position:relative;
  background:conic-gradient(#7d97b3 0deg,#7d97b3 var(--sweep,0deg),#28323f var(--sweep,0deg) 360deg);
  animation:wfm-rep-sweep 1.8s cubic-bezier(.3,.7,.2,1) .4s forwards;
  --sweep:0deg;
}
.wf-mock-reports .wf-donut::after{
  content:"";position:absolute;inset:23%;border-radius:999px;background:#0f141b;
}
.wf-mock-reports .wf-donut .wf-dc{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:4.4cqw;font-weight:800;line-height:1;z-index:1;
}
.wf-mock-reports .wf-donut .wf-dc small{font-size:2.3cqw;color:#999;font-weight:600;margin-top:.5cqh;}
@keyframes wfm-rep-sweep{from{--sweep:0deg;}to{--sweep:241deg;}}
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg;}

.wf-mock-reports .wf-leg{display:flex;flex-direction:column;gap:1.4cqh;}
.wf-mock-reports .wf-leg .wf-li{display:flex;align-items:center;gap:2cqw;font-size:3cqw;color:#e0e0e0;font-weight:600;}
.wf-mock-reports .wf-leg .wf-li i{width:2.6cqw;height:2.6cqw;border-radius:.8cqw;display:block;}
.wf-mock-reports .wf-leg .wf-li.sold i{background:#7d97b3;}
.wf-mock-reports .wf-leg .wf-li.stock i{background:#28323f;}
.wf-mock-reports .wf-leg .wf-li b{color:#fff;margin-left:.6cqw;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .wf-mock-reports *{animation:none!important;transition:none!important;}
  .wf-mock-reports .wf-bar .wf-col{transform:scaleY(1);}
  .wf-mock-reports .wf-fill{width:var(--w);}
  .wf-mock-reports .wf-donut{--sweep:241deg;}
  .wf-mock-reports .wf-ri{counter-reset:--wf-ri 1;}
  .wf-mock-reports .wf-rd{counter-reset:--wf-rd 28;}
  .wf-mock-reports .wf-mi{counter-reset:--wf-mi 31;}
  .wf-mock-reports .wf-md{counter-reset:--wf-md 4;}
}

/* ===================== capture ===================== */
/* ===========================================================
   WatchFlow — Quick Capture mockup
   Scoped under .wf-mock-capture · container units only
   =========================================================== */

.wf-mock-capture{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; container-type:size;
  font-family: var(--font-body);
  background:#0a0e13; color:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ---- screen shell ---- */
.wf-mock-capture .wf-cap-screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:0 4.2cqw 3cqh;
  background:
    radial-gradient(120cqw 60cqh at 50% -8cqh, #161c25 0%, #0f141b 46%, #0a0e13 100%);
}

/* ---- status strip ---- */
.wf-mock-capture .wf-cap-status{
  display:flex; align-items:center; justify-content:space-between;
  height:5.4cqh; padding:0 1.5cqw;
  font-size:3.2cqw; font-weight:600; color:#e0e0e0; letter-spacing:.02em;
}
.wf-mock-capture .wf-cap-stat-r{ display:flex; align-items:center; gap:1.6cqw; }
.wf-mock-capture .wf-cap-bars{ display:flex; align-items:flex-end; gap:.5cqw; height:2.6cqw; }
.wf-mock-capture .wf-cap-bars i{ width:.9cqw; background:#e0e0e0; border-radius:.4cqw; }
.wf-mock-capture .wf-cap-bars i:nth-child(1){ height:35%; }
.wf-mock-capture .wf-cap-bars i:nth-child(2){ height:58%; }
.wf-mock-capture .wf-cap-bars i:nth-child(3){ height:80%; }
.wf-mock-capture .wf-cap-bars i:nth-child(4){ height:100%; }
.wf-mock-capture .wf-cap-batt{
  width:5.6cqw; height:2.7cqw; border:.4cqw solid #999; border-radius:.8cqw;
  position:relative; padding:.35cqw;
}
.wf-mock-capture .wf-cap-batt::after{
  content:""; position:absolute; right:-.9cqw; top:50%; transform:translateY(-50%);
  width:.6cqw; height:1.1cqw; background:#999; border-radius:0 .4cqw .4cqw 0;
}
.wf-mock-capture .wf-cap-batt i{ display:block; height:100%; width:78%; background:#e0e0e0; border-radius:.4cqw; }

/* ---- header ---- */
.wf-mock-capture .wf-cap-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4cqh .5cqw 1.8cqh;
}
.wf-mock-capture .wf-cap-title{ font-size:5.6cqw; font-weight:700; letter-spacing:-.01em; }
.wf-mock-capture .wf-cap-sub{ display:block; font-size:3.1cqw; font-weight:500; color:#999; margin-top:.4cqh; }
.wf-mock-capture .wf-cap-close{
  width:8.2cqw; height:8.2cqw; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#161c25; border:1px solid #1f2733;
  color:#999; font-size:4cqw; line-height:1;
}

/* ---- photo capture area ---- */
.wf-mock-capture .wf-cap-photo{
  position:relative; height:30cqh; border-radius:14px; overflow:hidden;
  background:
    radial-gradient(70cqw 40cqh at 50% 30%, #20262f 0%, #11161d 60%, #0a0e13 100%);
  box-shadow:inset 0 0 0 1px #1f2733, inset 0 6cqh 14cqh rgba(0,0,0,.5);
}
.wf-mock-capture .wf-cap-photo::after{ /* soft top sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, rgba(168,192,214,.10) 0%, transparent 40%);
  pointer-events:none;
}

/* corner framing brackets */
.wf-mock-capture .wf-cap-bk{ position:absolute; width:7cqw; height:7cqw; z-index:4; }
.wf-mock-capture .wf-cap-bk::before{ content:""; position:absolute; inset:0; border:.6cqw solid #a8c0d6; opacity:.85; border-radius:3px; }
.wf-mock-capture .wf-cap-bk.tl{ top:3.2cqw; left:3.2cqw; }
.wf-mock-capture .wf-cap-bk.tl::before{ border-right:none; border-bottom:none; }
.wf-mock-capture .wf-cap-bk.tr{ top:3.2cqw; right:3.2cqw; }
.wf-mock-capture .wf-cap-bk.tr::before{ border-left:none; border-bottom:none; }
.wf-mock-capture .wf-cap-bk.bl{ bottom:3.2cqw; left:3.2cqw; }
.wf-mock-capture .wf-cap-bk.bl::before{ border-right:none; border-top:none; }
.wf-mock-capture .wf-cap-bk.br{ bottom:3.2cqw; right:3.2cqw; }
.wf-mock-capture .wf-cap-bk.br::before{ border-left:none; border-top:none; }

/* scanning line */
.wf-mock-capture .wf-cap-scan{
  position:absolute; left:0; right:0; top:0; height:7cqh; z-index:3;
  background:linear-gradient(180deg, rgba(168,192,214,0) 0%, rgba(168,192,214,.18) 60%, rgba(168,192,214,.55) 100%);
  border-bottom:1px solid #a8c0d6;
  box-shadow:0 0 9cqw 1cqw rgba(168,192,214,.40);
  opacity:0;
  animation:wfm-cap-scan 9s linear infinite;
}

/* ---- watch dial ---- */
.wf-mock-capture .wf-cap-dial{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30cqmin; height:30cqmin; z-index:2;
}
.wf-mock-capture .wf-cap-bezel{
  position:absolute; inset:0; border-radius:999px;
  background:
    conic-gradient(from 210deg,#3c4654,#10141a,#2c333d,#0c1015,#384350,#10141a,#2a313b,#3c4654);
  box-shadow:0 1.4cqh 3cqh rgba(0,0,0,.6), inset 0 0 0 .5cqmin #05080b;
}
.wf-mock-capture .wf-cap-bezel::before{ /* black ceramic insert (LN) */
  content:""; position:absolute; inset:1.7cqmin; border-radius:999px;
  background:radial-gradient(circle at 38% 30%, #1c222b 0%, #0a0d12 70%);
  box-shadow:inset 0 0 0 1px #2a313b;
}
.wf-mock-capture .wf-cap-bezel::after{ /* 12 o'clock pip */
  content:""; position:absolute; top:1.1cqmin; left:50%; transform:translateX(-50%);
  width:1.5cqmin; height:1.5cqmin; border-radius:999px;
  background:#e0e0e0; box-shadow:0 0 1.4cqmin rgba(224,224,224,.6);
}
.wf-mock-capture .wf-cap-face{
  position:absolute; inset:4.2cqmin; border-radius:999px;
  background:radial-gradient(circle at 42% 34%, #161b22 0%, #090c10 72%, #05070a 100%);
  box-shadow:inset 0 0 0 .6cqmin #05080b, inset 0 0 2cqh rgba(0,0,0,.8);
}
/* hour markers (luminous dots ringed around the face) */
.wf-mock-capture .wf-cap-markers{
  position:absolute; left:50%; top:50%;
  width:1.7cqmin; height:1.7cqmin; border-radius:999px; background:transparent;
  transform:translate(-50%,-50%);
  box-shadow:
    0     -8.4cqmin 0 0 #e6e9ec,
    4.2cqmin -7.3cqmin 0 0 #d4d8dc,
    7.3cqmin -4.2cqmin 0 0 #d4d8dc,
    8.4cqmin 0       0 0 #d4d8dc,
    7.3cqmin 4.2cqmin 0 0 #d4d8dc,
    4.2cqmin 7.3cqmin 0 0 #d4d8dc,
    0      8.4cqmin 0 0 #d4d8dc,
    -4.2cqmin 7.3cqmin 0 0 #d4d8dc,
    -7.3cqmin 4.2cqmin 0 0 #d4d8dc,
    -8.4cqmin 0       0 0 #d4d8dc,
    -7.3cqmin -4.2cqmin 0 0 #d4d8dc,
    -4.2cqmin -7.3cqmin 0 0 #d4d8dc;
}
/* hands */
.wf-mock-capture .wf-cap-hand{
  position:absolute; left:50%; bottom:50%; transform-origin:bottom center;
  border-radius:999px; background:#e6e9ec; z-index:3;
}
.wf-mock-capture .wf-cap-hand.h{ width:1.8cqmin; height:6.2cqmin; transform:translateX(-50%) rotate(305deg); }
.wf-mock-capture .wf-cap-hand.m{ width:1.4cqmin; height:9cqmin; transform:translateX(-50%) rotate(62deg); }
.wf-mock-capture .wf-cap-hand.s{ width:.5cqmin; height:9.6cqmin; background:#a8c0d6; transform:translateX(-50%) rotate(190deg); }
.wf-mock-capture .wf-cap-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2.4cqmin; height:2.4cqmin; border-radius:999px; background:#e6e9ec; z-index:4;
  box-shadow:0 0 1.2cqmin rgba(0,0,0,.6);
}
/* date window @ 3 o'clock */
.wf-mock-capture .wf-cap-date{
  position:absolute; top:50%; right:4.6cqmin; transform:translateY(-50%);
  min-width:2.8cqmin; padding:.4cqmin .5cqmin; border-radius:1px;
  background:#f2f3f4; color:#0a0e13; font-size:2.3cqmin; font-weight:700;
  text-align:center; line-height:1; box-shadow:inset 0 0 0 1px #b8bcc0; z-index:3;
}

/* ---- matched toast / chip ---- */
.wf-mock-capture .wf-cap-toast{
  display:inline-flex; align-self:flex-start; align-items:center; gap:1.4cqw;
  margin:1.6cqh 0 .4cqh; padding:.9cqh 3cqw;
  background:rgba(76,175,80,.14); border:1px solid rgba(76,175,80,.45);
  border-radius:999px; font-size:3.1cqw; font-weight:600; color:#4caf50;
  box-shadow:0 0 12cqw rgba(76,175,80,.12);
  animation:wfm-cap-toast 9s ease infinite;
}
.wf-mock-capture .wf-cap-toast .tick{
  width:3.6cqw; height:3.6cqw; flex:none; border-radius:999px; background:#4caf50;
  color:#0a0e13; font-size:2.6cqw; display:flex; align-items:center; justify-content:center;
}

/* ---- form ---- */
.wf-mock-capture .wf-cap-form{
  flex:1; display:flex; flex-direction:column; gap:1.25cqh;
  padding:1.4cqh 0 .4cqh;
}
.wf-mock-capture .wf-cap-field{ display:flex; align-items:center; gap:3cqw; }
.wf-mock-capture .wf-cap-label{
  flex:none; width:26cqw; font-size:3.1cqw; font-weight:500; color:#999; letter-spacing:.01em;
}
.wf-mock-capture .wf-cap-input{
  flex:1; min-height:5.4cqh; display:flex; align-items:center;
  padding:.6cqh 3.2cqw; border-radius:8px;
  background:#1f2733; box-shadow:inset 0 0 0 1px #28323f;
  font-size:3.6cqw; font-weight:600; color:#fff; overflow:hidden;
}
.wf-mock-capture .wf-cap-v{
  display:inline-block; white-space:nowrap;
}
.wf-mock-capture .wf-cap-v .unit{ color:#999; font-weight:500; }
/* condition value styled as a subtle green status */
.wf-mock-capture .wf-cap-i5 .wf-cap-v{ color:#4caf50; }
/* price emphasised */
.wf-mock-capture .wf-cap-i6 .wf-cap-v{ color:#a8c0d6; }

/* per-field glow + type-in animations */
.wf-mock-capture .wf-cap-i1{ animation:wfm-cap-glow-1 9s ease infinite; }
.wf-mock-capture .wf-cap-i2{ animation:wfm-cap-glow-2 9s ease infinite; }
.wf-mock-capture .wf-cap-i3{ animation:wfm-cap-glow-3 9s ease infinite; }
.wf-mock-capture .wf-cap-i4{ animation:wfm-cap-glow-4 9s ease infinite; }
.wf-mock-capture .wf-cap-i5{ animation:wfm-cap-glow-5 9s ease infinite; }
.wf-mock-capture .wf-cap-i6{ animation:wfm-cap-glow-6 9s ease infinite; }
.wf-mock-capture .wf-cap-i1 .wf-cap-v{ animation:wfm-cap-type-1 9s linear infinite; }
.wf-mock-capture .wf-cap-i2 .wf-cap-v{ animation:wfm-cap-type-2 9s linear infinite; }
.wf-mock-capture .wf-cap-i3 .wf-cap-v{ animation:wfm-cap-type-3 9s linear infinite; }
.wf-mock-capture .wf-cap-i4 .wf-cap-v{ animation:wfm-cap-type-4 9s linear infinite; }
.wf-mock-capture .wf-cap-i5 .wf-cap-v{ animation:wfm-cap-type-5 9s linear infinite; }
.wf-mock-capture .wf-cap-i6 .wf-cap-v{ animation:wfm-cap-type-6 9s linear infinite; }

/* ---- save button ---- */
.wf-mock-capture .wf-cap-save{
  margin-top:1.4cqh; height:7cqh; border:none; border-radius:14px;
  font-size:4cqw; font-weight:700; letter-spacing:.01em; color:#0a0e13;
  background:linear-gradient(180deg,#bcd2e6 0%,#a8c0d6 100%);
  box-shadow:0 1.4cqh 3cqh rgba(125,151,179,.30);
  display:flex; align-items:center; justify-content:center; gap:2cqw;
  animation:wfm-cap-cta 9s ease infinite;
}
.wf-mock-capture .wf-cap-save .ic{ font-size:4.4cqw; line-height:1; }

/* ===========================================================
   keyframes
   =========================================================== */
@keyframes wfm-cap-scan{
  0%,3%   { transform:translateY(-1cqh); opacity:0; }
  6%      { opacity:1; }
  27%     { transform:translateY(30cqh); opacity:1; }
  30%     { transform:translateY(30cqh); opacity:0; }
  100%    { transform:translateY(-1cqh); opacity:0; }
}

/* glow flash on each field box; default (rest) = settled */
@keyframes wfm-cap-glow-1{
  0%,30%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  31.5%    { background:rgba(125,151,179,.30); box-shadow:0 0 0 1px #a8c0d6, 0 0 9cqw rgba(168,192,214,.30); }
  37%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}
@keyframes wfm-cap-glow-2{
  0%,37%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  38.5%    { background:rgba(125,151,179,.30); box-shadow:0 0 0 1px #a8c0d6, 0 0 9cqw rgba(168,192,214,.30); }
  44%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}
@keyframes wfm-cap-glow-3{
  0%,44%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  45.5%    { background:rgba(125,151,179,.30); box-shadow:0 0 0 1px #a8c0d6, 0 0 9cqw rgba(168,192,214,.30); }
  51%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}
@keyframes wfm-cap-glow-4{
  0%,51%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  52.5%    { background:rgba(125,151,179,.30); box-shadow:0 0 0 1px #a8c0d6, 0 0 9cqw rgba(168,192,214,.30); }
  58%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}
@keyframes wfm-cap-glow-5{
  0%,58%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  59.5%    { background:rgba(76,175,80,.18); box-shadow:0 0 0 1px #4caf50, 0 0 9cqw rgba(76,175,80,.25); }
  65%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}
@keyframes wfm-cap-glow-6{
  0%,65%   { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  66.5%    { background:rgba(125,151,179,.30); box-shadow:0 0 0 1px #a8c0d6, 0 0 9cqw rgba(168,192,214,.30); }
  72%,92%  { background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
  100%     { background:#1f2733; box-shadow:inset 0 0 0 1px #1f2733; }
}

/* type-in: clip-path wipe + opacity snap; default (rest) = fully shown */
@keyframes wfm-cap-type-1{
  0%,30%  { clip-path:inset(0 100% 0 0); opacity:0; }
  30.2%   { opacity:1; }
  33%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}
@keyframes wfm-cap-type-2{
  0%,37%  { clip-path:inset(0 100% 0 0); opacity:0; }
  37.2%   { opacity:1; }
  40%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}
@keyframes wfm-cap-type-3{
  0%,44%  { clip-path:inset(0 100% 0 0); opacity:0; }
  44.2%   { opacity:1; }
  47%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}
@keyframes wfm-cap-type-4{
  0%,51%  { clip-path:inset(0 100% 0 0); opacity:0; }
  51.2%   { opacity:1; }
  54%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}
@keyframes wfm-cap-type-5{
  0%,58%  { clip-path:inset(0 100% 0 0); opacity:0; }
  58.2%   { opacity:1; }
  61%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}
@keyframes wfm-cap-type-6{
  0%,65%  { clip-path:inset(0 100% 0 0); opacity:0; }
  65.2%   { opacity:1; }
  68%     { clip-path:inset(0 0 0 0); opacity:1; }
  92%     { clip-path:inset(0 0 0 0); opacity:1; }
  100%    { clip-path:inset(0 100% 0 0); opacity:0; }
}

@keyframes wfm-cap-toast{
  0%,72%   { opacity:0; transform:translateY(1.4cqh) scale(.95); }
  75%      { opacity:1; transform:translateY(0) scale(1); }
  90%      { opacity:1; transform:translateY(0) scale(1); }
  96%,100% { opacity:0; transform:translateY(1.4cqh) scale(.95); }
}

@keyframes wfm-cap-cta{
  0%,70%   { box-shadow:0 1.4cqh 3cqh rgba(125,151,179,.30); }
  78%      { box-shadow:0 1.4cqh 3cqh rgba(125,151,179,.30), 0 0 0 .8cqw rgba(168,192,214,.30); }
  88%,100% { box-shadow:0 1.4cqh 3cqh rgba(125,151,179,.30); }
}

/* ===========================================================
   reduced motion — complete resting state, all fields filled
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  .wf-mock-capture *{ animation:none!important; transition:none!important; }
  .wf-mock-capture .wf-cap-scan{ opacity:0; }
  .wf-mock-capture .wf-cap-toast{ opacity:1; transform:none; }
  .wf-mock-capture .wf-cap-v{ clip-path:inset(0 0 0 0); opacity:1; }
  .wf-mock-capture .wf-cap-input{ background:#1f2733; box-shadow:inset 0 0 0 1px #28323f; }
}

/* ===================== caption ===================== */
/* WatchFlow — AutoCaption mockup. Scoped to .wf-mock-caption. */

.wf-mock-caption{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; container-type:size;
  background:
    radial-gradient(120% 80% at 50% -10%, #161c25 0%, #0f141b 45%, #0a0e13 100%);
  font-family: var(--font-body);
  color:#fff;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.wf-mock-caption *{ box-sizing:border-box; }

/* ---------- status strip ---------- */
.wf-mock-caption .wf-cap-status{
  display:flex; align-items:center; justify-content:space-between;
  padding:2.4cqh 5.5cqw 0.8cqh;
  font-size:3.4cqw; font-weight:600; color:#e0e0e0; letter-spacing:0.02em;
}
.wf-mock-caption .wf-cap-status .wf-cap-dots{ display:flex; gap:1.1cqw; align-items:center; }
.wf-mock-caption .wf-cap-status .wf-cap-dots i{
  width:1.5cqw; height:1.5cqw; border-radius:50%; background:#e0e0e0; display:block; opacity:0.9;
}
.wf-mock-caption .wf-cap-status .wf-cap-batt{
  width:6cqw; height:3cqw; border:0.4cqw solid #999; border-radius:1cqw; position:relative;
  display:flex; align-items:center; padding:0.4cqw;
}
.wf-mock-caption .wf-cap-status .wf-cap-batt::after{
  content:""; position:absolute; right:-1cqw; top:50%; transform:translateY(-50%);
  width:0.7cqw; height:1.2cqw; background:#999; border-radius:0 0.6cqw 0.6cqw 0;
}
.wf-mock-caption .wf-cap-status .wf-cap-batt b{ display:block; height:100%; width:72%; background:#4caf50; border-radius:0.6cqw; }

/* ---------- header / title ---------- */
.wf-mock-caption .wf-cap-titlebar{
  display:flex; align-items:center; gap:3cqw;
  padding:1.2cqh 5.5cqw 1.6cqh;
}
.wf-mock-caption .wf-cap-back{
  font-size:6cqw; color:#a8c0d6; line-height:1; margin-top:-0.4cqh;
}
.wf-mock-caption .wf-cap-title{ font-size:5.4cqw; font-weight:700; letter-spacing:-0.01em; }
.wf-mock-caption .wf-cap-title small{ display:block; font-size:3cqw; font-weight:500; color:#999; margin-top:0.3cqh; }
.wf-mock-caption .wf-cap-spark{ margin-left:auto; font-size:5cqw; }

/* ---------- watch detail header ---------- */
.wf-mock-caption .wf-cap-watch{
  display:flex; align-items:center; gap:3.5cqw;
  margin:0 5.5cqw; padding:2.6cqw 3.5cqw;
  background:linear-gradient(180deg,#1f2733,#161c25);
  border:1px solid #28323f; border-radius:14px;
}
.wf-mock-caption .wf-cap-watch-meta b{ display:block; font-size:3.9cqw; font-weight:600; letter-spacing:-0.01em; }
.wf-mock-caption .wf-cap-watch-meta span{ display:block; font-size:3.1cqw; color:#999; margin-top:0.5cqh; }
.wf-mock-caption .wf-cap-watch-meta em{ color:#4caf50; font-style:normal; font-weight:600; }
.wf-mock-caption .wf-cap-watch-meta i{ color:#a8c0d6; font-style:normal; }

/* dial */
.wf-mock-caption .wf-cap-dial{
  flex:0 0 auto; width:13.5cqw; height:13.5cqw; border-radius:50%; position:relative;
  background:
    radial-gradient(circle at 38% 32%, #2c3947 0%, #11161d 60%, #05080b 100%);
  border:0.7cqw solid #28323f;
  box-shadow:0 0.6cqh 2cqh rgba(0,0,0,0.55), inset 0 0 1.5cqw rgba(0,0,0,0.8);
}
.wf-mock-caption .wf-cap-dial::before{ /* bezel ring */
  content:""; position:absolute; inset:6%; border-radius:50%;
  border:0.5cqw solid #0a0e13;
  background:radial-gradient(circle at 40% 35%, #161c25, #05080b);
}
.wf-mock-caption .wf-cap-dial::after{ /* 12 o'clock pip */
  content:""; position:absolute; left:50%; top:9%; transform:translateX(-50%);
  width:1.6cqw; height:1.6cqw; border-radius:50%; background:#4caf50;
  box-shadow:0 0 1.2cqw rgba(76,175,80,0.7); z-index:3;
}
.wf-mock-caption .wf-cap-hand{
  position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; z-index:4; border-radius:999px;
}
.wf-mock-caption .wf-cap-hand.h{ width:1.1cqw; height:3.4cqw; margin-left:-0.55cqw; background:#e0e0e0; transform:rotate(40deg); }
.wf-mock-caption .wf-cap-hand.m{ width:0.8cqw; height:4.8cqw; margin-left:-0.4cqw; background:#fff; transform:rotate(-65deg); }
.wf-mock-caption .wf-cap-hand.s{
  width:0.4cqw; height:5.2cqw; margin-left:-0.2cqw; background:#42a5f5;
  animation:wfm-cap-tone-sweep 8s linear infinite;
}
.wf-mock-caption .wf-cap-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1.6cqw; height:1.6cqw; border-radius:50%; background:#a8c0d6; z-index:5;
  box-shadow:0 0 0 0.4cqw rgba(10,14,19,0.8);
}
@keyframes wfm-cap-tone-sweep{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ---------- tone label + pills ---------- */
.wf-mock-caption .wf-cap-tonelabel{
  margin:2.6cqh 5.5cqw 1.1cqh; font-size:3.1cqw; font-weight:600; color:#999;
  text-transform:uppercase; letter-spacing:0.12em;
}
.wf-mock-caption .wf-cap-pills{
  display:flex; gap:2cqw; padding:0 5.5cqw; flex-wrap:wrap;
}
.wf-mock-caption .wf-cap-pill{
  flex:1 1 auto; text-align:center;
  padding:1.5cqh 1cqw; border-radius:999px;
  font-size:3.3cqw; font-weight:600; letter-spacing:0.01em;
  background:#1f2733; color:#999; border:1px solid #28323f;
  box-shadow:none;
}
.wf-mock-caption .wf-cap-pill.r{ animation:wfm-cap-tone-pill-r 24s infinite; }
.wf-mock-caption .wf-cap-pill.t{ animation:wfm-cap-tone-pill-t 24s infinite; }
.wf-mock-caption .wf-cap-pill.c{ animation:wfm-cap-tone-pill-c 24s infinite; }
.wf-mock-caption .wf-cap-pill.k{ animation:wfm-cap-tone-pill-k 24s infinite; }

@keyframes wfm-cap-tone-pill-r{
  0%,24%{ background:#a8c0d6; color:#0a0e13; border-color:#a8c0d6; box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35); }
  25%,99%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
  100%{ background:#a8c0d6; color:#0a0e13; border-color:#a8c0d6; box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35); }
}
@keyframes wfm-cap-tone-pill-t{
  0%,24%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
  25%,49%{ background:#a8c0d6; color:#0a0e13; border-color:#a8c0d6; box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35); }
  50%,100%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
}
@keyframes wfm-cap-tone-pill-c{
  0%,49%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
  50%,74%{ background:#a8c0d6; color:#0a0e13; border-color:#a8c0d6; box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35); }
  75%,100%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
}
@keyframes wfm-cap-tone-pill-k{
  0%,74%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
  75%,99%{ background:#a8c0d6; color:#0a0e13; border-color:#a8c0d6; box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35); }
  100%{ background:#1f2733; color:#999; border-color:#28323f; box-shadow:none; }
}

/* ---------- caption card ---------- */
.wf-mock-caption .wf-cap-card{
  position:relative; flex:1 1 auto; margin:1.8cqh 5.5cqw 0;
  background:linear-gradient(180deg,#161c25,#0f141b);
  border:1px solid #28323f; border-radius:14px;
  overflow:hidden;
  min-height:0;
}
.wf-mock-caption .wf-cap-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:2cqw 3.5cqw; border-bottom:1px solid #1f2733;
}
.wf-mock-caption .wf-cap-card-head b{ font-size:3.2cqw; font-weight:600; color:#e0e0e0; }
.wf-mock-caption .wf-cap-chip{
  font-size:2.7cqw; font-weight:600; color:#a8c0d6; padding:0.6cqh 2cqw;
  background:rgba(125,151,179,0.14); border:1px solid rgba(125,151,179,0.3); border-radius:999px;
}
.wf-mock-caption .wf-cap-body{ position:relative; padding:3.2cqw 3.5cqw; }

/* generating shimmer */
.wf-mock-caption .wf-cap-gen{
  position:absolute; inset:3.2cqw 3.5cqw auto; display:flex; align-items:center; gap:2cqw;
  font-size:3.4cqw; color:#a8c0d6; font-weight:600; opacity:0;
}
.wf-mock-caption .wf-cap-gen span{
  background:linear-gradient(90deg,#28323f 0%,#28323f 30%,#a8c0d6 50%,#28323f 70%,#28323f 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wfm-cap-tone-shimmer 1.6s linear infinite;
}
.wf-mock-caption .wf-cap-gen i{
  width:3.4cqw; height:3.4cqw; border-radius:50%;
  border:0.6cqw solid rgba(168,192,214,0.3); border-top-color:#a8c0d6;
  animation:wfm-cap-tone-spin 0.9s linear infinite;
}
.wf-mock-caption .wf-cap-gen.gr{ animation:wfm-cap-tone-gen-r 24s infinite; }
.wf-mock-caption .wf-cap-gen.gt{ animation:wfm-cap-tone-gen-t 24s infinite; }
.wf-mock-caption .wf-cap-gen.gc{ animation:wfm-cap-tone-gen-c 24s infinite; }
.wf-mock-caption .wf-cap-gen.gk{ animation:wfm-cap-tone-gen-k 24s infinite; }
@keyframes wfm-cap-tone-shimmer{ from{background-position:150% 0;} to{background-position:-150% 0;} }
@keyframes wfm-cap-tone-spin{ to{ transform:rotate(360deg); } }
@keyframes wfm-cap-tone-gen-r{ 0%,3%{opacity:1;} 3.6%,100%{opacity:0;} }
@keyframes wfm-cap-tone-gen-t{ 0%,24%{opacity:0;} 25%,28%{opacity:1;} 28.6%,100%{opacity:0;} }
@keyframes wfm-cap-tone-gen-c{ 0%,49%{opacity:0;} 50%,53%{opacity:1;} 53.6%,100%{opacity:0;} }
@keyframes wfm-cap-tone-gen-k{ 0%,74%{opacity:0;} 75%,78%{opacity:1;} 78.6%,100%{opacity:0;} }

/* caption blocks (stacked) */
.wf-mock-caption .wf-cap-block{
  position:absolute; inset:3.2cqw 3.5cqw auto; opacity:0;
}
.wf-mock-caption .wf-cap-block.r{ animation:wfm-cap-tone-blk-r 24s infinite; }
.wf-mock-caption .wf-cap-block.t{ animation:wfm-cap-tone-blk-t 24s infinite; }
.wf-mock-caption .wf-cap-block.c{ animation:wfm-cap-tone-blk-c 24s infinite; }
.wf-mock-caption .wf-cap-block.k{ animation:wfm-cap-tone-blk-k 24s infinite; }
@keyframes wfm-cap-tone-blk-r{ 0%,24%{opacity:1;} 25%,99%{opacity:0;} 100%{opacity:1;} }
@keyframes wfm-cap-tone-blk-t{ 0%,24%{opacity:0;} 25%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes wfm-cap-tone-blk-c{ 0%,49%{opacity:0;} 50%,74%{opacity:1;} 75%,100%{opacity:0;} }
@keyframes wfm-cap-tone-blk-k{ 0%,74%{opacity:0;} 75%,99%{opacity:1;} 100%{opacity:0;} }

.wf-mock-caption .wf-cap-line{
  font-size:3.7cqw; line-height:1.55; color:#e0e0e0; opacity:0;
  transform:translateY(0.9cqh); margin-bottom:1.1cqh;
}
.wf-mock-caption .wf-cap-line.tag{ color:#a8c0d6; font-weight:600; margin-bottom:0; }
.wf-mock-caption .wf-cap-cursor{
  display:inline-block; width:0.55cqw; height:3.6cqw; background:#a8c0d6;
  margin-left:0.6cqw; vertical-align:-0.4cqh; border-radius:1px;
  animation:wfm-cap-tone-blink 1s steps(1,end) infinite;
}
@keyframes wfm-cap-tone-blink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }

/* refined lines */
.wf-mock-caption .wf-cap-block.r .wf-cap-line:nth-child(1){ animation:wfm-cap-tone-r1 24s infinite; }
.wf-mock-caption .wf-cap-block.r .wf-cap-line:nth-child(2){ animation:wfm-cap-tone-r2 24s infinite; }
.wf-mock-caption .wf-cap-block.r .wf-cap-line:nth-child(3){ animation:wfm-cap-tone-r3 24s infinite; }
.wf-mock-caption .wf-cap-block.r .wf-cap-line:nth-child(4){ animation:wfm-cap-tone-r4 24s infinite; }
@keyframes wfm-cap-tone-r1{ 0%,4%{opacity:0;transform:translateY(0.9cqh);} 7%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-r2{ 0%,7%{opacity:0;transform:translateY(0.9cqh);} 10%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-r3{ 0%,10%{opacity:0;transform:translateY(0.9cqh);} 13%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-r4{ 0%,13%{opacity:0;transform:translateY(0.9cqh);} 16%,100%{opacity:1;transform:translateY(0);} }

/* technical lines */
.wf-mock-caption .wf-cap-block.t .wf-cap-line:nth-child(1){ animation:wfm-cap-tone-t1 24s infinite; }
.wf-mock-caption .wf-cap-block.t .wf-cap-line:nth-child(2){ animation:wfm-cap-tone-t2 24s infinite; }
.wf-mock-caption .wf-cap-block.t .wf-cap-line:nth-child(3){ animation:wfm-cap-tone-t3 24s infinite; }
.wf-mock-caption .wf-cap-block.t .wf-cap-line:nth-child(4){ animation:wfm-cap-tone-t4 24s infinite; }
@keyframes wfm-cap-tone-t1{ 0%,29%{opacity:0;transform:translateY(0.9cqh);} 32%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-t2{ 0%,32%{opacity:0;transform:translateY(0.9cqh);} 35%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-t3{ 0%,35%{opacity:0;transform:translateY(0.9cqh);} 38%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-t4{ 0%,38%{opacity:0;transform:translateY(0.9cqh);} 41%,100%{opacity:1;transform:translateY(0);} }

/* casual lines */
.wf-mock-caption .wf-cap-block.c .wf-cap-line:nth-child(1){ animation:wfm-cap-tone-c1 24s infinite; }
.wf-mock-caption .wf-cap-block.c .wf-cap-line:nth-child(2){ animation:wfm-cap-tone-c2 24s infinite; }
.wf-mock-caption .wf-cap-block.c .wf-cap-line:nth-child(3){ animation:wfm-cap-tone-c3 24s infinite; }
.wf-mock-caption .wf-cap-block.c .wf-cap-line:nth-child(4){ animation:wfm-cap-tone-c4 24s infinite; }
@keyframes wfm-cap-tone-c1{ 0%,54%{opacity:0;transform:translateY(0.9cqh);} 57%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-c2{ 0%,57%{opacity:0;transform:translateY(0.9cqh);} 60%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-c3{ 0%,60%{opacity:0;transform:translateY(0.9cqh);} 63%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-c4{ 0%,63%{opacity:0;transform:translateY(0.9cqh);} 66%,100%{opacity:1;transform:translateY(0);} }

/* collector lines */
.wf-mock-caption .wf-cap-block.k .wf-cap-line:nth-child(1){ animation:wfm-cap-tone-k1 24s infinite; }
.wf-mock-caption .wf-cap-block.k .wf-cap-line:nth-child(2){ animation:wfm-cap-tone-k2 24s infinite; }
.wf-mock-caption .wf-cap-block.k .wf-cap-line:nth-child(3){ animation:wfm-cap-tone-k3 24s infinite; }
.wf-mock-caption .wf-cap-block.k .wf-cap-line:nth-child(4){ animation:wfm-cap-tone-k4 24s infinite; }
@keyframes wfm-cap-tone-k1{ 0%,79%{opacity:0;transform:translateY(0.9cqh);} 82%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-k2{ 0%,82%{opacity:0;transform:translateY(0.9cqh);} 85%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-k3{ 0%,85%{opacity:0;transform:translateY(0.9cqh);} 88%,100%{opacity:1;transform:translateY(0);} }
@keyframes wfm-cap-tone-k4{ 0%,88%{opacity:0;transform:translateY(0.9cqh);} 91%,100%{opacity:1;transform:translateY(0);} }

/* ---------- action buttons ---------- */
.wf-mock-caption .wf-cap-actions{
  display:flex; gap:3cqw; padding:2.4cqh 5.5cqw 3cqh;
}
.wf-mock-caption .wf-cap-btn{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:1.6cqw;
  padding:1.9cqh 1cqw; border-radius:10px; font-size:3.6cqw; font-weight:700; letter-spacing:0.01em;
}
.wf-mock-caption .wf-cap-btn.ghost{ background:#1f2733; color:#e0e0e0; border:1px solid #28323f; }
.wf-mock-caption .wf-cap-btn.primary{
  background:linear-gradient(180deg,#a8c0d6,#7d97b3); color:#0a0e13;
  box-shadow:0 0.6cqh 1.8cqh rgba(125,151,179,0.35);
}
.wf-mock-caption .wf-cap-btn svg{ width:4cqw; height:4cqw; display:block; }

/* ---------- reduced motion: full resting state ---------- */
@media (prefers-reduced-motion: reduce){
  .wf-mock-caption *{ animation:none!important; transition:none!important; }
  .wf-mock-caption .wf-cap-block{ opacity:0!important; }
  .wf-mock-caption .wf-cap-block.r{ opacity:1!important; }
  .wf-mock-caption .wf-cap-block.r .wf-cap-line{ opacity:1!important; transform:none!important; }
  .wf-mock-caption .wf-cap-gen{ opacity:0!important; }
  .wf-mock-caption .wf-cap-cursor{ opacity:1!important; }
  .wf-mock-caption .wf-cap-pill.r{
    background:#a8c0d6!important; color:#0a0e13!important; border-color:#a8c0d6!important;
    box-shadow:0 0.4cqh 1.4cqh rgba(168,192,214,0.35)!important;
  }
}

/* ===== integration: when a mock fills the phone screen, kill the
   image-skeleton shimmer + placeholder bg so nothing shows behind ===== */
.v3-phone-screen:has(.wf-mock){background:none!important;}
.v3-phone-screen:has(.wf-mock)::before{display:none!important;content:none!important;animation:none!important;}
.wf-mock{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}