/**
 * Challenge flow chart variants (two-step / instant / sprint).
 * Extends shared one-step-challenge.css without changing the 1-Step layout.
 */

/* ---- Shared helpers ---- */
.osc-flow__dot--sm svg,
.osc-flow__dot--sm img {
  width: 32px;
  height: 32px;
}

.osc-flow__step-label {
  display: none;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  text-align: center;
}

.osc-flow__step-label--brand {
  color: #f98715;
}

.osc-passed--finish {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(249, 135, 21, 0.2);
  color: #f98715;
  border-radius: 50px;
  padding-block: 12px;
  padding-inline: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
}

.osc-passed--finish .osc-passed__line {
  display: block;
  line-height: 1;
}

.osc-passed--finish svg {
  display: none;
}

.osc-flow__branch-label {
  display: none;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.14px;
  white-space: nowrap;
}

.osc-flow__withdraw {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.14px;
  text-align: center;
  white-space: nowrap;
}

.osc-flow__withdraw-arrow {
  display: block;
  position: relative;
  width: 179px;
  height: 0;
  overflow: visible;
  background: none;
  clip-path: none;
}

.osc-flow__withdraw-arrow img {
  position: absolute;
  left: 0;
  top: -5.77px;
  width: 179px;
  height: 11.547px;
  max-width: none;
  display: block;
}

.osc-flow__card--neutral strong {
  color: #fff;
}

.osc-flow__card--muted-pct span:last-child {
  color: #999 !important;
}

/* ========================================
   TWO-STEP: Step1 (upper) + Step2 (lower)
   Figma 14482:50770 — stage 1200×457
   Artboard layout always on; desktop scales via 100cqi / 1200
   ======================================== */
@media (min-width: 900px) {
  .osc-flow--two-step {
    height: calc(457 * 100cqi / 1200 * 1px);
  }
}

.osc-flow--two-step .osc-flow__stage {
  height: 457px;
}

@media (min-width: 900px) {
  .osc-flow--two-step .osc-flow__fit {
    display: contents;
  }
}


.osc-flow--two-step .osc-flow__card--loss {
  left: 99px;
  top: 148px;
}

.osc-flow--two-step .osc-flow__card--start {
  left: 497.5px;
  top: 146px;
  transform: none;
}

.osc-flow--two-step .osc-flow__step1-wrap {
  position: absolute;
  left: 911px;
  top: 85px;
  z-index: 4;
}

.osc-flow--two-step .osc-flow__step1-wrap .osc-flow__card--step1 {
  position: relative;
  left: auto;
  top: auto;
  width: 190px;
  box-sizing: border-box;
}

.osc-flow--two-step .osc-flow__end--step2 {
  position: absolute;
  left: 911px;
  top: 293px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 190px;
}

