/* ==========================================================================
   STASH · about.css — styles for site/about.html only.
   Builds on stash.css (tokens, sections, cards, checklist, CTA band) and adds
   about-* pieces. Green (the accent) is used only in selectors that contain
   "rate": the part of a payout that becomes the gain, and its legend swatch.
   Motion: CSS only, keyed to .is-in from stash-motion.js reveals(); every
   state has a final form under prefers-reduced-motion and without JS.
   ========================================================================== */

/* ------------------------------------------------------------ shared bits */
.about-link {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px; text-underline-offset: .32em;
  transition: text-decoration-color .2s var(--ease);
}
.about-link:hover { text-decoration-color: currentColor; }
.about-link::after { content: "\2192"; display: inline-block; text-decoration: none; transition: transform .3s var(--ease); }
.about-link:hover::after { transform: translateX(3px); }

.about-can, .about-cannot { list-style: none; margin: 0; padding: 0; }
.about-can li, .about-cannot li {
  position: relative; padding: .55rem 0 .55rem 1.8rem; border-top: 1px solid var(--rule);
  font-size: .92rem; line-height: 1.45; color: var(--fg-2);
}
.about-can li::before, .about-cannot li::before {
  position: absolute; left: 0; top: .68rem; display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-family: var(--f-mono); font-weight: 600; font-size: .6875rem; line-height: 1;
}
.about-can li::before { content: "\2713"; background: var(--fg); color: var(--surface); }
.about-cannot li::before { content: "\00d7"; border: 1.3px solid var(--fg-3); color: var(--fg-2); font-size: .8125rem; }

/* ------------------------------------------------------------- 1 · intro */
@keyframes about-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .about-rise { animation: about-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }

.about-intro { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7.5vw, 6.5rem); }
.about-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.about-intro__h { font-size: clamp(2.4rem, 5vw, 4.25rem); max-width: 12.5em; }
.about-intro__lede { margin-top: 1.4rem; }
.about-intro__tag { margin-top: 1.5rem; font-size: clamp(1.5rem, 2.3vw, 2rem); }
.about-intro__more { margin-top: .75rem; }
.about-intro__note {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: 38rem;
  font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.65; color: var(--fg-3);
}

.about-glance { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.about-glance__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule-2);
}
.about-glance__h { font-stretch: 86%; font-weight: 760; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; }
.about-glance__list { margin: 0; }
.about-glance__list > div {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .2rem 1rem;
  padding: .78rem 0; border-bottom: 1px solid var(--rule);
}
.about-glance__list > div:last-child { border-bottom: 0; padding-bottom: .1rem; }
.about-glance__list dt { padding-top: .22rem; font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.5; color: var(--fg-3); }
.about-glance__list dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--fg); }
.about-glance__status dd { position: relative; padding-left: 1.15rem; color: var(--fg-2); }
.about-glance__status dd::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid var(--fg-2);
}

.about-fit {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule-2);
}
.about-fit__h { font-stretch: 80%; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1; letter-spacing: -.015em; }
.about-fit__t {
  padding-bottom: .7rem; font-family: var(--f-display); font-stretch: 125%; font-weight: 600;
  font-size: var(--fs-label); line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.about-fit li { padding-block: .8rem; font-size: 1rem; line-height: 1.5; }
.about-fit li::before { top: 1.02rem; }

/* ------------------------------------------------------ 2 · what it is not */
.about-not { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-not__card { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.about-not__card .h3 { margin-top: 0; }
.about-not__word {
  position: relative; align-self: flex-start; margin: 0 0 1.1rem;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(2.5rem, 4.2vw, 3.5rem); line-height: .92; letter-spacing: 0;
  text-transform: uppercase; color: var(--line-2);
}
/* the strike: drawn across the word once the card is in view */
.about-not__word::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; top: 50%;
  height: max(3px, .08em); margin-top: -.04em; background: var(--ink); transform-origin: left center;
}
.js .about-not__card:not(.is-in) .about-not__word::after { transform: scaleX(0); }
.js .about-not__card.is-in .about-not__word::after {
  transition: transform .7s var(--ease-io); transition-delay: calc(var(--i, 0) * 70ms + .45s);
}

/* --------------------------------------------------- 3 · how it makes money */
.about-money {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3rem); align-items: stretch;
}
.about-fee { margin: 0; padding: clamp(1.25rem, 2.6vw, 2rem); }
.about-fee__top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule-2);
}
.about-fee__title { font-stretch: 86%; font-weight: 760; font-size: 1.15rem; line-height: 1.15; }
.about-lane { margin-top: 1.5rem; }
.about-lane__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; margin: 0; }
.about-lane__head b { font-weight: 650; font-size: 1rem; color: var(--fg); }
.about-lane__head span { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-3); }

