/* Append to uxv2.css */

/* ===== CRUMB ===== */
.v2 .v2-crumb {
  padding: 100px var(--gutter) 0;
  font: 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-3);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.v2 .v2-crumb a { color: var(--bone-3); text-decoration: none; transition: color .2s; }
.v2 .v2-crumb a:hover { color: var(--lime); }
.v2 .v2-crumb .sep { color: var(--bone-4); }
.v2 .v2-crumb .cur { color: var(--bone); }

/* ===== Section heading utilities ===== */
.v2-section { padding: var(--sec-y) var(--gutter); border-top: 1px solid var(--line); position: relative; }
.v2-section__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 60px;
  align-items: end; margin-bottom: 60px;
}
.v2-section__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-3);
}
.v2-section__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.v2-section__title {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(36px, 5.6vw, 84px); line-height: 0.94; letter-spacing: -0.03em;
  color: var(--bone); margin: 18px 0 0;
}
.v2-section__title em { font-style: italic; color: var(--bone-2); font-variation-settings: "WONK" 1; }
.v2-section__title .lime { color: var(--lime); font-style: italic; }

/* ===== STATS — physics chips ===== */
.v2-stats {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 1.3fr);
  gap: 60px; align-items: stretch;
}
.v2-stats__copy { padding-top: 20px; }
.v2-stats__copy h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--bone); margin: 18px 0 22px;
}
.v2-stats__copy h3 em { font-style: italic; color: var(--lime); }
.v2-stats__copy p { font: 16px/1.6 var(--f-sans); color: var(--bone-2); max-width: 440px; }
.v2-stats__cup {
  position: relative;
  height: 480px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(245,242,236,0.02) 0%, rgba(245,242,236,0.04) 100%);
}
.v2-stats__cup canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.v2-stats__cup canvas:active { cursor: grabbing; }
.v2-stats__cup-label {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font: 10px var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-3);
}
.v2-stats__cup-counter {
  position: absolute; bottom: 16px; left: 18px; right: 18px; z-index: 2;
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  pointer-events: none;
}
.v2-stats__counter {
  display: flex; flex-direction: column; gap: 2px;
}
.v2-stats__counter .k { font: 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.v2-stats__counter .v { font-family: var(--f-display); font-weight: 300; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--lime); }

/* ===== STATS — LEDGER (replaces physics) ===== */
.v2 .v2-stats--ledger { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 80px; }
.v2 .v2-stats__legend { display: flex; gap: 18px; align-items: center; margin-top: 32px; flex-wrap: wrap; font: 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.v2 .v2-stats__legend span { display: inline-flex; align-items: center; gap: 8px; }
.v2 .v2-stats__legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.v2 .v2-stats__legend-meta { color: var(--bone-3); opacity: 0.7; margin-left: auto; letter-spacing: .08em; text-transform: none; font-family: var(--f-mono); }

.v2 .v2-stats__bigstat {
  margin-top: 36px; padding: 28px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; row-gap: 6px;
}
.v2 .v2-stats__bigstat .k {
  grid-column: 1; grid-row: 1;
  font: 10px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3);
  align-self: start;
}
.v2 .v2-stats__bigstat strong {
  grid-column: 1; grid-row: 2;
  font-family: var(--f-display); font-weight: 200; font-size: clamp(64px, 8vw, 112px);
  line-height: 0.85; letter-spacing: -0.04em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.v2 .v2-stats__bigstat small {
  grid-column: 2; grid-row: 2;
  font: 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3);
  padding-bottom: 12px;
}

.v2 .v2-stats__ledger { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.v2 .v2-stats__ledger-head, .v2 .v2-stats__row {
  display: grid; grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 90px;
  gap: 24px; align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.v2 .v2-stats__ledger-head {
  font: 10px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3);
  padding: 14px 8px; border-bottom: 1px solid var(--line-2);
}
.v2 .v2-stats__ledger-head .num { text-align: left; }

.v2 .v2-stats__row { transition: background 0.4s ease; cursor: default; }
.v2 .v2-stats__row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--lime); transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.6,0,0.2,1);
}
.v2 .v2-stats__row.is-in::before { transform: scaleY(1); }
.v2 .v2-stats__row:hover { background: rgba(212,255,58,0.03); }
.v2 .v2-stats__row:hover .v2-stats__num { color: var(--lime); }
.v2 .v2-stats__row:last-of-type { border-bottom: none; }

