/* ==========================================================================
   "Why Use Cryptocurrency" — motion & layout upgrade
   Loaded after styles.css. Overrides only, nothing removed.
   ========================================================================== */

/* ==========================================================================
   0b — background: the words RAIN instead of drifting sideways
   Each word keeps its own vertical start (--y), horizontal lane (--x),
   fall distance (--fall), speed and opacity. Opacity fades to 0 at both ends,
   so the loop restart is invisible.
   ========================================================================== */
.whyusecrypto .why-freedom-backdrop {
  inset: 0;
  z-index: 0;
}

/* The two rails ARE the empty side margins next to the 1180px content column,
   so the words stay visible instead of disappearing behind the cards. */
.whyusecrypto .why-freedom-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100% - 1180px) / 2));
  overflow: hidden;
}

.whyusecrypto .why-freedom-rail--left { left: 0; right: auto; }
.whyusecrypto .why-freedom-rail--right { right: 0; left: auto; }

/* One size, one speed, evenly phased. 16 words per side, step 20 s,
   right side offset by half a step (10 s) → left, right, left, right …
   Every word therefore sits on its own height: no overlap possible. */
.whyusecrypto .why-freedom-rail span,
.whyusecrypto .why-freedom-rail--left span,
.whyusecrypto .why-freedom-rail--left span:nth-child(even) {
  top: -10%;
  left: 0;
  right: 0;
  width: auto;
  padding: 0 9%;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
  opacity: 0;
  font-size: clamp(17px, 1.15vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  filter: blur(0.3px);
  animation: why-word-fall 320s linear infinite;
  animation-delay: calc(var(--k, 0) * -20s);
  will-change: top, opacity;
}

.whyusecrypto .why-freedom-rail--right span,
.whyusecrypto .why-freedom-rail--right span:nth-child(even) {
  left: 0;
  right: 0;
  text-align: center;
  animation-delay: calc(var(--k, 0) * -20s - 10s);
}

@media (prefers-reduced-motion: reduce) {
  .whyusecrypto .why-freedom-rail span { animation: none; opacity: 0; }
}

/* falls the full height of the page, opacity 0 at both ends so the loop is invisible */
@keyframes why-word-fall {
  0% {
    top: -10%;
    opacity: 0;
  }
  3% {
    opacity: calc(var(--op, 0.18) * 0.7);
  }
  12% {
    opacity: var(--op, 0.18);
  }
  90% {
    opacity: calc(var(--op, 0.18) * 0.85);
  }
  100% {
    top: 104%;
    opacity: 0;
  }
}

/* below ~1400px there is no visible gutter left — the words would sit under the content */
@media (max-width: 1400px) {
  .whyusecrypto .why-freedom-backdrop { display: none; }
}


/* FIX: styles.css gives #header AND .hero the same z-index (2), and .hero comes
   later in the DOM — so it painted over the open mobile dropdown. Was only
   visible as "menu button turns into an X but nothing appears". */
.whyusecrypto > #header {
  z-index: 1000;
}
.whyusecrypto .why-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--why-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.whyusecrypto .why-block-title {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.whyusecrypto .why-block-lead {
  max-width: 76ch;
  margin: 12px 0 0;
  color: var(--why-muted);
  font-size: 1rem;
  line-height: 1.62;
}

/* scroll progress bar, colour-coded by narrative stage */
.why-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}

.why-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #ff625b, #f7b244, #b696ff);
  box-shadow: 0 0 12px rgba(247, 178, 68, 0.5);
  transition: width 120ms linear;
}

/* ==========================================================================
   1 — HERO: supply comparison
   ========================================================================== */
.why-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 15px;
  align-content: center;
}