.about-split-wrap { position: relative; margin-top: .55rem; padding-top: 1.7rem; }
.about-split {
  position: relative; display: flex; height: 58px; overflow: hidden;
  border: 1px solid var(--ink); border-radius: 10px; background: var(--paper-2);
}
.about-split__fee {
  flex: 0 0 10%; border-right: 1.5px solid var(--ink); transform-origin: left center;
  background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 6px);
}
.rate-split-gain {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end;
  padding-inline: 1rem; background: var(--rate); transform-origin: left center;
}
.about-split .rate-split-gain b { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 600; color: var(--ink); }
.about-split__cap { position: absolute; left: 30%; top: 0; bottom: -6px; border-left: 1.5px dashed var(--ink); pointer-events: none; }
.about-split__cap i {
  position: absolute; top: 0; left: .45rem; white-space: nowrap; font-style: normal;
  font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.2; color: var(--fg);
}
.about-split__legend { list-style: none; margin: .95rem 0 0; padding: 0; display: grid; gap: .5rem; }
.about-split__legend li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.45; color: var(--fg-2); }
.about-split__legend b { margin-right: .3rem; font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 600; color: var(--fg); }
.about-sw { flex: none; width: 14px; height: 14px; margin-top: .2em; border-radius: 3px; border: 1px solid var(--ink); }
.about-sw--fee { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 4.5px); }
.rate-split-sw { background: var(--rate); }

.about-principal {
  display: flex; align-items: center; min-height: 46px; margin-top: .55rem; padding: .5rem 1rem;
  border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface);
}
.about-principal span { font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.4; color: var(--fg-2); }

.about-receipt { margin-top: 1.6rem; padding-top: 1.15rem; border-top: 1px dashed var(--rule-2); }
.about-receipt .card__k { margin: 0; }
.about-receipt dl { margin: .55rem 0 0; }
.about-receipt dl > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .15rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.about-receipt dt { font-size: .92rem; line-height: 1.4; color: var(--fg-2); }
.about-receipt dd { margin: 0; white-space: nowrap; font-family: var(--f-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.about-receipt dl > .about-receipt__sum { border-bottom: 0; border-top: 1.5px solid var(--ink); margin-top: -1px; padding-top: .65rem; }
.about-receipt__sum dt { font-weight: 600; color: var(--fg); }
.about-receipt .prov { margin-top: .8rem; }

.about-costs { display: flex; flex-direction: column; }
.about-costs .h3 { margin: 0; }
.about-costs__list { margin: .9rem 0 0; }
.about-costs__list > div { padding: .95rem 0; border-top: 1px solid var(--rule); }
.about-costs__list dt { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.about-costs__list dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--fg-2); }
.about-costs__t {
  margin-top: 1.1rem; font-family: var(--f-display); font-stretch: 125%; font-weight: 600;
  font-size: var(--fs-label); line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.about-none { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.about-none li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem; border: 1px solid var(--rule-2); border-radius: 10px; font-size: .9rem; line-height: 1.3;
}
.about-none li span { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-3); }
.about-costs .guard__const { margin-top: auto; }
.about-costs__t + .about-none + .guard__const { margin-top: max(1.25rem, auto); }

/* the split fills in contract order: the fee first, then the rest becomes the gain */
.js .about-fee:not(.is-in) .about-split__fee,
.js .about-fee:not(.is-in) .rate-split-gain { transform: scaleX(0); }
.js .about-fee:not(.is-in) .rate-split-gain b,
.js .about-fee:not(.is-in) .about-split__cap { opacity: 0; }
.js .about-fee.is-in .about-split__fee { transition: transform .6s var(--ease) .45s; }
.js .about-fee.is-in .rate-split-gain { transition: transform 1.1s var(--ease) 1.05s; }
.js .about-fee.is-in .rate-split-gain b { transition: opacity .4s ease 2s; }
.js .about-fee.is-in .about-split__cap { transition: opacity .5s ease 2.25s; }

/* ------------------------------------------------------------ 4 · the keys */
.about-key__t {
  margin: 1rem 0 .3rem; font-family: var(--f-display); font-stretch: 125%; font-weight: 600;
  font-size: var(--fs-label); line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.about-keys__more { margin-top: 1rem; }

/* ------------------------------------------------------------------ 5 · risk */
.about-risks {
  list-style: none; margin: 0; padding: 0; counter-reset: about-risk;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.about-risk { display: flex; flex-direction: column; padding: clamp(1.2rem, 2.2vw, 1.6rem); counter-increment: about-risk; }
.about-risk::before {
  content: counter(about-risk, decimal-leading-zero); display: block;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; color: var(--fg-3);
}
.about-risk .h3 { margin-top: .9rem; }

.about-pause {
  margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.25rem, 2.6vw, 2rem);
}
.about-pause__top .h3 { margin: 0; }
.about-pause__top p { max-width: 34rem; }
.about-pause > .guard__const { grid-column: 1 / -1; margin-top: 0; }
.about-pause__labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: .65rem; }
.about-pause__labels span { font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.45; color: var(--fg-3); }
.about-pause__labels b { display: block; margin-bottom: .1rem; font-family: var(--f-display); font-weight: 650; font-size: .95rem; color: var(--fg); }
.about-pause__track { position: relative; display: flex; height: 44px; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 8px; }
.about-pause__seg { flex: 1 1 50%; transform-origin: left center; }
.about-pause__seg--paused {
  border-right: 1.5px solid var(--d1);
  background: repeating-linear-gradient(135deg, var(--d2) 0 1.5px, transparent 1.5px 7px);
}
.about-pause__seg--lock { background: var(--line-d); }
.about-pause__run { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; }
.about-pause__run i { position: absolute; top: 0; bottom: 0; left: -2px; width: 2px; background: var(--d1); }
.about-pause__ticks { position: relative; height: 1.7rem; margin-top: .4rem; font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-3); }
.about-pause__ticks span { position: absolute; top: .5rem; line-height: 1.2; }
.about-pause__ticks span::before { content: ""; position: absolute; top: -.5rem; width: 1px; height: .35rem; background: var(--rule-2); }
.about-pause__ticks span:nth-child(1) { left: 0; }
.about-pause__ticks span:nth-child(1)::before { left: 0; }
.about-pause__ticks span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.about-pause__ticks span:nth-child(2)::before { left: 50%; }
.about-pause__ticks span:nth-child(3) { right: 0; }
.about-pause__ticks span:nth-child(3)::before { right: 0; }

