/* ==========================================================================
   Mockup layer: the "why now" section, motion, and the overscroll fix.
   ========================================================================== */

/* Rubber-band fix: dark above the fold, paper below, so the Mac bounce never
   flashes the wrong colour at either end of the page. */
html { background: linear-gradient(180deg, #15161b 0%, #15161b 50%, #fafaf7 50%, #fafaf7 100%); }

/* --------------------------------------------------- sticky mobile CTA --- */

.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 247, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(102%);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.mcta.is-on { transform: none; }
.mcta__k { font: 600 13.5px var(--sans); letter-spacing: -.01em; color: var(--ink); }
.mcta .btn { min-height: 40px; padding: 9px 18px; font-size: 14px; }

@media (max-width: 899px) {
  .mcta { display: flex; }
  /* the bar must never cover the page's own final actions */
  .last, .footer { scroll-margin-bottom: 70px; }
  body { padding-bottom: 64px; }
}

/* ------------------------------------------------------------- why now --- */

.why {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.why > * { min-width: 0; }

.why__link { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 1px; }
.why__link:hover { border-bottom-color: #fff; }

/* The swap ledger: what the split bought, struck through as software takes it. */
.swap {
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  overflow: hidden;
}

.swap__head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-dark-2);
  background: rgba(255, 255, 255, .03);
}
.swap__k {
  font: 500 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.swap__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-dark-2);
  align-items: baseline;
}

.swap__old {
  position: relative;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .55);
  width: fit-content;
}
/* the strike draws itself when the row reveals */
.swap__old::after {
  content: "";
  position: absolute;
  left: 0; top: 54%;
  height: 1.5px;
  width: 100%;
  background: rgba(255, 255, 255, .75);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.swap__row.is-in .swap__old { color: rgba(255, 255, 255, .38); }
.swap__row.is-in .swap__old::after { transform: scaleX(1); }

.swap__new {
  font: 600 14.5px var(--sans);
  letter-spacing: -.01em;
  color: #fff;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .45s ease .28s, transform .45s cubic-bezier(.22, .61, .36, 1) .28s;
}
.swap__row.is-in .swap__new { opacity: 1; transform: none; }

/* the row we deliberately do NOT strike */
.swap__stay { font-size: 14.5px; color: #fff; }
.swap__row--keep { background: rgba(255, 255, 255, .04); }
.swap__new--keep { color: rgba(255, 255, 255, .75); font-weight: 500; }

.swap__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .05);
}
.swap__total span {
  font: 500 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.swap__total b {
  font: 800 34px var(--sans);
  letter-spacing: -.045em;
  color: #fff;
}
.swap__total b i { font: 500 15px var(--sans); font-style: normal; color: rgba(255, 255, 255, .55); }

@media (max-width: 899px) {
  .why { grid-template-columns: 1fr; gap: 34px; }
  .swap__row { grid-template-columns: 1fr; gap: 5px; padding: 13px 18px; }
  /* One column: the replacement must never hide behind its animation, and it
     gets an arrow so the old->new relationship survives the stacking. */
  .swap__new { opacity: 1; transform: none; transition: none; }
  .swap__new:not(.swap__new--keep)::before { content: "\2192\00a0"; color: rgba(255, 255, 255, .45); font-weight: 500; }
  .swap__head { justify-content: flex-start; }
  .swap__k--r { display: none; }
  .swap__k::after { content: " \2192 replaced by"; text-transform: none; letter-spacing: .06em; }
  .swap__total b { font-size: 27px; }
}

/* --------------------------------------------------------------- motion --- */

/* Scroll reveal — same vocabulary as atllas.com. Hidden state only exists
   once JS has claimed the page, so no-JS renders everything. */
.js-reveal .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .rv.is-in { opacity: 1; transform: none; }

/* Count-up target keeps layout stable while ticking */
.keep__v { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv { opacity: 1; transform: none; }
  .swap__old::after { transition: none; }
  .swap__new { transition: none; opacity: 1; transform: none; }
}