.why-supply {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(247, 178, 68, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(247, 178, 68, 0.09), rgba(255, 255, 255, 0.015)),
    rgba(10, 13, 15, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.why-supply__row {
  position: relative;
  display: grid;
  gap: 2px;
  padding-right: 46px;
}

/* no corner badge on the fiat row any more — the figure itself is now ∞ */
.why-supply__row--fiat { padding-right: 0; }

.why-supply__tag {
  color: var(--why-muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "+1 Million" popping up every 3 seconds, game-score style */
.why-supply__pop {
  display: inline-block;
  margin-left: 8px;
  color: #61ef9d;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(97, 239, 157, 0.75);
  opacity: 0;
  animation: why-gain 3s ease-out infinite;
}

@keyframes why-gain {
  0%        { opacity: 0; transform: translateY(5px) scale(0.72); }
  12%       { opacity: 1; transform: translateY(-1px) scale(1.15); }
  24%       { opacity: 1; transform: translateY(-4px) scale(1); }
  58%       { opacity: 1; transform: translateY(-12px) scale(1); }
  78%, 100% { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

.why-supply__num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.why-supply__row--fiat .why-supply__num {
  color: #ff9d90;
  text-shadow: 0 0 22px rgba(255, 98, 91, 0.35);
}

/* the endless supply is shown as a large infinity instead of a number */
.why-supply__num--inf {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 0.92;
  text-shadow: 0 0 26px rgba(255, 98, 91, 0.45);
}

.why-supply__row--btc .why-supply__num {
  color: var(--why-gold);
  text-shadow: 0 0 22px rgba(247, 178, 68, 0.3);
}

.why-supply__note {
  color: #98a4ab;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.why-supply__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 98, 91, 0.4), rgba(255, 255, 255, 0.12), rgba(247, 178, 68, 0.4));
}

.why-supply__hint {
  margin: 4px 0 0;
  color: #7d8a91;
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* animated padlock on the Bitcoin side */
.why-supply__lock {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 22px;
  height: 22px;
  color: var(--why-gold);
  opacity: 0.85;
  animation: why-lock-pulse 3.6s ease-in-out infinite;
}

@keyframes why-lock-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* crossed-out infinity */
.why-supply__inf {
  position: absolute;
  top: 14px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #ff9d90;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}

.why-supply__inf::after {
  content: "";
  position: absolute;
  width: 130%;
  height: 2px;
  border-radius: 2px;
  background: #ff625b;
  box-shadow: 0 0 10px rgba(255, 98, 91, 0.8);
  transform: rotate(-28deg);
  animation: why-inf-glow 2.6s ease-in-out infinite;
}

@keyframes why-inf-glow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (min-width: 1020px) {
  .whyusecrypto .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
    gap: 32px;
    align-items: center;
  }

  .whyusecrypto .hero h1 {
    white-space: normal;
    text-align: left;
    font-size: clamp(2rem, 3vw, 2.85rem);
    line-height: 1.04;
  }

  .whyusecrypto .hero p { justify-content: flex-start; }
}

/* ==========================================================================
   2 — sound money ticker
   ========================================================================== */
.why-ticker {
  position: relative;
  grid-column: span 12;
  margin: 0;
  padding: 11px 0;
  overflow: hidden;
  border: 1px solid rgba(247, 178, 68, 0.22);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(52, 42, 21, 0.6), rgba(24, 25, 22, 0.75), rgba(52, 42, 21, 0.6));
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.why-ticker__track {
  display: flex;
  width: max-content;
  gap: 30px;
  animation: why-ticker-run 38s linear infinite;
}

.why-ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffd79a;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.why-ticker__track span::before {
  content: "◆";
  color: var(--why-gold);
  font-size: 0.6rem;
}

@keyframes why-ticker-run {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   3 — card motion: staggered reveal + hover
   ========================================================================== */
.whyusecrypto .container > .card {
  animation: why-card-in 0.7s cubic-bezier(0.22, 0.68, 0.32, 1) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}

@keyframes why-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* accent edge lights up when the card lands */
.whyusecrypto .container > .card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--why-accent);
  opacity: 0;
  animation: why-edge-glow 1.1s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 85ms + 260ms);
}

@keyframes why-edge-glow {
  0% { opacity: 0; }
  35% { opacity: 1; box-shadow: 0 0 18px var(--why-accent); }
  100% { opacity: 0; }
}

/* generic card FX layer */
.why-fx {
  position: relative;
  display: block;
  margin: 14px 0 4px;
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
}

.why-fx__label {
  display: block;
  margin: 0 0 8px;
  color: #8b98a0;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   3a — A: banknote that decays  ·  B: "+1" printing rain
   ========================================================================== */
.why-fiat-visual {
  position: relative;
  height: 106px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 98, 91, 0.12), transparent 70%);
}

.why-rain {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0.5;
}

.why-rain i {
  position: absolute;
  top: -14px;
  color: rgba(255, 98, 91, 0.22);
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
  animation: why-rain-fall linear infinite;
}

@keyframes why-rain-fall {
  0% { transform: translateY(-16px); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(110px); opacity: 0; }
}

.why-bill {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 168px;
  margin-left: -84px;
  animation: why-bill-cycle 12s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* The note now has its own life cycle: intact → shatters → gone → back again.
   The 12s timing is shared with the shards below. */
@keyframes why-bill-cycle {
  0%, 34%   { transform: rotate(-1.5deg) translateY(0) scale(1); opacity: 1; filter: none; }
  44%       { transform: rotate(0deg) translateY(1px) scale(0.99); opacity: 0.88; filter: blur(0.4px); }
  52%       { transform: rotate(2deg) translateY(6px) scale(0.94); opacity: 0; filter: blur(2px); }
  60%, 84%  { transform: rotate(2deg) translateY(10px) scale(0.9); opacity: 0; }
  92%       { transform: rotate(-1deg) translateY(-2px) scale(1.02); opacity: 0.55; filter: none; }
  100%      { transform: rotate(-1.5deg) translateY(0) scale(1); opacity: 1; }
}

.why-bill__tx { animation: none; }

/* Nine paper shards sitting exactly on the note; they break away and fall. */
.why-bill__shards {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 168px;
  height: 76px;
  margin-left: -84px;
  pointer-events: none;
}

.why-bill__shards i {
  position: absolute;
  left: calc(var(--x, 0) * 33.33%);
  top: calc(var(--y, 0) * 33.33%);
  width: 33.6%;
  height: 33.6%;
  border: 1px solid rgba(180, 220, 190, 0.3);
  border-radius: 3px;
  background: linear-gradient(140deg, #3d6450, #223d2e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: why-shard-fall 12s cubic-bezier(0.42, 0.05, 0.62, 1) infinite;
  animation-delay: calc(var(--k, 0) * 0.05s);
}

@keyframes why-shard-fall {
  0%, 36%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(1); }
  40%       { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  58%       { opacity: 1; transform: translate(calc(var(--dx, 10px) * 0.5), 24px) rotate(calc(var(--rot, 10deg) * 0.5)); }
  80%       { opacity: 0.8; transform: translate(var(--dx, 10px), 76px) rotate(var(--rot, 10deg)); }
  91%, 100% { opacity: 0; transform: translate(calc(var(--dx, 10px) * 1.3), 112px) rotate(calc(var(--rot, 10deg) * 1.4)); }
}

.why-bill__dust {
  position: absolute;
  left: 50%;
  top: 66px;
  width: 150px;
  margin-left: -75px;
  height: 30px;
}

.why-bill__dust i {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 140, 120, 0.75);
  animation: why-dust-rise 12s ease-out infinite;
}

/* drifting crumbs ride along with the falling shards */
@keyframes why-dust-rise {
  0%, 44%   { transform: translate(0, 0); opacity: 0; }
  54%       { opacity: 0.85; transform: translate(calc(var(--dx, 10px) * 0.4), 8px); }
  82%       { opacity: 0.5; transform: translate(var(--dx, 10px), 30px); }
  100%      { opacity: 0; transform: translate(calc(var(--dx, 10px) * 1.3), 44px); }
}

/* ==========================================================================
   3b — C: the chain fills block by block  ·  D: the 21M cap
   Visibility is driven by .is-on, set from the page script so that all blocks
   share ONE timeline and reset together.
   ========================================================================== */
.why-chain {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
}

.why-chain__block {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: scale(0.55);
  border: 1px solid rgba(247, 178, 68, 0.45);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(247, 178, 68, 0.22), rgba(247, 178, 68, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 230ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 230ms ease, box-shadow 230ms ease;
}

.why-chain__block::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(247, 178, 68, 0.5) 0 100%) 0 0 / 60% 2px no-repeat,
    linear-gradient(90deg, rgba(247, 178, 68, 0.35) 0 100%) 0 5px / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(247, 178, 68, 0.25) 0 100%) 0 10px / 80% 2px no-repeat;
  animation: why-hash-shimmer 2.4s ease-in-out infinite;
}

@keyframes why-hash-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.why-chain__block.is-on {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(247, 178, 68, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(247, 178, 68, 0.32);
}

.why-chain__block.is-fresh {
  border-color: #ffd79a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(247, 178, 68, 0.55);
}

.why-cap {
  position: relative;
  margin-top: 10px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.why-cap__fill {
  display: block;
  height: 100%;
  width: 95%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247, 178, 68, 0.35), #f7b244);
  transform-origin: 0 50%;
  animation: why-cap-fill 2.4s cubic-bezier(0.22, 0.68, 0.32, 1) 0.3s both;
}

@keyframes why-cap-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.why-cap__lock {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 14px;
  height: 14px;
  color: #1a1408;
  transform: translateY(-50%) scale(0.6);
  opacity: 0;
  animation: why-lock-snap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.7s both;
}

@keyframes why-lock-snap {
  0% { opacity: 0; transform: translateY(-50%) scale(1.5); }
  60% { opacity: 1; transform: translateY(-50%) scale(0.92); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

.why-cap__cap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 5%;
  background: repeating-linear-gradient(135deg, rgba(255, 98, 91, 0.55) 0 4px, rgba(255, 98, 91, 0.15) 4px 8px);
}

.why-cap__note {
  display: block;
  margin-top: 7px;
  color: #98a4ab;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   3c — E: altcoins stop mattering — counted, not guessed
   ========================================================================== */
.why-grave {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 26px;
}

.why-grave__coin {
  position: relative;
  display: grid;
  min-width: 42px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  border: 1px solid rgba(85, 198, 244, 0.45);
  border-radius: 6px;
  background: rgba(85, 198, 244, 0.07);
  color: #9fd8f2;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: opacity 480ms ease, filter 480ms ease, transform 480ms ease, border-color 480ms ease, background 480ms ease;
}

.why-grave__coin.is-dead {
  opacity: 0.3;
  filter: grayscale(1);
  transform: scale(0.94);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: #6f7c84;
}

.why-grave__coin.is-dead::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ff625b;
  font-size: 0.78rem;
  font-weight: 900;
}

.why-grave__coin--survivor {
  min-width: 30px;
  padding: 0 5px;
  border-color: rgba(247, 178, 68, 0.85);
  background: linear-gradient(160deg, rgba(247, 178, 68, 0.3), rgba(247, 178, 68, 0.06));
  box-shadow: 0 0 16px rgba(247, 178, 68, 0.35);
  animation: why-coin-survive 3.2s ease-in-out infinite;
}

.why-grave__coin--survivor img {
  display: block;
  width: 15px;
  height: 15px;
}

@keyframes why-coin-survive {
  0%, 100% { box-shadow: 0 0 12px rgba(247, 178, 68, 0.28); }
  50% { box-shadow: 0 0 22px rgba(247, 178, 68, 0.5); }
}

.why-grave__count {
  display: block;
  margin: 8px 0 0;
  color: #8b98a0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.why-grave__count b {
  color: #ffd79a;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3d — F: how a stablecoin exports the inflation
   Pressure builds up, each newly dollarised market absorbs a share of it and
   the correction is pushed further into the future. Driven from the page script.
   ========================================================================== */
.why-peg {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(255, 98, 91, 0.2);
  border-radius: 12px;
  background: radial-gradient(circle at 18% 0%, rgba(255, 98, 91, 0.12), transparent 72%);
}

.why-peg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.why-peg__label {
  color: #8b98a0;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.why-peg__deadline {
  color: #cbbfae;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.why-peg__deadline b {
  color: #ff9d90;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.why-peg__bar {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.why-peg__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb26b, #ff625b);
  box-shadow: 0 0 14px rgba(255, 98, 91, 0.45);
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.why-peg__bar i.is-high {
  box-shadow: 0 0 20px rgba(255, 98, 91, 0.85), 0 0 0 1px rgba(255, 160, 120, 0.6);
}

.why-peg__bar i.is-relieved {
  animation: why-peg-relief 820ms ease-out;
  transition: width 240ms cubic-bezier(0.22, 0.68, 0.32, 1);
}

@keyframes why-peg-relief {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.75); }
  100% { filter: brightness(1); }
}

.why-peg__markets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.why-peg__market {
  display: grid;
  min-width: 28px;
  height: 22px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(85, 198, 244, 0.28);
  border-radius: 6px;
  color: rgba(158, 231, 255, 0.4);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.why-peg__market.is-on {
  color: #06222c;
  border-color: #55c6f4;
  background: linear-gradient(160deg, #bdeaff, #55c6f4);
  box-shadow: 0 0 12px rgba(85, 198, 244, 0.45);
  transform: translateY(-1px);
}

.why-peg__note {
  margin: 0;
  color: #7d8a91;
  font-size: 0.6rem;
  line-height: 1.4;
}

.why-peg__note b { color: #ffd79a; }

/* ==========================================================================
   3e — G: three runs — CBDC blocked, Bitcoin passes, PIVX passes unseen
   ========================================================================== */
.why-cbdc {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 34%, rgba(255, 98, 91, 0.1), transparent 74%);
}

.why-cbdc__stage {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
}

.why-cbdc__wallet {
  position: relative;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #dfe5e8;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.why-cbdc__track {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  margin: 0 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 12px);
}

.why-cbdc__barrier {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 5px;
  height: 44px;
  margin-top: -22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ff625b, #a3271f);
  box-shadow: 0 0 16px rgba(255, 98, 91, 0.6);
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.why-cbdc[data-run="cbdc"] .why-cbdc__barrier { transform: translateX(-50%) scaleY(1); }

/* Flashes at the exact moment the capsule hits the barrier. The timing is
   tied to why-tok-block (4.2s): the token is closest to the line at ~34%. */
.why-cbdc__reject {
  position: absolute;
  left: 50%;
  top: 33px;
  z-index: 5;
  padding: 2px 7px;
  border: 1px solid rgba(255, 98, 91, 0.55);
  border-radius: 999px;
  background: rgba(38, 6, 5, 0.94);
  color: #ff9d90;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.86);
}

.why-cbdc[data-run="cbdc"] .why-cbdc__reject {
  animation: why-cbdc-reject 4.2s ease-out forwards;
}

@keyframes why-cbdc-reject {
  0%, 28%  { opacity: 0; transform: translateX(-50%) scale(0.86); }
  33%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
  36%      { transform: translateX(calc(-50% - 2px)) scale(1); }
  39%      { transform: translateX(calc(-50% + 2px)) scale(1); }
  42%      { transform: translateX(-50%) scale(1); }
  80%      { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.why-cbdc__token {
  position: absolute;
  left: 50px;
  top: 50%;
  z-index: 4;
  display: grid;
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  margin-top: -10px;
  place-items: center;
  border-radius: 999px;
  color: #06222c;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: #9ee7ff;
  box-shadow: 0 0 14px rgba(158, 231, 255, 0.7);
  opacity: 0;
}

.why-cbdc[data-run="cbdc"] .why-cbdc__token {
  background: #ffb3ac;
  box-shadow: 0 0 14px rgba(255, 98, 91, 0.7);
  animation: why-tok-block 4.2s ease-in-out forwards;
}

.why-cbdc[data-run="btc"] .why-cbdc__token {
  animation: why-tok-pass 5.6s ease-in-out forwards;
}

.why-cbdc[data-run="pivx"] .why-cbdc__token {
  background: linear-gradient(120deg, #d9c9ff, #b696ff);
  box-shadow: 0 0 16px rgba(182, 150, 255, 0.8);
  animation: why-tok-pass 5.6s ease-in-out forwards;
}

/* Bitcoin and PIVX show the bare logo — no pill, no circle, no glow plate */
.why-cbdc[data-run="btc"] .why-cbdc__token,
.why-cbdc[data-run="pivx"] .why-cbdc__token {
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  margin-top: -10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.why-cbdc__logo {
  display: block;
  width: 18px;
  height: 18px;
}

/* CRITICAL: a display rule would otherwise defeat the [hidden] attribute */
.why-cbdc__logo[hidden],
.why-cbdc__label[hidden] {
  display: none !important;
}

.why-cbdc__label {
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

@keyframes why-tok-block {
  0% { left: 50px; opacity: 0; }
  8% { opacity: 1; }
  38% { left: calc(50% - 20px); opacity: 1; }
  50% { left: calc(50% - 46px); opacity: 1; }
  62% { left: calc(50% - 34px); opacity: 0.85; }
  78% { left: calc(50% - 42px); opacity: 0.5; }
  100% { left: calc(50% - 42px); opacity: 0; }
}

@keyframes why-tok-pass {
  0% { left: 50px; opacity: 0; }
  8% { opacity: 1; }
  86% { left: calc(100% - 58px); opacity: 1; }
  100% { left: calc(100% - 58px); opacity: 0; }
}

.why-cbdc__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.why-cbdc__cam {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: #93a3ab;
}

.why-cbdc__cam svg { width: 22px; height: 22px; }

/* The record light has to be the first thing the eye lands on: bigger, warmer,
   with a hot glow and a ring that keeps pulsing outward. */
.why-cbdc__rec {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b32;
  box-shadow:
    0 0 0 2px rgba(255, 59, 50, 0.22),
    0 0 12px rgba(255, 59, 50, 0.95),
    0 0 24px rgba(255, 59, 50, 0.55);
  animation: why-rec-blink 1.2s ease-in-out infinite;
}

.why-cbdc__rec::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 59, 50, 0.7);
  border-radius: 50%;
  animation: why-rec-ring 1.6s ease-out infinite;
}

@keyframes why-rec-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.82); }
}

@keyframes why-rec-ring {
  0% { transform: scale(0.45); opacity: 0.9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

.why-cbdc__tape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 6px;
  margin: -3px 0 0 -13px;
  border-radius: 2px;
  background: repeating-linear-gradient(115deg, #d9c9a0 0 5px, #b8a67f 5px 10px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transform: rotate(-24deg) scale(0);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.why-cbdc[data-run="pivx"] .why-cbdc__tape { transform: rotate(-24deg) scale(1); }
.why-cbdc[data-run="pivx"] .why-cbdc__rec { display: none; }

.why-cbdc__camlabel {
  color: #8b98a0;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Caution mark next to the camera text — only shown while a payment is really
   being recorded (the PIVX run says "Nothing to record"). */
.why-cbdc__warn {
  display: none;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  place-items: center;
  color: #ffc857;
}

.why-cbdc__warn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.55));
}

.why-cbdc[data-run="cbdc"] .why-cbdc__warn,
.why-cbdc[data-run="btc"] .why-cbdc__warn { display: grid; }

.why-cbdc[data-run="cbdc"] .why-cbdc__warn { color: #ff8f86; }
.why-cbdc[data-run="cbdc"] .why-cbdc__warn svg { filter: drop-shadow(0 0 6px rgba(255, 143, 134, 0.6)); }

.why-cbdc__verdict {
  margin-left: auto;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 260ms ease;
}

.why-cbdc[data-run="cbdc"] .why-cbdc__verdict { color: #ff9d90; }
.why-cbdc[data-run="btc"] .why-cbdc__verdict { color: #7ff0bc; }
.why-cbdc[data-run="pivx"] .why-cbdc__verdict { color: #c9b4ff; }

/* ==========================================================================
   Hero — link into the inflation calculator
   ========================================================================== */

.why-hero-calc {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  justify-self: start;
  max-width: 100%;
  padding: 12px 18px 13px;
  border: 1px solid rgba(255, 98, 91, 0.42);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 98, 91, 0.2), transparent 62%),
    linear-gradient(150deg, rgba(255, 98, 91, 0.1), rgba(9, 7, 12, 0.92));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 22px rgba(255, 98, 91, 0.14);
  text-decoration: none;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.why-hero-calc:hover,
.why-hero-calc:focus-visible {
  border-color: rgba(255, 98, 91, 0.78);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 0 30px rgba(255, 98, 91, 0.28);
  outline: none;
  transform: translateY(-2px);
}

.why-hero-calc strong {
  color: #fff3f1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 22px rgba(255, 98, 91, 0.32);
}

.why-hero-calc span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffb4ac;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.why-hero-calc b {
  font-size: 0.9rem;
  transition: transform 0.24s ease;
}

.why-hero-calc:hover b,
.why-hero-calc:focus-visible b { transform: translateX(4px); }

/* ==========================================================================
   "Bank-Free Living" — the actual goal, as the loudest line in the card
   (the word-rain version only shows above 1400px viewport width)
   ========================================================================== */

.why-goal-tag {
  display: block;
  width: fit-content;
  align-self: start;
  margin: 2px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: #ffd479;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3.1vw, 2.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-shadow: 0 0 12px rgba(255, 200, 87, 0.35);
  animation: why-goal-flare 3.6s ease-in-out infinite;
}

/* a light bar keeps sweeping underneath, so the line never goes quiet */
.why-goal-tag::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 9px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 200, 87, 0.08), #ffc857, rgba(255, 200, 87, 0.08));
  background-size: 220% 100%;
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.45);
  animation: why-goal-sweep 3.6s linear infinite;
}

@keyframes why-goal-flare {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 200, 87, 0.35); }
  50% { text-shadow: 0 0 26px rgba(255, 200, 87, 0.9), 0 0 62px rgba(255, 200, 87, 0.45); }
}

@keyframes why-goal-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* the anchor target must not hide behind the progress bar */
.why-calc { scroll-margin-top: 74px; }

/* ==========================================================================
   3f — H: privacy ledger, linkable vs unlinkable
   ========================================================================== */
.why-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.why-ledger__side {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.why-ledger__cap {
  display: block;
  margin: 0 0 8px;
  color: #8b98a0;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.why-ledger__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
}

.why-ledger__node {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 3px;
  background: rgba(182, 150, 255, 0.45);
  border: 1px solid rgba(182, 150, 255, 0.7);
}

.why-ledger__link {
  flex: 1 1 auto;
  height: 2px;
  margin: 0 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(182, 150, 255, 0.85), rgba(182, 150, 255, 0.5));
  transform-origin: 0 50%;
  animation: why-link-solid 4.4s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.2s);
}

@keyframes why-link-solid {
  0%, 100% { opacity: 0.9; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.04); }
}

.why-ledger__side--private .why-ledger__node {
  background: rgba(182, 150, 255, 0.2);
  border-color: rgba(182, 150, 255, 0.35);
}

.why-ledger__side--private .why-ledger__link {
  background: repeating-linear-gradient(90deg, rgba(182, 150, 255, 0.5) 0 4px, transparent 4px 10px);
  animation: why-link-dissolve 4.4s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.2s);
}

@keyframes why-link-dissolve {
  0%, 100% { opacity: 0.12; transform: scaleX(0.55); }
  50% { opacity: 0.5; transform: scaleX(0.8); }
}

/* ==========================================================================
   4 — money properties matrix
   ========================================================================== */
.why-matrix {
  grid-column: span 12;
  padding: 32px 34px 28px;
  overflow-x: clip;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 0%, rgba(247, 178, 68, 0.12), transparent 26rem),
    linear-gradient(160deg, rgba(30, 28, 22, 0.94), rgba(17, 20, 22, 0.97));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.26);
}

.why-matrix__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.why-matrix__col {
  color: #8b98a0;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.why-matrix__row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 180ms ease;
}

.why-matrix__row:last-of-type { border-bottom: 0; }

.why-matrix__row:hover { background: rgba(255, 255, 255, 0.025); }

.why-matrix__name {
  color: #e2e7ea;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.why-matrix__cell {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: visible;
}

/* ---- tooltips: hover or keyboard focus on a bar explains the score ---- */
.why-matrix__cell[data-tip] {
  cursor: help;
  outline: none;
}

/* bigger hover target without changing the layout */
.why-matrix__cell[data-tip]::before {
  content: "";
  position: absolute;
  inset: -9px -3px;
}

.why-matrix__cell[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: min(230px, 52vw);
  padding: 10px 12px;
  border: 1px solid rgba(247, 178, 68, 0.32);
  border-radius: 11px;
  background: rgba(9, 12, 15, 0.985);
  color: #dde4e8;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  z-index: 6;
}

.why-matrix__cell[data-tip]:hover::after,
.why-matrix__cell[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.why-matrix__cell[data-tip]:focus-visible {
  box-shadow: 0 0 0 2px rgba(247, 178, 68, 0.75);
}

/* right-most column: flip the tooltip so it cannot leave the panel */
.why-matrix__row > .why-matrix__cell:nth-last-child(1)::after {
  left: auto;
  right: 0;
  transform: translate(0, 5px);
}

.why-matrix__row > .why-matrix__cell:nth-last-child(1):hover::after,
.why-matrix__row > .why-matrix__cell:nth-last-child(1):focus-visible::after {
  transform: translate(0, 0);
}

/* first column: never push left out of the panel either */
.why-matrix__row > .why-matrix__cell:nth-child(2)::after {
  left: 0;
  transform: translate(0, 5px);
}

.why-matrix__row > .why-matrix__cell:nth-child(2):hover::after,
.why-matrix__row > .why-matrix__cell:nth-child(2):focus-visible::after {
  transform: translate(0, 0);
}

.why-matrix__cell i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  width: calc(var(--v, 0) * 20%);
  background: rgba(255, 255, 255, 0.3);
  transform-origin: 0 50%;
  animation: why-cell-fill 0.7s cubic-bezier(0.22, 0.68, 0.32, 1) backwards;
  animation-delay: calc(var(--r, 0) * 70ms + 120ms);
}

.why-matrix__cell[data-col="fiat"] i { background: linear-gradient(90deg, #ff625b, #ff9d90); }
.why-matrix__cell[data-col="bitcoin"] i { background: linear-gradient(90deg, #c98a2a, #f7b244); }
.why-matrix__cell[data-col="privacy"] i { background: linear-gradient(90deg, #7a5bd6, #b696ff); }
.why-matrix__cell[data-col="gold"] i { background: linear-gradient(90deg, #8a7b52, #d8c48a); }

.why-matrix__cell.is-best i {
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
  animation: why-cell-fill 0.7s cubic-bezier(0.22, 0.68, 0.32, 1) backwards,
             why-best-glow 3.4s ease-in-out infinite;
  animation-delay: calc(var(--r, 0) * 70ms + 120ms), calc(var(--r, 0) * 70ms + 900ms);
}

@keyframes why-cell-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes why-best-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* column scan on hover */
.why-matrix__body {
  position: relative;
}

.why-matrix__body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
}

.why-matrix__body:hover::after {
  animation: why-column-scan 1.1s ease-in-out;
}

@keyframes why-column-scan {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(360%); }
}

.why-matrix__note {
  margin: 14px 0 0;
  color: #7d8a91;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ==========================================================================
   5 — timeline of money
   ========================================================================== */
.why-timeline {
  grid-column: span 12;
  padding: 32px 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(24, 26, 24, 0.94), rgba(17, 19, 21, 0.97));
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
}

.why-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 0;
  padding: 0 0 0 0;
}

.why-timeline__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.why-timeline__line::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #d8c48a, #f7b244, #ff625b);
  animation: why-line-draw 2.6s cubic-bezier(0.22, 0.68, 0.32, 1) 0.2s both;
}

@keyframes why-line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.why-timeline__item {
  position: relative;
  padding-top: 30px;
  animation: why-marker-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 300ms + 500ms);
}

@keyframes why-marker-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.why-timeline__item::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--tl-accent, var(--why-gold));
  background: #10161a;
  box-shadow: 0 0 12px rgba(247, 178, 68, 0.4);
}

.why-timeline__year {
  display: block;
  color: var(--tl-accent, var(--why-gold));
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.why-timeline__what {
  display: block;
  margin-top: 4px;
  color: #d3dade;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ==========================================================================
   6 — inflation calculator
   ========================================================================== */
.why-calc {
  grid-column: span 12;
  padding: 32px 34px 30px;
  border: 1px solid rgba(255, 98, 91, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 98, 91, 0.12), transparent 24rem),
    linear-gradient(160deg, rgba(38, 26, 26, 0.94), rgba(17, 19, 21, 0.97));
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.26);
}

.why-calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 26px 0 0;
}

/* one full-width row of controls: no short column, no empty space beside it */
.why-calc__controls {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr);
  gap: 16px 20px;
  align-items: start;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.why-calc__control {
  display: grid;
  gap: 7px;
}

.why-calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #c6d0d5;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-calc__value {
  color: var(--why-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.why-calc input[type="range"] {
  width: 100%;
  height: 26px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.why-calc input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 98, 91, 0.65), rgba(247, 178, 68, 0.65));
}

.why-calc input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 98, 91, 0.65), rgba(247, 178, 68, 0.65));
}