/* the timeline runs once: 72 h paused, then 72 h open with no new pause allowed */
@keyframes about-run { 0% { opacity: 1; transform: translateX(0); } 94% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
.js .about-pause:not(.is-in) .about-pause__seg { transform: scaleX(0); }
.js .about-pause:not(.is-in) .about-pause__labels span,
.js .about-pause:not(.is-in) .about-pause__ticks span:nth-child(n+2) { opacity: 0; }
.js .about-pause.is-in .about-pause__seg--paused { transition: transform 1.6s linear .6s; }
.js .about-pause.is-in .about-pause__seg--lock { transition: transform 1.6s linear 2.2s; }
.js .about-pause.is-in .about-pause__run { animation: about-run 3.2s linear .6s both; }
.js .about-pause.is-in .about-pause__labels span:nth-child(1) { transition: opacity .5s ease .6s; }
.js .about-pause.is-in .about-pause__labels span:nth-child(2) { transition: opacity .5s ease 2.2s; }
.js .about-pause.is-in .about-pause__ticks span:nth-child(2) { transition: opacity .4s ease 2.1s; }
.js .about-pause.is-in .about-pause__ticks span:nth-child(3) { transition: opacity .4s ease 3.7s; }

/* ---------------------------------------------------------------- 6 · launch */
.about-launch {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.about-launch__copy .lede { margin-top: 1.25rem; }
.about-launch__note { margin-top: 1.1rem; max-width: 34rem; font-size: .95rem; line-height: 1.55; color: var(--fg-2); }
.about-launch__more { margin-top: .6rem; }
.about-launch__card { padding: clamp(1.25rem, 2.6vw, 2rem); counter-reset: about-done; }
.about-launch__card .checklist { margin-top: .9rem; }
.about-launch__card .checklist li { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; padding: 1rem 0; }
.about-launch__card .checklist li[data-state="done"] { counter-increment: chk 1 about-done 1; }
.about-launch__card .checklist b { grid-column: 2; grid-row: 1; align-self: center; line-height: 1.35; }
.about-launch__card .checklist__v {
  grid-column: 3; grid-row: 1; align-self: center; justify-self: end;
  padding: .2rem .7rem; border: 1px dashed var(--rule-2); border-radius: var(--r-pill);
  line-height: 1.45; white-space: nowrap;
}
.about-launch__card li[data-state="done"] .checklist__v { border-style: solid; border-color: var(--ink); }
.about-launch__why { grid-column: 2 / -1; grid-row: 2; margin-top: .3rem; font-size: .92rem; line-height: 1.5; color: var(--fg-2); }
.about-launch__foot { display: flex; align-items: center; gap: .9rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.about-launch__bar { display: inline-grid; grid-template-columns: repeat(3, 22px); gap: 4px; }
.about-launch__bar i { height: 6px; border-radius: 3px; border: 1px solid var(--rule-2); }
.about-launch__tally { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-2); }
.about-launch__tally::before { content: counter(about-done) " of 3 steps done"; }
.about-launch__card:has(li[data-check="factory"][data-state="done"]) .about-launch__bar i:nth-child(1),
.about-launch__card:has(li[data-check="vault"][data-state="done"]) .about-launch__bar i:nth-child(2),
.about-launch__card:has(li[data-check="source"][data-state="done"]) .about-launch__bar i:nth-child(3) { background: var(--ink); border-color: var(--ink); }

/* the three steps arrive in their order */
.js .about-launch__card:not(.is-in) .checklist li { opacity: 0; transform: translateY(8px); }
.js .about-launch__card.is-in .checklist li { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .about-launch__card.is-in .checklist li:nth-child(1) { transition-delay: .3s; }
.js .about-launch__card.is-in .checklist li:nth-child(2) { transition-delay: .45s; }
.js .about-launch__card.is-in .checklist li:nth-child(3) { transition-delay: .6s; }

/* ------------------------------------------------------------------- 7 · CTA */
.about-cta__h { text-wrap: balance; }
.about-cta__tag { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .about-money { grid-template-columns: minmax(0, 1fr); }
  .about-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-fit__h { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .about-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .about-glance { max-width: 40rem; }
  .about-pause { grid-template-columns: minmax(0, 1fr); }
  .about-launch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .about-not { grid-template-columns: minmax(0, 1fr); }
  .about-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .about-risks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .about-launch__card .checklist li { grid-template-columns: 30px minmax(0, 1fr); }
  .about-launch__card .checklist__v { grid-column: 2; grid-row: 2; justify-self: start; margin-top: .35rem; }
  .about-launch__why { grid-column: 2; grid-row: 3; }
}
@media (max-width: 480px) {
  .about-glance__list > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .about-glance__list dt { padding-top: 0; }
  .about-none { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .about-rise { animation: none !important; }
  .js .about-not__card .about-not__word::after,
  .js .about-fee .about-split__fee,
  .js .about-fee .rate-split-gain,
  .js .about-pause .about-pause__seg,
  .js .about-launch__card .checklist li { transition: none !important; transform: none !important; opacity: 1 !important; }
  .js .about-fee .rate-split-gain b,
  .js .about-fee .about-split__cap,
  .js .about-pause .about-pause__labels span,
  .js .about-pause .about-pause__ticks span { transition: none !important; opacity: 1 !important; }
  .about-pause__run { display: none !important; }
  .about-link::after { transition: none; }
}

/* ==========================================================================
   Engraved figures (stage 2): the intro plate, the key map, the risk minis,
   the launch track. Same line language as the home plate: ink hairlines on
   paper, paper hairlines on ink. Every figure plays once when it scrolls in
   (.is-in from stash-motion.js reveals()); nothing loops, so nothing needs
   pausing off-screen. Without JS and with reduced motion: the final frame.
   ========================================================================== */

/* ------------------------------------------------------------ intro plate */
.about-intro__grid { align-items: center; }
.about-plate { margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.about-plate__stage { position: relative; }
.ap { display: block; width: 100%; height: auto; overflow: visible; }
.ap-frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1.35; }
.ap-frame-2 { fill: none; stroke: var(--ink); stroke-width: .55; stroke-opacity: .5; }
.ap-screw circle { fill: var(--paper-2); stroke: var(--ink); stroke-width: .8; }
.ap-screw path { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; }
.ap-lbl { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.ap-sub { font-family: var(--f-mono); font-size: 11px; fill: var(--t2); }
.ap-tag-t { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.ap-ln { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-ln-2 { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linecap: round; stroke-opacity: .75; }
.ap-fillp { fill: var(--paper); }
.ap-dash { stroke-dasharray: 3 3; }
.ap-dots { stroke-dasharray: 1.5 3; stroke-width: 1.1; }
.ap-chip { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.ap-fee { fill: var(--ink); }
.ap-bar rect { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; }
.ap-mill { fill: none; stroke: var(--ink); stroke-width: .6; stroke-opacity: .45; }
.ap-slab { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 3 3; }
.rate-ap-fill { fill: var(--rate); stroke: none; transform-box: fill-box; transform-origin: left center; }
.ap-slab-done rect { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.rate-ap-tag { fill: var(--rate); }
.rate-ap-dot { fill: var(--rate); stroke: var(--ink); stroke-width: 1; }
.ap-axis { fill: none; stroke: var(--ink); stroke-width: .8; stroke-opacity: .5; }
.rate-ap-area { fill: var(--rate-40); }
.ap-trace { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-plate__cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .6rem;
  font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.4; color: var(--t3);
}
.about-plate__tag {
  padding: 2px 7px; border: 1px solid var(--ink); border-radius: 3px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}

/* the final frame (no JS, reduced motion, or after the run) */
.ap-chip, .rate-ap-dot { opacity: 0; }
.ap-fee { transform: translate(356px, 149px); }

/* one run: three payouts arrive, a tenth drops to the treasury, the rest becomes
   more of the coin, lands on top of the share, and vests in a straight line
   while the share-rate trace ramps in step with it. */
@keyframes ap-chip { 0% { opacity: 0; transform: translate(430px, 78px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(322px, 78px); } }
@keyframes ap-fee { 0% { opacity: 0; transform: translate(314px, 91px); } 15% { opacity: 1; } 55% { transform: translate(338.75px, 114.4px); } 100% { opacity: 1; transform: translate(356px, 149px); } }
@keyframes ap-dot {
  0% { opacity: 0; transform: translate(288px, 78px); } 10% { opacity: 1; }
  25% { transform: translate(248.5px, 83.3px); } 50% { transform: translate(211.8px, 104px); }
  75% { transform: translate(183.7px, 147.2px); } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(170px, 226px); }
}
@keyframes ap-draw { to { stroke-dashoffset: 0; } }
@keyframes ap-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
.js .about-plate .ap-trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .about-plate:not(.is-in) .ap-fee,
.js .about-plate:not(.is-in) .ap-mark,
.js .about-plate:not(.is-in) .ap-mark2,
.js .about-plate:not(.is-in) .ap-never,
.js .about-plate:not(.is-in) .rate-ap-area,
.js .about-plate:not(.is-in) .ap-slab-done { opacity: 0; }
.js .about-plate:not(.is-in) .rate-ap-fill { transform: scaleX(0); }
.js .about-plate.is-in .ap-chip { animation: ap-chip 1.1s linear both; animation-delay: calc(.5s + var(--i) * .28s); }
.js .about-plate.is-in .ap-fee { animation: ap-fee .9s var(--ease-io) 1.55s both; }
.js .about-plate.is-in .rate-ap-dot { animation: ap-dot 1.2s var(--ease-io) both; animation-delay: calc(1.9s + var(--i) * .22s); }
.js .about-plate.is-in .ap-t1 { animation: ap-draw 1.2s linear .5s forwards; }
.js .about-plate.is-in .ap-mark { animation: ap-fade .4s ease 1.6s both; }
.js .about-plate.is-in .rate-ap-fill { animation: ap-fill 3s linear 3s both; }
.js .about-plate.is-in .ap-t2 { animation: ap-draw 3s linear 3s forwards; }
.js .about-plate.is-in .rate-ap-area { animation: ap-fade 3s linear 3s both; }
.js .about-plate.is-in .ap-mark2 { animation: ap-fade .4s ease 5.9s both; }
.js .about-plate.is-in .ap-slab-done { animation: ap-fade .5s ease 6s both; }
.js .about-plate.is-in .ap-t3 { animation: ap-draw .6s linear 6s forwards; }
.js .about-plate.is-in .ap-never { animation: ap-fade .5s ease 6.4s both; }

/* ------------------------------------------------------- at a glance (row) */
.about-glance { margin-top: clamp(2.5rem, 5vw, 4rem); }
.about-glance__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 2.5rem); }
.about-glance__list > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: 1rem 0; }
.about-glance__list > div:last-child { padding-bottom: 1rem; }
.about-glance__list dt { padding-top: 0; }
.about-glance__list > .about-glance__status { grid-column: 1 / -1; grid-template-columns: 6.75rem minmax(0, 1fr); border-bottom: 0; }

/* ------------------------------------------------------------- key map */
.about-keymap {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 1rem; align-items: stretch;
}
.about-km { margin: 0; display: flex; flex-direction: column; padding: clamp(1.2rem, 2.4vw, 1.75rem); }
.about-km__top, .about-mx__top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule-2);
}
.about-km__title { font-stretch: 86%; font-weight: 760; font-size: 1.15rem; line-height: 1.15; }
.about-km__stage { flex: 1 1 auto; display: grid; place-items: center; padding-block: 1rem .5rem; }
.km { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.about-km__cap { margin-top: .5rem; padding-top: .85rem; border-top: 1px solid var(--rule); font-size: .95rem; line-height: 1.5; color: var(--fg-2); }
.km-orbit { fill: none; stroke: var(--ink); stroke-width: .8; stroke-opacity: .35; stroke-dasharray: 2 4; }
.km-teeth { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.km-wheel { transform-box: view-box; transform-origin: 180px 190px; }
.km-ln { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.km-ln-2 { fill: none; stroke: var(--ink); stroke-width: .7; stroke-opacity: .6; }
.km-fillp { fill: var(--paper); }
.km-lbl { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.km-sub { font-family: var(--f-mono); font-size: 11.5px; fill: var(--t2); }
.km-link { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.km-link--dash { stroke-dasharray: 3 3; stroke-opacity: .6; }
.km-stop { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.km-head { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.km-node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.km-node--dash circle { stroke-dasharray: 3 2.5; }
.km-key { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.km-node--you circle { fill: var(--ink); }
.km-node--you .km-key { stroke: var(--paper); }
.km-you-link { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.km-you-head { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the map draws in: each key's line runs to the wheel and stops there; the
   treasury's line runs out (the fee); yours goes through, both ways. */
.js .about-km .km-link:not(.km-link--dash), .js .about-km .km-you-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .about-km:not(.is-in) .km-stop,
.js .about-km:not(.is-in) .km-head,
.js .about-km:not(.is-in) .km-you-head,
.js .about-km:not(.is-in) .km-link--dash { opacity: 0; }
.js .about-km:not(.is-in) .km-wheel { transform: rotate(-20deg); }
.js .about-km.is-in .km-wheel { transition: transform 1.4s var(--ease) .3s; }
.js .about-km.is-in .km-link:not(.km-link--dash) { animation: ap-draw .6s var(--ease) both; animation-delay: calc(.6s + var(--i) * .22s); }
.js .about-km.is-in .km-link--dash { transition: opacity .5s ease .6s; }
.js .about-km.is-in .km-stop, .js .about-km.is-in .km-head { animation: ap-fade .25s ease both; animation-delay: calc(1.15s + var(--i) * .22s); }
.js .about-km.is-in .km-you-link { animation: ap-draw .8s var(--ease) 2.3s both; }
.js .about-km.is-in .km-you-head { animation: ap-fade .3s ease 2.9s both; }

/* ------------------------------------------------------------- the matrix */
.about-mx { display: flex; flex-direction: column; padding: clamp(1.2rem, 2.4vw, 1.75rem); }
.about-mx__legend { display: inline-flex; gap: 1rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.about-mx__legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.about-mx__legend .mx { width: 14px; height: 14px; }
.about-mx__scroll { overflow-x: auto; }
.about-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.about-matrix col, .about-matrix thead th:not(:first-child) { width: 4.6rem; }
.about-matrix thead th {
  padding: .9rem 0 .6rem; font-family: var(--f-display); font-stretch: 125%; font-weight: 700;
  font-size: var(--fs-mono-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); text-align: center;
  border-bottom: 1.5px solid var(--ink); vertical-align: bottom;
}
/* the role names across the top: Archivo 100% with tighter tracking, so "GUARDIAN" (79 px at 125%,
   webfont) fits its 4.6rem column; it ran 5.2 px into "KEEPER" at 650-1600. (Phones set them on
   their side, below.) */
@media (min-width: 641px) {
  .about-matrix thead th { font-stretch: 100%; letter-spacing: .05em; }
}
.about-matrix thead th:first-child { width: auto; }
.about-matrix tbody th { text-align: left; font-weight: 400; padding: .55rem .75rem .55rem 0; vertical-align: middle; }
.about-matrix td { text-align: center; vertical-align: middle; padding: .4rem 0; }
.about-matrix tbody tr { border-bottom: 1px solid var(--rule); }
.about-matrix tr.mx-gh { border-bottom: 0; }
.about-matrix tr.mx-gh th {
  padding: 1.1rem 0 .35rem; font-family: var(--f-mono); font-size: var(--fs-mono-s); font-weight: 400; color: var(--fg-3);
}
.mx-act { display: block; font-size: .95rem; line-height: 1.35; color: var(--fg); }
.mx-note { display: block; margin-top: .15rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.45; color: var(--fg-3); }
.mx { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }
.mx--y { background: var(--ink); }
.mx--y::before { content: ""; position: absolute; left: 6.5px; top: 4.5px; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mx--n::before, .mx--n::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.4px; margin: -.7px 0 0 -4.5px; background: var(--fg-3); transform: rotate(45deg); }
.mx--n::after { transform: rotate(-45deg); }
.mx-none .mx-act { font-weight: 600; }
.about-mx .guard__const { margin-top: auto; padding-top: 1rem; }
/* the powers tick in, row by row */
.js .about-mx:not(.is-in) .mx--y { transform: scale(0); }
.js .about-mx:not(.is-in) .mx--n { opacity: 0; }
.js .about-mx.is-in .mx--y { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.5s + var(--r, 0) * 90ms); }
.js .about-mx.is-in .mx--n { transition: opacity .3s ease; transition-delay: calc(.4s + var(--r, 0) * 90ms); }

.about-keys-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); margin-top: 1.75rem; }
.about-kf { padding-top: .9rem; border-top: 1px solid var(--rule-2); }
.about-kf .about-key__t { margin-top: 0; }
.about-kf p:not(.about-key__t) { font-size: .98rem; line-height: 1.55; color: var(--fg-2); max-width: 36rem; }

/* ------------------------------------------------------------- risk minis */
.about-risk__fig { margin: .9rem 0 .1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-d); }
.rk { display: block; width: 100%; height: auto; overflow: visible; }
.rk-lbl { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 10.4px; letter-spacing: .09em; text-transform: uppercase; fill: var(--d1); }
.rk-sub { font-family: var(--f-mono); font-size: 10.4px; fill: var(--d3); }
/* "The coin can fall to zero": the caption is set narrower; at 292 units it was wider than the
   280-unit chart and ran 11.6 px across the card's edge at 450-640 (webfont) */
.mini .rk-cap { font-stretch: 100%; letter-spacing: .04em; }
/* and the axis name "time" sits above the axis end, where the price line lands, not on the
   caption's line (they crossed by 9-22 px at every width, both fonts) */
.mini .rk-time { transform: translateY(-20px); }
.rk-stamp rect { fill: var(--ink-3); stroke: var(--d2); stroke-width: 1.1; }
.rk-stamp--todo rect { fill: none; stroke: var(--d3); stroke-dasharray: 3 3; }
.rk-suites rect { fill: var(--d3); }
.rk-axis { fill: none; stroke: var(--line-d-2); stroke-width: 1; }
.rk-price { fill: none; stroke: var(--d1); stroke-width: 1.5; stroke-linecap: round; }
.rate-rk-line { fill: none; stroke: var(--rate); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rate-rk-t { font-family: var(--f-mono); font-size: 10.4px; fill: var(--rate); }
.rk-box rect { fill: none; stroke: var(--d2); stroke-width: 1.1; }
.rk-bal { fill: var(--ink-4); stroke: var(--d3); stroke-width: 1; }
.rk-bal--hit { fill: var(--ink-4); }
.rk-arrow { fill: none; stroke: var(--d1); stroke-width: 1.3; stroke-linecap: round; }
.rk-arrow-h { fill: none; stroke: var(--d1); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rk-chip { fill: var(--d2); }
.rk-gap { fill: none; stroke: var(--d3); stroke-width: 1; stroke-dasharray: 2 4; }
.rk-band { fill: var(--line-d); }
.rk-twap { fill: none; stroke: var(--d3); stroke-width: 1; stroke-dasharray: 4 3; }
.rk-floor { fill: none; stroke: var(--d1); stroke-width: 1.4; }
.rk-spot { fill: none; stroke: var(--d2); stroke-width: 1.3; stroke-linecap: round; }
.rk-sale--ok circle { fill: var(--d1); }
.rk-sale--no circle { fill: var(--ink); stroke: var(--d1); stroke-width: 1.3; }
.rk-sale--no path { fill: none; stroke: var(--d1); stroke-width: 1.3; stroke-linecap: round; }
.rk-lead { fill: none; stroke: var(--d3); stroke-width: .9; stroke-dasharray: 1.5 2.5; }
.rk-track { fill: none; stroke: var(--line-d-2); stroke-width: 3; stroke-linecap: round; }
.rk-stopmark { fill: none; stroke: var(--d1); stroke-width: 2; stroke-linecap: round; }
.rk-span { fill: none; stroke: var(--d2); stroke-width: 3; stroke-linecap: round; }
.rk-knob circle { fill: var(--d1); stroke: var(--ink); stroke-width: 1.5; }
.rk-knob { transform: translateX(var(--kx)); }
.rk-dflt { fill: var(--d2); }

.js .about-risk .rk-price, .js .about-risk .rate-rk-line, .js .about-risk .rk-arrow,
.js .about-risk .rk-spot, .js .about-risk .rk-span { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .about-risk.is-in .rk-price, .js .about-risk.is-in .rk-arrow, .js .about-risk.is-in .rk-span { animation: ap-draw 1.6s var(--ease) .5s forwards; }
.js .about-risk.is-in .rate-rk-line { animation: ap-draw 1.8s linear .7s forwards; }
.js .about-risk.is-in .rk-spot { animation: ap-draw 2s linear .5s forwards; }
.js .about-risk:not(.is-in) .rk-stamp, .js .about-risk:not(.is-in) .rk-suites rect,
.js .about-risk:not(.is-in) .rk-sale, .js .about-risk:not(.is-in) .rk-chip, .js .about-risk:not(.is-in) .rate-rk-t { opacity: 0; }
.js .about-risk.is-in .rk-stamp { transition: opacity .4s ease; transition-delay: calc(.4s + var(--i) * .3s); }
.js .about-risk.is-in .rk-suites rect { transition: opacity .2s ease; transition-delay: calc(1.3s + var(--i) * 50ms); }
.js .about-risk.is-in .rk-chip { transition: opacity .3s ease; transition-delay: calc(.5s + var(--i) * .35s); }
.js .about-risk.is-in .rate-rk-t { transition: opacity .4s ease 2.2s; }
.js .about-risk.is-in .rk-sale--ok { transition: opacity .3s ease 1.6s; }
.js .about-risk.is-in .rk-sale--no { transition: opacity .3s ease 2.3s; }
/* the coin's contract reaches in: the vault's top balance is frozen (dashed, emptied) */
.js .about-risk.is-in .rk-bal--hit { animation: rk-hit .6s ease 1.8s both; }
@keyframes rk-hit { to { fill: transparent; stroke: var(--d1); stroke-dasharray: 3 2; } }
.rk-bal--hit { fill: transparent; stroke: var(--d1); stroke-dasharray: 3 2; }
.js .about-risk:not(.is-in) .rk-bal--hit { fill: var(--ink-4); stroke: var(--d3); stroke-dasharray: none; }
.js .about-risk:not(.is-in) .rk-knob { transform: none; }
.js .about-risk.is-in .rk-knob { transition: transform 1.1s var(--ease); transition-delay: calc(.6s + var(--i) * .2s); }

/* ---------------------------------------------------------- launch track */
.about-track { display: flex; align-items: flex-start; gap: .5rem; margin: 1.1rem 0 .4rem; }
.about-track__st { flex: none; display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 5.5rem; }
.about-track__ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px dashed var(--rule-2); background: var(--surface); transition: background .4s var(--ease), border-color .4s var(--ease);
}
.about-track__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--fg-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.about-track__st i { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.3; text-align: center; color: var(--fg-3); }
.about-track__ln { flex: 1 1 auto; height: 0; margin-top: 26px; border-top: 1.5px dashed var(--rule-2); transform-origin: left center; }
.about-launch__card:has(li[data-check="factory"][data-state="done"]) [data-st="factory"] .about-track__ic,
.about-launch__card:has(li[data-check="vault"][data-state="done"]) [data-st="vault"] .about-track__ic,
.about-launch__card:has(li[data-check="source"][data-state="done"]) [data-st="source"] .about-track__ic { background: var(--ink); border: 1.5px solid var(--ink); }
.about-launch__card:has(li[data-check="factory"][data-state="done"]) [data-st="factory"] svg,
.about-launch__card:has(li[data-check="vault"][data-state="done"]) [data-st="vault"] svg,
.about-launch__card:has(li[data-check="source"][data-state="done"]) [data-st="source"] svg { stroke: var(--paper); }
.about-launch__card:has(li[data-check="vault"][data-state="done"]) [data-ln="1"],
.about-launch__card:has(li[data-check="source"][data-state="done"]) [data-ln="2"] { border-top-style: solid; border-top-color: var(--ink); }
.js .about-launch__card:not(.is-in) .about-track__ln { transform: scaleX(0); }
.js .about-launch__card:not(.is-in) .about-track__st { opacity: 0; transform: translateY(6px); }
.js .about-launch__card.is-in .about-track__st { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .about-launch__card.is-in [data-st="vault"] { transition-delay: .5s; }
.js .about-launch__card.is-in [data-st="source"] { transition-delay: 1s; }
.js .about-launch__card.is-in .about-track__ln { transition: transform .5s var(--ease-io); }
.js .about-launch__card.is-in [data-ln="1"] { transition-delay: .2s; }
.js .about-launch__card.is-in [data-ln="2"] { transition-delay: .7s; }

/* ------------------------------------------------------------ responsive (figures) */
@media (max-width: 1060px) {
  .about-keymap { grid-template-columns: minmax(0, 1fr); }
  .about-km .km { max-width: 400px; }
  .about-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .about-plate { justify-self: center; }
}
@media (max-width: 640px) {
  .about-glance__list { grid-template-columns: minmax(0, 1fr); }
  .about-keys-foot { grid-template-columns: minmax(0, 1fr); }
  .about-matrix thead th:not(:first-child) { width: 2.4rem; height: 6.2rem; padding: .5rem 0; }
  .about-matrix thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; }
  .about-matrix thead th:first-child { width: auto; }
  .mx { width: 18px; height: 18px; }
  .mx--y::before { left: 5.8px; top: 3.8px; }
  .about-mx { padding-inline: 1rem; }
  .ap-lbl, .ap-tag-t { font-size: 13.5px; }
  .ap-sub { font-size: 13.5px; }
  .km-lbl { font-size: 13px; }
  .km-sub { font-size: 12.5px; }
}
@media (max-width: 480px) {
  .about-glance__list > .about-glance__status { grid-template-columns: minmax(0, 1fr); }
}
/* 320 px: three 5.5rem stations plus their gaps are wider than the card; let them share it. */
@media (max-width: 360px) {
  .about-track { gap: .3rem; }
  .about-track__st { flex: 0 1 5.5rem; width: auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .about-plate *, .js .about-km *, .js .about-mx *, .js .about-risk *, .js .about-launch__card * { animation: none !important; transition: none !important; }
  .js .about-plate .ap-trace, .js .about-km .km-link, .js .about-km .km-you-link,
  .js .about-risk .rk-price, .js .about-risk .rate-rk-line, .js .about-risk .rk-arrow,
  .js .about-risk .rk-spot, .js .about-risk .rk-span { stroke-dashoffset: 0 !important; }
  .js .about-plate .ap-fee, .js .about-plate .ap-mark, .js .about-plate .ap-mark2, .js .about-plate .ap-never,
  .js .about-plate .rate-ap-area, .js .about-plate .ap-slab-done, .js .about-km .km-stop, .js .about-km .km-head,
  .js .about-km .km-you-head, .js .about-km .km-link--dash, .js .about-mx .mx--n, .js .about-risk .rk-stamp,
  .js .about-risk .rk-suites rect, .js .about-risk .rk-sale, .js .about-risk .rk-chip, .js .about-risk .rate-rk-t,
  .js .about-launch__card .about-track__st { opacity: 1 !important; }
  .js .about-plate .rate-ap-fill, .js .about-mx .mx--y, .js .about-km .km-wheel, .js .about-launch__card .about-track__ln,
  .js .about-launch__card .about-track__st { transform: none !important; }
  .js .about-risk .rk-knob { transform: translateX(var(--kx)) !important; }
  .js .about-plate .ap-fee { transform: translate(356px, 149px) !important; }
}