.v2 .v2-stats__num {
  font: 11px var(--f-mono); letter-spacing: .14em; color: var(--bone-3);
  transition: color 0.3s ease;
}
.v2 .v2-stats__client {
  font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--bone);
  letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 4px;
}
.v2 .v2-stats__client small {
  font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-3);
}
.v2 .v2-stats__metric {
  font: 13px var(--f-sans); color: var(--bone-2); line-height: 1.3;
}
.v2 .v2-stats__lift {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-family: var(--f-display); font-weight: 300; letter-spacing: -0.02em;
  color: var(--lime); line-height: 1;
}
.v2 .v2-stats__lift em {
  font-size: 38px; font-style: normal; font-variant-numeric: tabular-nums;
  display: inline-block; min-width: 1ch;
}
.v2 .v2-stats__lift i { font-style: normal; font-size: 22px; color: var(--lime); margin-right: 6px; }
.v2 .v2-stats__lift small {
  width: 100%; font-family: var(--f-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3);
  margin-top: 4px;
}
.v2 .v2-stats__date {
  font: 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-2); text-align: left;
}

.v2 .v2-stats__ledger-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 8px; font: 11px var(--f-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-3);
}
.v2 .v2-stats__ledger-foot .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  animation: v2StatsPulse 2s ease-in-out infinite;
}
@keyframes v2StatsPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

@media (max-width: 900px) {
  .v2 .v2-stats--ledger { gap: 40px; }
  .v2 .v2-stats__ledger-head, .v2 .v2-stats__row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      'num client lift'
      'num metric date';
    gap: 12px 16px; padding: 18px 4px;
  }
  .v2 .v2-stats__ledger-head { display: none; }
  .v2 .v2-stats__num { grid-area: num; }
  .v2 .v2-stats__client { grid-area: client; font-size: 16px; }
  .v2 .v2-stats__metric { grid-area: metric; font-size: 12px; }
  .v2 .v2-stats__lift { grid-area: lift; justify-content: flex-end; }
  .v2 .v2-stats__lift em { font-size: 28px; }
  .v2 .v2-stats__lift small { display: none; }
  .v2 .v2-stats__date { grid-area: date; text-align: right; }
}

/* ===== ROUGH → HI-FI MORPH ===== */
.v2-morph {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 40px;
  align-items: stretch;
}
.v2-morph__stage {
  position: relative; aspect-ratio: 1.05/1;
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.v2-morph__stage svg, .v2-morph__stage .v2-morph__hi {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.v2-morph__sketch { z-index: 1; opacity: 1; transition: opacity 0.4s; }
.v2-morph__hi { z-index: 2; opacity: 0; transition: opacity 0.4s; padding: 22px; }
.v2-morph__stage.is-hi .v2-morph__sketch { opacity: 0; }
.v2-morph__stage.is-hi .v2-morph__hi { opacity: 1; }
.v2-morph__stage-label {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font: 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone-3);
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10,10,10,0.7);
}
.v2-morph__progress {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 3;
  height: 2px; background: var(--line); border-radius: 2px; overflow: hidden;
}
.v2-morph__progress i { display: block; height: 100%; width: 0%; background: var(--lime); transition: width 0.2s; }
.v2-morph__copy {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 0 0 0 0;
}
.v2-morph__copy h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--bone); margin: 0;
}
.v2-morph__copy h3 em { font-style: italic; color: var(--lime); }
.v2-morph__copy p { font: 16px/1.6 var(--f-sans); color: var(--bone-2); margin: 0; }
.v2-morph__rows { display: grid; gap: 12px; margin-top: 8px; }
.v2-morph__row {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line);
  font: 13px var(--f-sans); color: var(--bone-2);
}
.v2-morph__row .num { font: 10px var(--f-mono); color: var(--bone-3); letter-spacing: .14em; }
.v2-morph__row .meta { font: 10px var(--f-mono); color: var(--lime); letter-spacing: .14em; text-transform: uppercase; }