.why-calc input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid #12181b;
  border-radius: 50%;
  background: #f7b244;
  box-shadow: 0 0 12px rgba(247, 178, 68, 0.6);
}

.why-calc input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #12181b;
  border-radius: 50%;
  background: #f7b244;
  box-shadow: 0 0 12px rgba(247, 178, 68, 0.6);
}

.why-calc__rates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.why-calc__rate {
  appearance: none;
  min-height: 30px;
  padding: 6px 13px;
  color: #cbbfae;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid rgba(247, 178, 68, 0.28);
  border-radius: 8px;
  background: rgba(247, 178, 68, 0.06);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.why-calc__rate.is-active {
  color: #241403;
  border-color: #f7b244;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

/* result panel */
.why-calc__result {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
}

.why-calc__hint {
  margin: 0;
  color: #93a0a7;
  font-size: 0.92rem;
  line-height: 1.65;
}

.why-calc__hint strong { color: #e7ded2; }

/* ---- amount number field ---- */
.why-calc__number {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  color: var(--why-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(247, 178, 68, 0.28);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
}

.why-calc__number:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

/* ---- result: equal cards, several angles on the same fact ---- */
.why-calc__tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.why-calc__tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.26);
}

.why-calc__tile-label {
  color: #8b98a0;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.why-calc__tile-value {
  display: block;
  color: #ffd79a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.why-calc__tile-note {
  margin-top: auto;
  color: #98a5ac;
  font-size: 0.79rem;
  line-height: 1.45;
}

.why-calc__tile--accent {
  border-color: rgba(255, 98, 91, 0.42);
  background: rgba(255, 98, 91, 0.08);
}

.why-calc__tile--accent .why-calc__tile-value { color: #ff9d90; }

.why-calc__tile-bar {
  position: relative;
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.why-calc__tile-bar i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 98, 91, 0.95), rgba(255, 98, 91, 0.45));
  transform-origin: 0 50%;
  transition: transform 260ms ease;
}

/* ---- result: purchasing power over time ---- */
.why-calc__chart {
  margin: 4px 0 0;
  padding: 0;
}

.why-calc__chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 7px;
}

