/* ==========================================================================
   THE REPLAY ("Your capital. Your rules.", replay.js): the master account's
   months, replayed on the visitor's money. The left side is one sentence
   whose blanks are the controls. The right side is the answer: a gold
   dot-matrix figure and a staircase of month-end balances, losing months
   capped in ember, over a dashed line for what they put in. Gold is
   reserved for money: the amount, the balances, the price and the buy
   button.
   ========================================================================== */
.rp { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--r-window); background: var(--deep-glass); box-shadow: var(--sh-modal); overflow: hidden; }
/* a hairline of gold over the answer */
.rp::before { content: ""; position: absolute; left: 48%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); opacity: .7; }
.rp__sample.sample-tag { top: 14px; right: 16px; bottom: auto; z-index: var(--z-raised); }
.rp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the sentence */
.rp__ask { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.6vw, 52px); box-shadow: inset -1px 0 0 var(--edge-soft); }
.rp__w { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.2; color: var(--text-3); }
.rp__amt { display: block; margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(46px, 5.2vw, 72px); font-weight: 500; line-height: 1; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.rp__ask .range-scale { margin: 10px 0 12px; }
.rp__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rp__seg button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; }
.rp__seg .emblem { width: 22px; height: 22px; margin: -2px 0; }
.rp__seg .emblem::before { display: none; }
.rp__seg .emblem > img { animation: none; filter: none; }
.rp__seg button[aria-checked="false"] .emblem { opacity: .6; }
.rp__note { margin-top: -4px; font-size: 13px; line-height: 1.5; color: var(--text-4); }
/* where the months come from, settled at the foot of the question */
.rp__src { margin-top: auto; padding-top: 28px; }
.rp__src > p:first-child { max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.rp__src a { color: var(--text-hi); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) { .rp__src a:hover { text-decoration-color: var(--text-hi); } }

/* the answer */
.rp__out { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.6vw, 52px); }
.rp__big { margin: 10px 0 8px; font-family: var(--font-dot); font-size: clamp(58px, 7.2vw, 104px); font-weight: 800; line-height: .92; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 22px rgba(242, 199, 92, .22)); }
.rp__gain { font-size: 15px; color: var(--text-3); }
.rp__gain b, .rp__gain span { font-family: var(--font-mono); font-weight: 500; }
.rp__gain span:first-of-type { color: var(--text-hi); }

/* the staircase: one step a month, each step the balance at that month's end */
.rp__steps { --H: 170px; margin-top: 34px; }
.rp__chart, .rp__months { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.rp__chart { position: relative; height: var(--H); }
.rp__col { position: relative; }
.rp__bar { position: absolute; inset: 0; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(242, 199, 92, .42), rgba(176, 128, 42, .05)); transform: scaleY(var(--h, 0)); transform-origin: 50% 100%; transition: transform .5s var(--ease-out); }
.rp__cap { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold-hi); box-shadow: 0 0 10px rgba(242, 199, 92, .55); transform: translateY(calc(var(--h, 0) * var(--H) * -1)); transition: transform .5s var(--ease-out); }
.rp__r { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--up); }
.rp__col.is-down .rp__bar { opacity: .65; }
.rp__col.is-down .rp__cap { background: var(--down); box-shadow: 0 0 10px rgba(240, 132, 102, .5); }
.rp__col.is-down .rp__r { color: var(--down); }
.rp__col.is-now .rp__bar { background: linear-gradient(180deg, rgba(255, 231, 163, .72), rgba(242, 199, 92, .1)); }
/* what they put in: the dashed line every step is measured against */
.rp__base { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-raised); height: 1px; background: repeating-linear-gradient(90deg, rgba(186, 214, 247, .42) 0 4px, transparent 4px 9px); transform: translateY(calc(var(--h, 0) * var(--H) * -1)); transition: transform .5s var(--ease-out); }
.rp__base span { position: absolute; left: 0; bottom: 6px; padding: 2px 7px; border-radius: var(--r-badge); white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); background: rgba(5, 6, 15, .82); }
.rp__months { margin-top: 9px; }
.rp__months span { text-align: center; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.25; color: var(--text-4); }
.rp__months em { display: block; font-style: normal; font-size: 9.5px; opacity: .8; }

/* the climb: held flat until the card is on screen, then the steps rise one after another */
.rp--pre .rp__bar { transform: scaleY(0); }
.rp--pre .rp__cap, .rp--pre .rp__base { transform: translateY(0); }
.rp--pre .rp__r { opacity: 0; }
.rp--climb .rp__bar, .rp--climb .rp__cap { transition-duration: .8s; transition-delay: calc(var(--i) * 55ms); }
.rp__r { transition: opacity .3s var(--ease-out) .6s; }

.rp__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 28px 0 0; border-radius: var(--r-card); overflow: hidden; background: var(--edge-soft); box-shadow: var(--sh-hair); }
.rp__facts div { padding: 12px 14px; background: var(--bg-2); }
.rp__facts dt { font-size: 12px; color: var(--text-4); }
.rp__facts dd { margin: 5px 0 0; font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--text-hi); }
.rp__facts dd small { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--text-4); }

.rp__punch { margin-top: 28px; font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text-hi); }
.rp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 14px; }
.rp__price { font-size: 13px; line-height: 1.4; color: var(--text-3); }
.rp__price b { margin-right: 4px; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--gold-hi); }
.rp__price small { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.rp__price svg { flex: none; width: 14px; height: 14px; color: var(--gold); }
.rp__fine { margin-top: 14px; max-width: 64ch; font-size: 12px; line-height: 1.55; color: var(--text-4); }

@media (max-width: 1080px) {
  .rp { grid-template-columns: minmax(0, 1fr); }
  .rp__ask { box-shadow: inset 0 -1px 0 var(--edge-soft); }
  .rp::before { left: 22%; right: 22%; }
}
@media (max-width: 760px) {
  .rp__ask, .rp__out { padding: 24px 18px; }
  .rp__seg { display: flex; width: 100%; }
  .rp__tail { display: none; } /* under a full-width switch it would sit alone; the note names the preset */
  .rp__seg button { flex: 1; justify-content: center; gap: 6px; padding: 0 6px; font-size: 13.5px; }
  .rp__seg .emblem { width: 20px; height: 20px; }
  .rp__steps { --H: 130px; margin-top: 28px; }
  .rp__chart, .rp__months { gap: 4px; }
  /* a phone keeps the labels that matter: the best, the worst and this month */
  .rp__col:not(.is-best):not(.is-worst):not(.is-now) .rp__r { display: none; }
  .rp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp__facts div:last-child { grid-column: 1 / -1; }
  .rp__buy .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rp__bar, .rp__cap, .rp__base, .rp__r { transition: none; } }