/* ===== PROCESS — cinematic scroll ===== */
.v2-process {
  position: relative;
  background: var(--bg);
}
.v2-process__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.v2-process__scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.v2-process__scene.is-active { opacity: 1; pointer-events: auto; }
.v2-process__scene-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  width: 100%; max-width: 1400px; padding: 0 var(--gutter);
  align-items: center;
}
.v2-process__num {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(180px, 26vw, 420px);
  line-height: 0.85; letter-spacing: -0.05em;
  color: rgba(245,242,236,0.04);
  position: absolute; top: 50%; left: var(--gutter);
  transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  user-select: none;
}
.v2-process__copy { position: relative; z-index: 2; }
.v2-process__copy .step {
  font: 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.v2-process__copy h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(40px, 6vw, 96px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--bone); margin: 0 0 24px;
}
.v2-process__copy h3 em { font-style: italic; color: var(--lime); }
.v2-process__copy p { font: 17px/1.55 var(--f-sans); color: var(--bone-2); max-width: 460px; margin: 0 0 24px; }
.v2-process__copy .deliv {
  font: 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-3); display: flex; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.v2-process__visual { position: relative; z-index: 2; aspect-ratio: 1; }

.v2-process__rail {
  position: absolute; bottom: 40px; left: var(--gutter); right: var(--gutter); z-index: 5;
  display: flex; gap: 8px; align-items: center;
  font: 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-3);
}
.v2-process__rail .bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.v2-process__rail .bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0%; background: var(--lime); transition: width .3s; }

/* Process scene visuals: each scene has an SVG/canvas — animate via JS */
.v2-process__visual svg { width: 100%; height: 100%; }

/* ===== LIVE PROTOTYPE ===== */
.v2-proto {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px;
  align-items: center;
}
.v2-proto__copy h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -0.03em;
  color: var(--bone); margin: 18px 0 22px;
}
.v2-proto__copy h3 em { font-style: italic; color: var(--lime); }
.v2-proto__copy p { font: 16px/1.6 var(--f-sans); color: var(--bone-2); max-width: 480px; margin: 0 0 18px; }
.v2-proto__hints { display: grid; gap: 10px; margin-top: 26px; }
.v2-proto__hint {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px;
  font: 13px var(--f-sans); color: var(--bone-2);
  padding: 12px 0; border-top: 1px solid var(--line);
}
.v2-proto__hint .n { font: 10px var(--f-mono); color: var(--lime); letter-spacing: .14em; }
.v2-proto__stage {
  position: relative; aspect-ratio: 0.7/1; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   MOBILE FIXES (<=860px) — appended, page-scoped
   Bug 2: Section 05 (Live prototype) was cut off on the right.
   Root cause: the phone mock (.v2-phone, fixed 320px in uxv2-3.css)
   plus its box-shadow sits in .v2-proto__stage, which has NO
   horizontal containment. On narrow viewports the 320px block +
   shadow exceeds the column and pushes the page wider than the
   viewport, so the whole section overflows to the right. We contain
   the stage and let the phone shrink to fit here; the phone itself
   is made fluid in uxv2-3.css.
   ============================================================ */
@media (max-width: 860px) {
  /* Contain the prototype stage so nothing bleeds past the viewport. */
  .v2 .v2-proto__stage {
    min-height: 0;              /* drop the 600px floor that forced width via aspect-ratio */
    aspect-ratio: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;         /* phone shadow can show, but width is bounded below */
    padding: 20px 0;
  }
  /* Belt-and-braces: keep the whole prototype block within the column. */
  .v2 .v2-proto { max-width: 100%; }
  .v2 .v2-proto__copy { min-width: 0; }
}