.why-calc__chart-title {
  color: #8b98a0;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-calc__compare-btn {
  appearance: none;
  padding: 6px 11px;
  color: #c9a45f;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px dashed rgba(247, 178, 68, 0.38);
  border-radius: 8px;
  background: rgba(247, 178, 68, 0.05);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.why-calc__compare-btn[hidden] { display: none; }

.why-calc__compare-btn:hover {
  color: #1a1005;
  border-color: #f7b244;
  border-style: solid;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__compare-btn.is-on {
  color: #1a1005;
  border-style: solid;
  border-color: #f7b244;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__compare-btn:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

.why-calc__chart-svg {
  display: block;
  width: 100%;
  height: 96px;
  overflow: visible;
}

.why-calc__chart-area {
  fill: rgba(255, 98, 91, 0.18);
}

.why-calc__chart-line {
  fill: none;
  stroke: #ff9d90;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* second currency in the overlay: euro area */
.why-calc__chart-area--eur { fill: rgba(247, 178, 68, 0.16); }

.why-calc__chart-line--eur {
  stroke: #ffd79a;
  stroke-dasharray: 5 4;
}

.why-calc__chart-base {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.why-calc__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 2px;
  color: #7d8a91;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.why-calc__chart-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  margin-top: 7px;
  color: #8b98a0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.why-calc__legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.why-calc__legend[hidden] { display: none; }

.why-calc__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c6d0d5;
  font-size: 0.76rem;
  font-weight: 700;
}

.why-calc__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff9d90;
}

.why-calc__dot--eur { background: #ffd79a; }

/* ---- currency tabs + direction switch ---- */
.why-calc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.why-calc__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  color: #cbbfae;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(247, 178, 68, 0.28);
  border-radius: 999px;
  background: rgba(247, 178, 68, 0.05);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.why-calc__tab:hover { color: #ffd79a; border-color: rgba(247, 178, 68, 0.55); }

.why-calc__tab.is-active {
  color: #241403;
  border-color: #f7b244;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__tab:focus-visible,
.why-calc__mode:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

.why-calc__modes {
  display: inline-flex;
  gap: 4px;
  margin: 16px 0 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.why-calc__mode {
  appearance: none;
  padding: 8px 15px;
  color: #93a0a7;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  background: transparent;
  transition: color 150ms ease, background 150ms ease;
}

.why-calc__mode.is-active {
  color: #1a1005;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__panel { display: grid; gap: 14px; align-content: start; }
.why-calc__panel[hidden] { display: none; }
/* the two year selects on top, the shortcut button pinned to the bottom edge */
.why-calc__panel[data-calc-panel="backward"] { align-content: space-between; }
.why-calc__panel[data-calc-panel="forward"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.why-calc__select {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  color: var(--why-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(247, 178, 68, 0.3);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.34);
}

.why-calc__select:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

.why-calc__select option {
  color: #f3ece2;
  background: #1b1414;
}

.why-calc__span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.why-calc__quick {
  appearance: none;
  justify-self: start;
  padding: 8px 14px;
  color: #c9a45f;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px dashed rgba(247, 178, 68, 0.38);
  border-radius: 9px;
  background: rgba(247, 178, 68, 0.05);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.why-calc__quick:hover {
  color: #1a1005;
  border-color: #f7b244;
  border-style: solid;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__quick:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

.why-calc__toggle {
  appearance: none;
  padding: 7px 13px;
  color: #c9a45f;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px dashed rgba(247, 178, 68, 0.38);
  border-radius: 9px;
  background: rgba(247, 178, 68, 0.05);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.why-calc__toggle:hover {
  color: #1a1005;
  border-color: #f7b244;
  border-style: solid;
  background: linear-gradient(135deg, #ffd79a, #f7b244);
}

.why-calc__toggle:focus-visible {
  outline: 2px solid #f7b244;
  outline-offset: 2px;
}

.why-calc__data.is-closed .why-calc__table-wrap,
.why-calc__data.is-closed .why-calc__source { display: none; }

.why-calc__data.is-closed .why-calc__data-head { margin-bottom: 0; }

/* ---- data table ---- */
.why-calc__data {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.why-calc__data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.why-calc__data-title {
  margin: 0;
  color: #f3ece2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.2;
}

.why-calc__data-count {
  margin-left: auto;
  color: #8b98a0;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-calc__table-wrap {
  max-height: 400px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  scrollbar-width: thin;
}

.why-calc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.why-calc__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px;
  color: #a6b2b8;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  background: #1d1616;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.why-calc__table td {
  padding: 7px 14px;
  color: #b9c4ca;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.why-calc__table th:first-child,
.why-calc__table td:first-child {
  text-align: left;
  color: #e7ded2;
  font-weight: 700;
}

.why-calc__table tbody tr:last-child td { border-bottom: 0; }
.why-calc__table tbody tr:hover td { background: rgba(247, 178, 68, 0.06); }

.why-calc__table tr.is-picked td {
  color: #ffd79a;
  background: rgba(247, 178, 68, 0.12);
}

.why-calc__table td.is-up { color: #ff9d90; }
.why-calc__table td.is-down { color: #8fd9a8; }

.why-calc__source {
  margin: 10px 0 0;
  color: #8b98a0;
  font-size: 0.78rem;
  line-height: 1.6;
}

.why-calc__source a { color: #c9a45f; }


/* ==========================================================================
   7 — CTA upgrade
   ========================================================================== */
.whyusecrypto .cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.whyusecrypto .cta__cross {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #9aa6ad;
  font-size: 0.82rem;
}

.whyusecrypto .cta__cross a {
  color: var(--why-gold);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 178, 68, 0.4);
}

.whyusecrypto .cta__cross a:hover { color: #ffd79a; }

/* spark running along the primary CTA edge */
.whyusecrypto .cta a.why-spark {
  position: relative;
  overflow: hidden;
}

.whyusecrypto .cta a.why-spark::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 30%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(18deg);
  animation: why-spark-run 3.4s ease-in-out infinite;
}

@keyframes why-spark-run {
  0% { left: -40%; opacity: 0; }
  15% { opacity: 1; }
  60% { left: 115%; opacity: 1; }
  70%, 100% { left: 115%; opacity: 0; }
}

/* ==========================================================================
   8 — responsive
   ========================================================================== */
@media (max-width: 1020px) {
  .why-supply { margin-top: 4px; }

  .why-matrix,
  .why-timeline,
  .why-calc { padding: 24px 20px 22px; }

  .why-matrix__head,
  .why-matrix__row { grid-template-columns: minmax(96px, 1.2fr) repeat(4, minmax(0, 1fr)); }

  .why-calc__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .why-timeline__track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .why-timeline__line { display: none; }
  .why-timeline__item { padding-top: 26px; }
}

@media (max-width: 620px) {
  .why-matrix__name { font-size: 0.78rem; }
  .why-matrix__col { font-size: 0.5rem; letter-spacing: 0.06em; }

  .why-timeline__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .why-ledger { grid-template-columns: minmax(0, 1fr); }

  .why-chain__block { width: 32px; height: 32px; }
  .why-grave { gap: 7px; }
  .why-grave__coin { width: 22px; height: 22px; flex: 0 0 22px; }

  .whyusecrypto .cta__actions { justify-self: stretch; }
  .whyusecrypto .cta__actions a { width: 100%; }
}

@media (max-width: 700px) {
  /* the control row needs the full width before it gets cramped */
  .why-calc__controls { grid-template-columns: minmax(0, 1fr); }
  .why-calc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  /* the result cards get too narrow side by side */
  .why-calc__panel[data-calc-panel="forward"] { grid-template-columns: minmax(0, 1fr); }
  .why-calc__tiles { grid-template-columns: minmax(0, 1fr); }
  .why-calc__tile-value { font-size: 1.25rem; }
}

/* ==========================================================================
   8b — the two highlights: "Final Goal" card and the Bank-Free Living word
   ========================================================================== */

/* The goal card has to stand out of the row: golden frame, warmer glass,
   a left edge that stays lit and a slow breathing glow. */
.whyusecrypto .container > .card.card--final {
  border-color: rgba(255, 200, 87, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 200, 87, 0.14), transparent 58%),
    linear-gradient(160deg, rgba(255, 200, 87, 0.07), rgba(9, 8, 12, 0.95));
  animation:
    why-card-in 0.7s cubic-bezier(0.22, 0.68, 0.32, 1) backwards,
    why-final-breathe 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 85ms), 0s;
}

.whyusecrypto .container > .card.card--final::before {
  background: #ffc857;
  opacity: 1;
  animation: none;
  box-shadow: 0 0 20px rgba(255, 200, 87, 0.9);
}

.whyusecrypto .container > .card.card--final h2 {
  color: #ffd479;
  text-shadow: 0 0 22px rgba(255, 200, 87, 0.35);
}

@keyframes why-final-breathe {
  0%, 100% {
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.4),
      0 0 26px rgba(255, 200, 87, 0.1),
      inset 0 1px rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 26px 64px rgba(0, 0, 0, 0.44),
      0 0 48px rgba(255, 200, 87, 0.3),
      inset 0 1px rgba(255, 255, 255, 0.09);
  }
}

/* "Bank-Free Living" is the goal — it keeps glowing while the word rains down. */
.whyusecrypto .why-freedom-rail span.is-key {
  color: #ffcf6b;
  font-weight: 900;
  filter: none;
  animation:
    why-word-fall 320s linear infinite,
    why-key-glow 3.4s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -20s), 0s;
}

.whyusecrypto .why-freedom-rail--right span.is-key {
  animation-delay: calc(var(--k, 0) * -20s - 10s), 0s;
}

@keyframes why-key-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 207, 107, 0.35); }
  50% { text-shadow: 0 0 20px rgba(255, 207, 107, 0.95), 0 0 46px rgba(255, 207, 107, 0.45); }
}

/* ==========================================================================
   9 — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .whyusecrypto .why-progress__fill { transition: none; }

  .whyusecrypto .container > .card.card--final { animation: none; }
  .whyusecrypto .why-freedom-rail span.is-key { animation: none; opacity: 0; }
  .why-goal-tag,
  .why-goal-tag::after { animation: none; }

  .why-supply__lock,
  .why-supply__inf::after,
  .why-supply__pop,
  .why-ticker__track,
  .whyusecrypto .container > .card,
  .whyusecrypto .container > .card::before,
  .why-rain i,
  .why-bill,
  .why-bill__shards i,
  .why-bill__tx,
  .why-bill__dust i,
  .why-chain__block::before,
  .why-chain__block--new,
  .why-cap__fill,
  .why-cap__lock,
  .why-grave__coin,
  .why-grave__coin--survivor,
  .why-peg__line,
  .why-peg__coin,
  .why-peg__verdict,
  .why-cbdc__barrier,
  .why-cbdc__dot,
  .why-cbdc__rec,
  .why-cbdc__rec::after,
  .why-cbdc__reject,
  .why-cbdc__verdict,
  .why-ledger__link,
  .why-matrix__cell i,
  .why-matrix__cell.is-best i,
  .why-matrix__body:hover::after,
  .why-timeline__line::after,
  .why-timeline__item,
  .whyusecrypto .cta a.why-spark::after {
    animation: none !important;
  }

  .why-cap__fill { transform: scaleX(1); }
  .why-cap__lock { opacity: 1; transform: translateY(-50%) scale(1); }
  .why-peg__coin { opacity: 1; }
  .why-cbdc__dot { opacity: 1; }
}