.osc-flow--two-step .osc-flow__end--step2 .osc-flow__card--step2 {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.osc-flow--two-step .osc-flow__end--step2 .osc-passed {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
}

/* Figma Line 861 / 862 — h-0 + inset -4.5px */
.osc-flow--two-step .osc-flow__line--left {
  display: block;
  position: absolute;
  z-index: 1;
  left: 206px;
  top: 271px;
  width: 377px;
  height: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
}

/* Right segment: start dot right edge → step2 dot left edge (32px dots) */
.osc-flow--two-step .osc-flow__line--right {
  display: block;
  position: absolute;
  z-index: 1;
  left: 615px;
  top: 271px;
  width: 375px;
  height: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
}

.osc-flow--two-step .osc-flow__line--left img,
.osc-flow--two-step .osc-flow__line--right img {
  position: absolute;
  left: 0;
  top: -4.5px;
  width: 100%;
  height: 4.5px;
  max-width: none;
  display: block;
}

/* Figma 14506:52753 — flow-branch-2step-line.png (no dot) + flow-dot-step1.svg */
.osc-flow--two-step .osc-flow__line--branch {
  display: block;
  position: absolute;
  z-index: 2;
  left: 618.835px;
  top: 132.25px;
  width: 248px;
  height: 139px;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

.osc-flow--two-step .osc-flow__line--branch .osc-flow__branch-art {
  display: block;
  width: 248px;
  height: 139px;
  max-width: none;
}

.osc-flow--two-step .osc-flow__dot--loss {
  display: block;
  position: absolute;
  z-index: 2;
  left: 173.95px;
  top: 253px;
  width: 32px;
  height: 32px;
}

.osc-flow--two-step .osc-flow__dot--start {
  display: block;
  position: absolute;
  z-index: 2;
  left: 583.17px;
  top: 253px;
  width: 32px;
  height: 32px;
}

.osc-flow--two-step .osc-flow__dot--step2 {
  display: block;
  position: absolute;
  z-index: 2;
  left: auto;
  right: 177.95px;
  top: 253px;
  width: 32px;
  height: 32px;
}

/* Same orange dot as 1-Step; 2px after branch right (618.835+248), aligned to line y */
.osc-flow--two-step .osc-flow__step1-wrap .osc-flow__dot--step1 {
  display: block;
  position: absolute;
  left: -42px;
  top: 33.5px;
  width: 32px;
  height: 32px;
  overflow: visible;
  z-index: 3;
  background: none;
  pointer-events: none;
}

.osc-flow--two-step .osc-flow__step1-wrap .osc-flow__dot--step1 img {
  position: absolute;
  inset: -114.29%;
  width: 105.143px;
  height: 105.143px;
  max-width: none;
  transform: none;
  display: block;
}

.osc-flow--two-step .osc-flow__dot--sm,
.osc-flow--sprint .osc-flow__dot--sm {
  width: 32px;
  height: 32px;
}

.osc-flow--two-step .osc-flow__dot--sm img,
.osc-flow--sprint .osc-flow__dot--sm img {
  display: block;
  width: 32px;
  height: 32px;
}

.osc-flow--two-step .osc-flow__dot--target {
  display: none;
}

.osc-flow--two-step .osc-flow__step-label {
  display: block;
  position: absolute;
  z-index: 2;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  text-align: center;
}

.osc-flow--two-step .osc-flow__step-label--1 {
  left: 822px;
  top: 156px;
  transform: translateX(-50%);
}

.osc-flow--two-step .osc-flow__step-label--2 {
  left: 807px;
  top: 281px;
  transform: translateX(-50%);
}

/* ========================================
   INSTANT: ∞ target + loss branch labels
   ======================================== */
@media (min-width: 900px) {
  .osc-flow--instant {
    height: calc(450 * 100cqi / 1200 * 1px);
  }

  .osc-flow--instant .osc-flow__fit {
    display: contents;
  }

  .osc-flow--instant .osc-flow__stage {
    height: 450px;
  }

  .osc-flow--instant .osc-flow__card--loss {
    left: 99px;
    top: 148px;
  }

  .osc-flow--instant .osc-flow__card--start {
    left: 50%;
    top: calc(50% - 33.5px);
    transform: translate(-50%, -50%);
  }

  .osc-flow--instant .osc-flow__card--target {
    left: 911px;
    top: 146px;
    width: 190px;
    box-sizing: border-box;
  }

  .osc-flow--instant .osc-flow__line--left,
  .osc-flow--instant .osc-flow__line--right,
  .osc-flow--instant .osc-flow__line--branch {
    display: none !important;
  }

  .osc-flow--instant .osc-flow__dot--sm {
    display: block;
    position: absolute;
    z-index: 3;
    width: 32px;
    height: 32px;
    pointer-events: none;
  }

  .osc-flow--instant .osc-flow__dot--sm img {
    display: block;
    width: 32px;
    height: 32px;
  }

  .osc-flow--instant .osc-flow__dot--loss {
    left: 173.95px;
    top: 253px;
  }

  .osc-flow--instant .osc-flow__dot--start {
    left: 583.17px;
    top: 253px;
  }

  .osc-flow--instant .osc-flow__dot--float {
    left: 434.5px;
    top: 329.5px;
  }

  .osc-flow--instant .osc-flow__dot--daily {
    left: 383.5px;
    top: 396.5px;
  }

  /* Profit target (center 1006, 269) */
  .osc-flow--instant .osc-flow__dot--target {
    left: auto;
    right: 177.95px;
    top: 253px;
  }

  /* Unified diagram SVG — lines + dots share one coordinate space */
  .osc-flow--instant .osc-flow__diagram--desk {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1200px;
    height: 450px;
    pointer-events: none;
    overflow: visible;
  }

  .osc-flow--instant .osc-flow__diagram--desk svg {
    display: block;
    width: 1200px;
    height: 450px;
    overflow: visible;
  }

  .osc-flow--instant .osc-flow__diagram--mob {
    display: none;
  }

  .osc-flow--instant .osc-flow__branch {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    pointer-events: none;
  }

  .osc-flow--instant .osc-flow__branch-dot {
    display: none;
  }

  .osc-flow--instant .osc-flow__branch-label {
    display: block;
    position: absolute;
    z-index: 3;
  }

  /* Labels sit above arm centers */
  .osc-flow--instant .osc-flow__branch-label--float {
    left: 482px;
    top: 320px;
  }

  .osc-flow--instant .osc-flow__branch-label--daily {
    left: 497px;
    top: 386px;
  }
}

/* ========================================
   SPRINT: 5 nodes + finished pill
   Figma 14534:55601 — stage 1200×470
   Artboard layout always on; desktop scales via 100cqi / 1200
   ======================================== */
@media (min-width: 900px) {
  .osc-flow--sprint {
    height: calc(470 * 100cqi / 1200 * 1px);
  }
}

.osc-flow--sprint .osc-flow__fit {
  display: contents;
}

.osc-flow--sprint .osc-flow__stage {
  height: 470px;
}

.osc-flow--sprint .osc-flow__card--loss {
  left: 99px;
  top: 149px;
}

.osc-flow--sprint .osc-flow__card--floating {
  left: calc(50% - 252px);
  top: calc(50% + 106px);
  transform: translate(-50%, -50%);
}

.osc-flow--sprint .osc-flow__card--start {
  left: calc(50% - 82px);
  top: calc(50% - 33.5px);
  transform: translate(-50%, -50%);
}

.osc-flow--sprint .osc-flow__card--target {
  left: calc(50% + 141.5px);
  top: calc(50% - 38px);
  transform: translate(-50%, -50%);
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.osc-flow--sprint .osc-flow__card--target strong {
  color: #fff;
}

.osc-flow--sprint .osc-flow__card--target .osc-flow__pct--up {
  color: #999 !important;
}

.osc-flow--sprint .osc-flow__line--left,
.osc-flow--sprint .osc-flow__line--right {
  display: none;
}

.osc-flow--sprint .osc-flow__rail {
  display: none;
}

/* Segmented rail between dots (32px, r=16) — anchor Y = dot center (269) + 2 */
.osc-flow--sprint .osc-flow__line--seg {
  display: block;
  position: absolute;
  top: 271px;
  height: 0;
  background: none;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.osc-flow--sprint .osc-flow__line--seg img {
  position: absolute;
  left: 0;
  width: 100%;
  top: -4.5px;
  height: 4.5px;
  max-width: none;
  display: block;
}

.osc-flow--sprint .osc-flow__line--seg-1 {
  left: 206px;
  width: 126px;
}

.osc-flow--sprint .osc-flow__line--seg-2 {
  left: 364px;
  width: 138px;
}

.osc-flow--sprint .osc-flow__line--seg-3 {
  left: 534px;
  width: 192px;
}

.osc-flow--sprint .osc-flow__line--seg-4 {
  left: 758px;
  width: 232px;
}

.osc-flow--sprint .osc-flow__dot--loss {
  display: block;
  position: absolute;
  left: 174px;
  top: 253px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__dot--floating {
  display: block;
  position: absolute;
  left: 332px;
  top: 253px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__dot--start {
  display: block;
  position: absolute;
  left: 502px;
  top: 253px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__dot--profit {
  display: block;
  position: absolute;
  left: 726px;
  top: 253px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__dot--end {
  display: block;
  position: absolute;
  left: auto;
  right: 178px;
  top: 253px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__dot--target {
  display: none;
}

.osc-flow--sprint .osc-flow__step-label {
  display: block;
  position: absolute;
  z-index: 2;
}

.osc-flow--sprint .osc-flow__step-label--2 {
  left: 519px;
  top: 293px;
  transform: translateX(-50%);
}

.osc-flow--sprint .osc-flow__step-label--24h {
  left: 1006px;
  top: 293px;
  transform: translateX(-50%);
}

.osc-flow--sprint .osc-flow__withdraw {
  display: flex;
  position: absolute;
  left: 780px;
  top: 283px;
  width: 179px;
  z-index: 2;
}

.osc-flow--sprint .osc-passed--finish {
  position: absolute;
  left: 919px;
  top: 191px;
  margin: 0;
  z-index: 2;
}

/* Mobile: two-step uses a 351-wide artboard like 1-step (readable), not 1200 shrink */
@media (max-width: 899px) {
  /*
   * Same mechanism as 1-step mobile: fixed ~phone artboard + scale(100cqi/351).
   * Taller stage (210) keeps Step1 + Step2 readable at one-step font sizes.
   */
  .osc-flow.osc-flow--two-step {
    position: relative;
    width: 100%;
    height: calc(100cqi * 250 / 351);
    min-height: 0;
    margin-top: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 11.7px;
    container-type: inline-size;
  }

  .osc-flow.osc-flow--two-step .osc-flow__fit {
    display: contents;
  }

  .osc-flow.osc-flow--two-step .osc-flow__stage {
    position: relative;
    left: auto;
    top: auto;
    width: 351px;
    height: 280px;
    margin-inline: auto;
    padding: 0;
    transform: scale(calc(100cqi / 351px));
    transform-origin: top center;
  }

  .osc-flow--two-step .osc-flow__glow {
    right: auto !important;
    bottom: auto !important;
    left: -200px !important;
    top: 140px !important;
    width: 520px !important;
    height: 220px !important;
  }

  .osc-flow--two-step .osc-flow__head {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 3;
  }

  .osc-flow--two-step .osc-flow__head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    font-variant-numeric: normal;
  }

  .osc-flow--two-step .osc-flow__note {
    gap: 4px;
    margin: 0;
    padding-bottom: 28px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.14px;
  }

  .osc-flow--two-step .osc-popover__btn,
  .osc-flow--two-step .osc-popover__btn .osc-info {
    width: 14px;
    height: 14px;
  }

  .osc-flow--two-step .osc-flow__chart {
    display: contents !important;
  }

  .osc-flow--two-step .osc-flow__card {
    position: absolute !important;
    z-index: 1;
    gap: 1.364px;
    margin: 0;
    padding: 5.455px 12px;
    border-radius: 6.819px;
    white-space: nowrap;
    width: auto;
    transform: none !important;
  }

  .osc-flow--two-step .osc-flow__card strong {
    font-size: 6.819px !important;
    line-height: 8.183px !important;
    letter-spacing: -0.0682px !important;
  }

  .osc-flow--two-step .osc-flow__card span {
    font-size: 4.773px !important;
    line-height: 5.455px !important;
    letter-spacing: -0.0477px !important;
  }

  .osc-flow--two-step .osc-flow__card--loss {
    left: 10px !important;
    top: 116px !important;
  }

  .osc-flow--two-step .osc-flow__card--start {
    left: 118px !important;
    top: 116px !important;
  }

  .osc-flow--two-step .osc-flow__step1-wrap {
    position: absolute !important;
    left: 230px !important;
    top: 104px !important;
    z-index: 4 !important;
  }

  .osc-flow--two-step .osc-flow__step1-wrap .osc-flow__card--step1 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 92px !important;
    box-sizing: border-box;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .osc-flow--two-step .osc-flow__end--step2 {
    position: absolute !important;
    left: 230px !important;
    top: 182px !important;
    width: 92px !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .osc-flow--two-step .osc-flow__end--step2 .osc-flow__card--step2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .osc-flow--two-step .osc-flow__line,
  .osc-flow--two-step .osc-flow__dot,
  .osc-flow--two-step .osc-flow__line--branch {
    display: block !important;
    position: absolute;
    pointer-events: none;
  }

  /* Rail Y=164; dots r=6 — seg between dot edges + bleed under dots */
  .osc-flow--two-step .osc-flow__line--left {
    left: 40px !important;
    top: 164px !important;
    width: 115px !important;
    height: 0 !important;
    background: none !important;
  }

  .osc-flow--two-step .osc-flow__line--right {
    left: 167px !important;
    top: 164px !important;
    width: 120px !important;
    height: 0 !important;
    background: none !important;
  }

  .osc-flow--two-step .osc-flow__line--left img,
  .osc-flow--two-step .osc-flow__line--right img {
    position: absolute;
    left: -1.5px;
    width: calc(100% + 3px);
    top: -1.3px;
    height: 2.6px;
    max-width: none;
    display: block;
  }

  /* Step1 branch — width to dot (card left − 4px gap − 12px dot) */
  .osc-flow--two-step .osc-flow__line--branch {
    left: 166.75px !important;
    top: 124px !important;
    width: calc(230px - 4px - 12px - 166.75px) !important;
    height: 40.66px !important;
    z-index: 2;
  }

  .osc-flow--two-step .osc-flow__line--branch .osc-flow__branch-art {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
  }

  .osc-flow--two-step .osc-flow__dot {
    width: 12px !important;
    height: 12px !important;
    z-index: 2;
  }

  .osc-flow--two-step .osc-flow__dot--sm img,
  .osc-flow--two-step .osc-flow__dot--sm svg {
    width: 12px !important;
    height: 12px !important;
  }

  .osc-flow--two-step .osc-flow__dot--loss {
    left: 28px !important;
    top: 158px !important;
  }

  .osc-flow--two-step .osc-flow__dot--start {
    left: 155px !important;
    top: 158px !important;
  }

  .osc-flow--two-step .osc-flow__dot--step2 {
    left: auto !important;
    right: 52px !important;
    top: 158px !important;
  }

  .osc-flow--two-step .osc-flow__step1-wrap .osc-flow__dot--step1 {
    left: -14px !important;
    top: 15px !important;
    overflow: visible;
    z-index: 3;
  }

  .osc-flow--two-step .osc-flow__step1-wrap .osc-flow__dot--step1 img {
    position: absolute;
    inset: -114.29%;
    width: 39.4px !important;
    height: 39.4px !important;
    max-width: none;
  }

  .osc-flow--two-step .osc-flow__step-label {
    display: block !important;
    position: absolute !important;
    z-index: 2;
    margin: 0;
    color: #666 !important;
    font-size: 5.5px;
    font-weight: 600;
    line-height: 7px;
  }

  .osc-flow--two-step .osc-flow__step-label--1 {
    left: calc(230px - 4px - 12px - 3px) !important;
    top: 136px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--two-step .osc-flow__step-label--2 {
    left: 210px !important;
    top: 192px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--two-step .osc-passed,
  .osc-flow--two-step .osc-flow__end--step2 .osc-passed {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 2.34px 3.51px !important;
    border-radius: 5.85px !important;
    font-size: 5px !important;
    line-height: 4.68px !important;
    gap: 1.17px;
    white-space: nowrap;
  }

  .osc-flow--two-step .osc-passed svg {
    width: 8px !important;
    height: 8px !important;
  }

  /* ---- INSTANT: same 351 artboard shrink as two-step ---- */
  .osc-flow.osc-flow--instant {
    position: relative;
    width: 100%;
    height: calc(100cqi * 224 / 351);
    min-height: 0;
    margin-top: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 11.7px;
    container-type: inline-size;
  }

  .osc-flow.osc-flow--instant .osc-flow__fit {
    display: contents;
  }

  .osc-flow.osc-flow--instant .osc-flow__stage {
    position: relative;
    left: auto;
    top: auto;
    width: 351px;
    height: 240px;
    margin-inline: auto;
    padding: 0;
    transform: scale(calc(100cqi / 351px));
    transform-origin: top center;
  }

  .osc-flow--instant .osc-flow__glow {
    right: auto !important;
    bottom: auto !important;
    left: -200px !important;
    top: 140px !important;
    width: 520px !important;
    height: 220px !important;
  }

  .osc-flow--instant .osc-flow__head {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 3;
  }

  .osc-flow--instant .osc-flow__head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    font-variant-numeric: normal;
  }

  .osc-flow--instant .osc-flow__note {
    gap: 4px;
    margin: 0;
    padding-bottom: 28px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.14px;
  }

  .osc-flow--instant .osc-popover__btn,
  .osc-flow--instant .osc-popover__btn .osc-info {
    width: 14px;
    height: 14px;
  }

  .osc-flow--instant .osc-flow__chart {
    display: contents !important;
  }

  .osc-flow--instant .osc-flow__card {
    position: absolute !important;
    z-index: 1;
    gap: 1.364px;
    margin: 0;
    padding: 5.455px 12px;
    border-radius: 6.819px;
    white-space: nowrap;
    width: auto;
    transform: none !important;
  }

  .osc-flow--instant .osc-flow__card strong {
    font-size: 6.819px !important;
    line-height: 8.183px !important;
    letter-spacing: -0.0682px !important;
  }

  .osc-flow--instant .osc-flow__card span {
    font-size: 4.773px !important;
    line-height: 5.455px !important;
    letter-spacing: -0.0477px !important;
  }

  .osc-flow--instant .osc-flow__card--loss {
    left: 10px !important;
    top: 116px !important;
  }

  .osc-flow--instant .osc-flow__card--start {
    left: 118px !important;
    top: 116px !important;
  }

  .osc-flow--instant .osc-flow__card--target {
    left: 230px !important;
    top: 116px !important;
    width: 108px !important;
    box-sizing: border-box;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .osc-flow--instant .osc-flow__line,
  .osc-flow--instant .osc-flow__diagram--desk {
    display: none !important;
  }

  .osc-flow--instant .osc-flow__dot--sm {
    display: block !important;
    position: absolute;
    z-index: 3;
    width: 12px !important;
    height: 12px !important;
    pointer-events: none;
  }

  .osc-flow--instant .osc-flow__dot--sm img,
  .osc-flow--instant .osc-flow__dot--sm svg {
    display: block;
    width: 12px !important;
    height: 12px !important;
  }

  .osc-flow--instant .osc-flow__dot--loss {
    left: 28px !important;
    top: 158px !important;
  }

  .osc-flow--instant .osc-flow__dot--start {
    left: 155px !important;
    top: 158px !important;
  }

  .osc-flow--instant .osc-flow__dot--float {
    left: 99.3px !important;
    top: 187.1px !important;
  }

  .osc-flow--instant .osc-flow__dot--daily {
    left: 80.2px !important;
    top: 212.2px !important;
  }

  .osc-flow--instant .osc-flow__dot--target {
    left: auto !important;
    right: 52px !important;
    top: 158px !important;
  }

  .osc-flow--instant .osc-flow__diagram--mob {
    display: block !important;
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 351px !important;
    height: 240px !important;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
  }

  .osc-flow--instant .osc-flow__diagram--mob svg {
    display: block;
    width: 351px !important;
    height: 240px !important;
    overflow: visible;
  }

  .osc-flow--instant .osc-flow__branch {
    display: block !important;
    position: absolute;
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    pointer-events: none;
  }

  .osc-flow--instant .osc-flow__branch-dot {
    display: none !important;
  }

  .osc-flow--instant .osc-flow__branch-label {
    display: block !important;
    position: absolute !important;
    z-index: 3;
    font-size: 4.773px !important;
    line-height: 5.455px !important;
    letter-spacing: -0.0477px !important;
    color: #fff;
  }

  .osc-flow--instant .osc-flow__branch-label--float {
    left: 113px !important;
    top: 180px !important;
  }

  .osc-flow--instant .osc-flow__branch-label--daily {
    left: 94px !important;
    top: 205px !important;
  }

  .osc-flow--instant .osc-flow__branch-mobile {
    display: none !important;
  }

  /* ---- SPRINT: same 351 artboard shrink as two-step ---- */
  .osc-flow.osc-flow--sprint {
    position: relative;
    width: 100%;
    height: calc(100cqi * 242 / 351);
    min-height: 0;
    margin-top: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 11.7px;
    container-type: inline-size;
  }

  .osc-flow.osc-flow--sprint .osc-flow__fit {
    display: contents;
  }

  .osc-flow.osc-flow--sprint .osc-flow__stage {
    position: relative;
    left: auto;
    top: auto;
    width: 351px;
    height: 310px;
    margin-inline: auto;
    padding: 0;
    transform: scale(calc(100cqi / 351px));
    transform-origin: top center;
  }

  .osc-flow--sprint .osc-flow__glow {
    right: auto !important;
    bottom: auto !important;
    left: -200px !important;
    top: 140px !important;
    width: 520px !important;
    height: 220px !important;
  }

  .osc-flow--sprint .osc-flow__head {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 3;
  }

  .osc-flow--sprint .osc-flow__head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
  }

  .osc-flow--sprint .osc-flow__note {
    gap: 4px;
    margin: 0;
    padding-bottom: 32px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.14px;
  }

  .osc-flow--sprint .osc-popover__btn,
  .osc-flow--sprint .osc-popover__btn .osc-info {
    width: 14px;
    height: 14px;
  }

  .osc-flow--sprint .osc-flow__chart {
    display: contents !important;
  }

  .osc-flow--sprint .osc-flow__card {
    position: absolute !important;
    z-index: 1;
    gap: 1.364px;
    margin: 0;
    padding: 5.455px 10px;
    border-radius: 6.819px;
    white-space: nowrap;
    width: auto;
    transform: none !important;
  }

  .osc-flow--sprint .osc-flow__card strong {
    font-size: 6.819px !important;
    line-height: 8.183px !important;
    letter-spacing: -0.0682px !important;
  }

  .osc-flow--sprint .osc-flow__card span {
    font-size: 4.773px !important;
    line-height: 5.455px !important;
    letter-spacing: -0.0477px !important;
  }

  .osc-flow--sprint .osc-flow__card--loss {
    left: 34px !important;
    top: 141px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__card--floating {
    left: 86px !important;
    top: 202px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__card--start {
    left: 138px !important;
    top: 140px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__card--target {
    left: 216px !important;
    top: 141px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__line--seg {
    display: none !important;
  }

  /* Rail: loss center (34) → end center (321); Y = dot top 182 + 6 */
  .osc-flow--sprint .osc-flow__rail {
    display: block !important;
    position: absolute;
    left: 34px !important;
    top: 188px !important;
    width: 287px !important;
    height: 1.5px !important;
    background: rgba(255, 255, 255, 0.14);
    z-index: 1;
    transform: translateY(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__dot {
    display: block !important;
    position: absolute;
    width: 12px !important;
    height: 12px !important;
    z-index: 2;
  }

  .osc-flow--sprint .osc-flow__dot--sm svg,
  .osc-flow--sprint .osc-flow__dot--sm img {
    display: block;
    width: 12px !important;
    height: 12px !important;
  }

  .osc-flow--sprint .osc-flow__dot--loss {
    left: 28px !important;
    top: 182px !important;
  }

  .osc-flow--sprint .osc-flow__dot--floating {
    left: 80px !important;
    top: 182px !important;
  }

  .osc-flow--sprint .osc-flow__dot--start {
    left: 132px !important;
    top: 182px !important;
  }

  .osc-flow--sprint .osc-flow__dot--profit {
    left: 210px !important;
    top: 182px !important;
  }

  .osc-flow--sprint .osc-flow__dot--end {
    left: auto !important;
    right: 24px !important;
    top: 182px !important;
  }

  .osc-flow--sprint .osc-flow__step-label {
    display: block !important;
    position: absolute !important;
    z-index: 2;
    margin: 0;
    font-size: 5.5px;
    font-weight: 600;
    line-height: 7px;
    color: #f98715 !important;
  }

  .osc-flow--sprint .osc-flow__step-label--2 {
    left: 138px !important;
    top: 198px !important;
    transform: translateX(-50%) !important;
  }

  .osc-flow--sprint .osc-flow__step-label--24h {
    left: 321px !important;
    top: 198px !important;
    transform: translateX(-50%) !important;
  }

  /* Match PC: arrow sits in the gap between $51,500 (profit) and end / 24 Hour */
  .osc-flow--sprint .osc-flow__withdraw {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: absolute !important;
    /* PC: left 780 / width 179 between profit 742 and end 1006 → same ratios on 351 artboard */
    left: 231px !important;
    top: 196px !important;
    width: 72px !important;
    transform: none !important;
    z-index: 2;
    font-size: 5px;
    line-height: 6px;
  }

  .osc-flow--sprint .osc-flow__withdraw-arrow {
    width: 72px;
    height: 0;
  }

  .osc-flow--sprint .osc-flow__withdraw-arrow img {
    width: 72px;
    height: 5.2px;
    top: -2.6px;
  }

  /* Above the 24 Hour / end dot; grows left into space freed by shifting $50k/$51.5k */
  .osc-flow--sprint .osc-passed--finish {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    position: absolute !important;
    left: auto !important;
    right: 8px !important;
    top: 139px !important;
    transform: none !important;
    margin: 0 !important;
    padding-block: 12px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
    font-size: 5px !important;
    letter-spacing: 0 !important;
    width: max-content;
    max-width: 92px;
    text-align: center;
    z-index: 3;
  }

  .osc-flow--sprint .osc-passed--finish .osc-passed__line {
    line-height: 1 !important;
  }
}


.osc-flow__branch-mobile {
  display: none;
}