/* [project]/src/styles/home.css [app-client] (css) */
.home-wrap {
  box-sizing: content-box;
  max-inline-size: var(--wrap);
  padding-inline: var(--margin);
  margin-inline: auto;
}

.home-wrap h2 {
  font-size: var(--step-head);
  font-weight: var(--weight-bold);
  letter-spacing: -.04em;
  margin: 0;
  line-height: 1;
}

.textlink {
  min-block-size: var(--tap);
  font-weight: var(--weight-semibold);
  text-underline-offset: .22em;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  -webkit-text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
  align-items: center;
  display: inline-flex;
}

@media (hover: hover) and (pointer: fine) {
  .textlink:hover {
    text-decoration-color: currentColor;
  }
}

.nowrap {
  white-space: nowrap;
}

.banners {
  z-index: 2;
  gap: var(--gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: calc(var(--space-12) * -1);
  display: grid;
  position: relative;
}

.banners__defs {
  block-size: 0;
  inline-size: 0;
  position: absolute;
  overflow: hidden;
}

.banner {
  --banner-ink: #f8fafc;
  aspect-ratio: 3.2;
  border-radius: var(--r-l);
  min-block-size: 205px;
  max-block-size: 275px;
  inline-size: 100%;
  color: var(--banner-ink);
  transition: border-color var(--t-hover) var(--ease-out),
    transform var(--t-hover) var(--ease-out),
    background-color var(--t-hover) var(--ease-out);
  background: #141c22;
  border: 1px solid #ffffff1f;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  padding: clamp(20px, 2.2vw, 30px);
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
  box-shadow: 0 4px 20px #00000040, inset 0 1px #ffffff14;
}

.banner--forex {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  border-color: rgb(var(--neo-tint) / .35);
}

.banner--crypto {
  background: #131d2c;
  border-color: #38bdf859;
}

@media (hover: hover) and (pointer: fine) {
  .banner:hover {
    transform: translateY(-3px);
  }

  .banner--forex:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
    border-color: rgb(var(--neo-tint) / .6);
  }

  .banner--crypto:hover {
    background: #172437;
    border-color: #38bdf899;
  }
}

.banner__content {
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-inline-size: 50%;
  display: flex;
  position: relative;
}

.banner__tag {
  font-size: .72rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  align-items: center;
  gap: 6px;
  margin-block-end: 4px;
  display: inline-flex;
}

.banner--forex .banner__tag-dot {
  background: var(--accent);
  block-size: 6px;
  inline-size: 6px;
  box-shadow: 0 0 6px var(--accent);
  border-radius: 9999px;
}

.banner--crypto .banner__tag-dot {
  background: #38bdf8;
  border-radius: 9999px;
  block-size: 6px;
  inline-size: 6px;
  box-shadow: 0 0 6px #38bdf8;
}

.banner__title {
  font-size: clamp(1.4rem, .9rem + 1.1vw, 2rem);
  font-weight: var(--weight-bold);
  letter-spacing: -.035em;
  color: #fff;
  line-height: 1.1;
}

.banner__text {
  font-size: var(--step-ui);
  color: #cbd5e1;
  max-inline-size: 34ch;
  margin-block: 6px 10px;
  line-height: 1.4;
}

.banner__cta {
  font-size: .8rem;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  transition: gap var(--t-hover) var(--ease-out);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.banner--crypto .banner__cta {
  color: #38bdf8;
}

.banner:hover .banner__cta {
  gap: 10px;
}

.banner__art {
  z-index: 1;
  pointer-events: none;
  justify-content: flex-end;
  align-items: center;
  inline-size: 48%;
  display: flex;
  position: relative;
}

.banner-emblems {
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  display: flex;
}

.banner-emblems__badge-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.banner-emblems__rate-pill {
  white-space: nowrap;
  font-size: .76rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  color: #f8fafc;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  display: inline-flex;
}

.banner-emblems--forex .banner-emblems__rate-pill {
  border-color: rgb(var(--neo-tint) / .35);
  color: var(--brand-strong);
  background: rgb(var(--neo-tint) / .1);
}

.banner-emblems--crypto .banner-emblems__rate-pill {
  color: #7dd3fc;
  background: #38bdf81a;
  border-color: #38bdf859;
}

.banner-emblems__dot {
  background: currentColor;
  border-radius: 9999px;
  block-size: 6px;
  inline-size: 6px;
}

.banner-emblems__count-pill {
  font-size: .74rem;
  font-weight: var(--weight-semibold);
  color: #94a3b8;
}

.banner-emblems__row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.banner-emblems__chip {
  background: #1e2832;
  border: 1px solid #ffffff29;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-block-size: 46px;
  min-inline-size: 78px;
  padding: 8px 16px;
  display: flex;
  box-shadow: 0 4px 12px #00000059;
}

.plate--exness {
  background: #22252a;
  border-color: #ffc10766;
}

.plate--okx {
  background: #181c22;
  border-color: #ffffff4d;
}

.plate--mexc {
  background: #162438;
  border-color: #38bdf866;
}

.plate--blofin, .plate--kucoin {
  background: #181c22;
  border-color: #ffffff3d;
}

.banner-emblems__name {
  font-size: .85rem;
  font-weight: var(--weight-bold);
  color: var(--night-ink);
}

.banner-emblems__img {
  object-fit: contain;
  block-size: 28px;
  inline-size: auto;
  max-inline-size: 100%;
}

@media (max-width: 640px) {
  .banner {
    aspect-ratio: auto;
    min-block-size: unset;
    flex-direction: column;
    gap: 16px;
    max-block-size: none;
  }

  .banner__content {
    max-inline-size: 100%;
  }

  .banner__art {
    justify-content: flex-start;
    inline-size: 100%;
  }

  .banner-emblems {
    align-items: flex-start;
  }

  .banner-emblems__row {
    flex-wrap: wrap;
  }
}

.banner-art__plus--gold, .banner-art__plus--teal {
  font: var(--weight-bold) 26px var(--font);
  fill: color-mix(in oklab, var(--money) 62%, black);
}

.banner-art__plus--teal {
  fill: color-mix(in oklab, var(--logo-brand-on-light) 70%, black);
}

.coin-gold-edge {
  stop-color: color-mix(in oklab, var(--money) 62%, black);
}

.coin-gold-mid {
  stop-color: var(--money);
}

.coin-gold-hi {
  stop-color: color-mix(in oklab, var(--money) 45%, white);
}

.coin-gold-ring {
  fill: none;
  stroke: color-mix(in oklab, var(--money) 62%, black);
  stroke-opacity: .45;
  stroke-width: 2px;
}

.coin-teal-edge {
  stop-color: color-mix(in oklab, var(--brand) 70%, black);
}

.coin-teal-mid {
  stop-color: color-mix(in oklab, var(--brand) 60%, white);
}

.coin-teal-hi {
  stop-color: color-mix(in oklab, var(--brand) 22%, white);
}

.coin-teal-ring {
  fill: none;
  stroke: color-mix(in oklab, var(--brand) 70%, black);
  stroke-opacity: .45;
  stroke-width: 2px;
}

.banner[data-banner="0"] {
  --d: .52s;
}

.banner[data-banner="1"] {
  --d: .64s;
}

@media (max-width: 860px) {
  .home-wrap h2 {
    font-size: calc(clamp(1.9rem, 8vw, 3rem) * var(--fit));
  }

  .banners {
    grid-template-columns: 1fr;
    margin-block-start: var(--space-8);
  }

  .banner {
    aspect-ratio: 16 / 9;
    min-block-size: 0;
    max-block-size: none;
    padding: var(--space-5);
  }

  .banner__art {
    block-size: 64%;
    inline-size: 62%;
    inset-block: 0 auto;
  }

  .banner__text {
    max-inline-size: 30ch;
    font-size: var(--step-small);
  }
}

@media (min-width: 600px) and (max-width: 860px) {
  .banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .banner {
    opacity: 0;
    animation: rfx-home-rise 1.3s var(--ease-expo) forwards;
    animation-delay: var(--d, 0s);
    transform: translateY(56px);
  }

  .js .banner__svg {
    animation: rfx-home-settle 1.4s var(--ease-expo) forwards;
    animation-delay: calc(var(--d, 0s) + .12s);
    transform: translate(8%, 6%) scale(1.06);
  }

  @supports (animation-timeline: view()) {
    .banner__art {
      animation: linear both rfx-home-drift;
      animation-timeline: view();
      animation-range: entry exit;
    }
  }
}

@keyframes rfx-home-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rfx-home-settle {
  to {
    transform: none;
  }
}

@keyframes rfx-home-drift {
  from {
    translate: 0 -3%;
  }

  to {
    translate: 0 4%;
  }
}

/* [project]/src/styles/home-close.css [app-client] (css) */
.hfaq__list {
  border: 1px solid var(--hfaq-line);
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: hidden;
}

.hfaq__item + .hfaq__item {
  border-block-start: 1px solid var(--hfaq-line);
}

.hfaq__item summary {
  gap: var(--space-3);
  min-block-size: 64px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--step-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out);
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  line-height: 1.35;
  list-style: none;
  display: grid;
}

.hfaq__item summary::-webkit-details-marker {
  display: none;
}

.hfaq__num {
  color: var(--muted);
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.hfaq__icon {
  border: 1px solid var(--hfaq-line);
  block-size: 32px;
  inline-size: 32px;
  color: var(--muted);
  transition: rotate var(--t-menu) var(--ease-out),
    background-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.hfaq__item[open] {
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface));
}

.hfaq__item[open] .hfaq__num {
  color: var(--brand);
}

.hfaq__item[open] .hfaq__icon {
  background: var(--cta);
  color: var(--cta-ink);
  border-color: #0000;
  rotate: 180deg;
}

.hfaq__answer {
  gap: var(--space-2);
  padding: 0 calc(var(--space-6) + 32px + var(--space-3)) var(--space-5)
    calc(var(--space-6) + 2.25rem + var(--space-3));
  color: var(--ink);
  font-size: var(--step-ui);
  line-height: 1.6;
  display: grid;
}

@media (max-width: 639.98px) {
  .hfaq__item summary {
    padding: var(--space-4);
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  }

  .hfaq__answer {
    padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.75rem + var(--space-3));
  }
}

@media (max-width: 860px) {
  .hfaq__item summary {
    min-block-size: 52px;
    padding-block: var(--space-2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .hfaq__item:not([open]) summary:hover {
    background: color-mix(in srgb, var(--step) 60%, var(--surface));
  }

  .hfaq__item summary:hover .hfaq__icon {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hfaq__icon {
    transition: none;
  }
}

/* [project]/src/styles/member-data.css [app-client] (css) */
.mb-summary {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.mb-tiles {
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  display: grid;
}

.mb-tile {
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--r-l);
  background: var(--reward-soft);
  color: var(--reward-ink);
  flex-direction: column;
  display: flex;
}

.mb-tile--quiet {
  background: var(--step);
  color: var(--ink);
}

.mb-tile__label {
  font-size: .9375rem;
  font-weight: var(--weight-semibold);
}

.mb-tile__range {
  font-size: var(--step-small);
  font-weight: var(--weight-regular);
  display: block;
}

.mb-tile__value {
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.mb-amount {
  color: var(--positive);
  letter-spacing: -.01em;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
}

.mb-tile--main .mb-amount {
  font-size: 2.25rem;
}

.mb-tile__none {
  text-wrap: pretty;
  font-size: .9375rem;
  line-height: 1.45;
}

.mb-est {
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.mb-facts {
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  font-size: var(--step-small);
  color: var(--muted);
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  display: flex;
}

.mb-paid {
  font-size: .9375rem;
  line-height: 1.5;
}

.mb-paid__note {
  font-size: var(--step-small);
  color: var(--muted);
  display: block;
}

.mb-table {
  flex-direction: column;
  display: flex;
}

.mb-table__head, .mb-table__row {
  column-gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(5.5rem, auto);
  align-items: baseline;
  display: grid;
}

.mb-table__head {
  font-size: var(--step-small);
  color: var(--muted);
  text-align: end;
  padding-block-end: var(--space-2);
}

.mb-table__row {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--step);
}

.mb-table__name {
  font-weight: var(--weight-semibold);
}

.mb-table__sub {
  font-size: var(--step-small);
  font-weight: var(--weight-regular);
  color: var(--muted);
  display: block;
}

.mb-table__num {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.mb-num, .mb-days__num {
  font-variant-numeric: tabular-nums;
  color: var(--positive);
  font-weight: var(--weight-semibold);
}

.mb-missing {
  color: var(--muted);
  font-weight: var(--weight-regular);
}

.mb-rows {
  flex-direction: column;
  padding: 0;
  list-style: none;
  display: flex;
}

.mb-row {
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--step);
  border-radius: var(--r-s);
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  display: grid;
  position: relative;
}

.mb-row:first-child {
  border-block-start: 0;
}

.mb-row:has(.mb-row__link:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.mb-row__mark {
  margin-block-start: 0;
}

.mb-row__main {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-inline-size: 0;
  display: flex;
}

.mb-row__name {
  align-items: center;
  gap: var(--space-2);
  min-block-size: 28px;
  font-weight: var(--weight-semibold);
  flex-wrap: wrap;
  display: flex;
}

.mb-row__link {
  color: var(--ink);
  outline: none;
  text-decoration: none;
}

.mb-row__link:after {
  content: "";
  position: absolute;
  inset: 0;
}

.mb-row__num {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: var(--weight-regular);
}

.mb-row__msg {
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.45;
}

.mb-row__action {
  z-index: 1;
  min-block-size: 36px;
  position: relative;
}

.mb-rows__all {
  align-self: flex-start;
}

.mb-pill {
  border-radius: var(--r-full);
  background: var(--step);
  min-block-size: 22px;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  line-height: 1.2;
  display: inline-flex;
}

.mb-pill--positive {
  background: var(--brand-soft);
  color: var(--positive);
}

.mb-pill__glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  block-size: 13px;
  inline-size: 13px;
}

.mb-pill__glyph--mark {
  background: var(--ink);
  color: var(--surface);
  font-size: .75rem;
  font-weight: var(--weight-bold);
  border-radius: 50%;
  place-items: center;
  line-height: 1;
  display: inline-grid;
}

/* [project]/src/styles/home-dashboard.css [app-client] (css) */
.dash {
  padding-block: var(--section-gap) 0;
}

.dash__panel {
  --spot-size: 34rem;
  isolation: isolate;
  align-items: center;
  gap: var(--space-10);
  padding-block: clamp(var(--space-4), 2vw, var(--space-8));
  border-radius: var(--r-xl);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  display: grid;
  position: relative;
}

.dash__panel:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(color-mix(in oklab, var(--ink) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(60% 75% at 72%, #000 0%, #0000 80%);
  mask-image: radial-gradient(60% 75% at 72%, #000 0%, #0000 80%);
}

.dash__lead {
  max-inline-size: 40ch;
  color: var(--ink-3);
  font-size: var(--step-lead);
  margin-block-start: var(--space-4);
  line-height: 1.45;
}

.dash__action {
  margin: var(--space-6) 0 0;
  justify-items: start;
  display: grid;
}

.dash__cta {
  border-radius: var(--r-ctl);
  background: var(--ink);
  min-block-size: 52px;
  color: var(--page);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  transition: background-color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  padding-inline: 26px;
  display: inline-flex;
}

.dash__cta:active {
  transform: scale(.97);
}

.dash__platform {
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  box-shadow: 0 0 0 1px var(--hairline);
  padding: 6px 12px 6px 8px;
  display: inline-flex;
}

.dash__platform-icon {
  fill: none;
  block-size: 20px;
  inline-size: 20px;
  stroke: var(--icon-idle);
  stroke-width: 1.4px;
  stroke-linecap: round;
  flex: none;
}

.dash__platform-icon circle {
  fill: var(--icon-idle);
  stroke: none;
}

.dash__screen .mb-amount {
  filter: var(--glow-money-text);
}

.dash__stage {
  padding-block: var(--space-12);
  padding-inline: var(--space-6) var(--space-2);
  position: relative;
}

.dash__screen {
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-2);
  transform-origin: 40%;
  transition: transform .7s var(--ease-out);
  margin: 0;
  display: grid;
  transform: perspective(1600px) rotateY(-11deg) rotateX(5deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash__cta:hover {
    background: color-mix(in oklab, var(--ink), var(--page) 18%);
  }

  .dash__stage:hover .dash__screen {
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  }
}

.dash__bar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.dash__screen-title {
  font-size: 1.375rem;
  font-weight: var(--weight-head);
  letter-spacing: -.02em;
  margin: 0;
}

.dash__sub {
  margin: var(--space-2) 0 0;
  font-weight: var(--weight-semibold);
}

.dash__rows {
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.dash__row {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--r-tile);
  background: var(--surface-3);
  min-block-size: 48px;
  padding: 8px 14px;
  display: flex;
}

.dash__name {
  font-weight: var(--weight-semibold);
}

.dash__last4 {
  color: var(--ink-4);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}

.dash__note {
  font-size: var(--step-small);
  color: var(--ink-4);
}

.dash__chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash__chip {
  z-index: 1;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  min-block-size: 40px;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-2);
  padding: 8px 16px 8px 8px;
  display: inline-flex;
  position: absolute;
}

.dash__chip--1 {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.dash__chip--2 {
  inset-block-start: 45%;
  inset-inline-end: calc(-1 * var(--space-4));
}

.dash__chip--3 {
  inset-block-end: 0;
  inset-inline-start: 12%;
}

.dash__chip-mark {
  border-radius: var(--r-full);
  background: var(--surface-3);
  flex: none;
  block-size: 24px;
  inline-size: 24px;
  position: relative;
}

.dash__chip-mark:before {
  content: "";
  border-inline-start: 2px solid var(--icon-idle);
  border-block-end: 2px solid var(--icon-idle);
  block-size: 5px;
  inline-size: 9px;
  position: absolute;
  inset: 8px 0 0 7px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .dash__chip {
    animation: 7s ease-in-out -1s infinite alternate rfx-dash-float;
  }

  .dash__chip--2 {
    animation-duration: 8s;
    animation-delay: -4s;
  }

  .dash__chip--3 {
    animation-duration: 6s;
    animation-delay: -2.5s;
  }
}

@keyframes rfx-dash-float {
  to {
    translate: 0 -8px;
  }
}

@media (max-width: 860px) {
  .dash__panel {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
  }

  .dash__panel:before {
    -webkit-mask-image: radial-gradient(90% 60% at 50% 70%, #000 0%, #0000 80%);
    mask-image: radial-gradient(90% 60% at 50% 70%, #000 0%, #0000 80%);
  }

  .dash__stage {
    gap: var(--space-4);
    padding: 0;
    display: grid;
  }

  .dash__screen, .dash__stage:hover .dash__screen {
    padding: var(--space-4);
    transform: none;
  }

  .dash__chips {
    gap: var(--space-2);
    flex-wrap: wrap;
    display: flex;
  }

  .dash__chip {
    white-space: normal;
    position: static;
  }
}

@media (max-width: 479px) {
  .dash__tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash__action {
    justify-items: stretch;
  }

  .dash__cta {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash__cta, .dash__screen {
    transition: none;
  }

  .dash__screen, .dash__stage:hover .dash__screen {
    transform: none;
  }
}

/* [project]/src/styles/home-b.css [app-client] (css) */
.home-wrap h2 {
  font-weight: var(--weight-head);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-head);
}

@media (max-width: 860px) {
  .home-wrap h2 {
    font-size: var(--step-head);
  }
}

.home-wrap h2 + p, .home-wrap h2 ~ .lead, .steps__lead, .brokers__lead {
  color: var(--ink-3);
}

.home-wrap h2 .title-em {
  background: var(--grad-accent);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

/* [project]/src/styles/ambient.css [app-client] (css) */
body:has(main > .hg) {
  --ambient-k: var(--ambient-k-home);
  isolation: isolate;
}

body:has(main > .hg):before {
  --amb-1: calc(.09 * var(--ambient-k));
  --amb-2: calc(.06 * var(--ambient-k));
  --amb-3: calc(.05 * var(--ambient-k));
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38rem 26rem at 8% -6%, rgb(var(--neo-tint) / var(--amb-1)), transparent 72%), radial-gradient(34rem 24rem at 96% 4%, rgb(var(--neo-2-tint) / var(--amb-2)), transparent 72%), radial-gradient(40rem 30rem at 60% 110%, rgb(var(--neo-tint) / var(--amb-3)), transparent 72%);
  position: fixed;
  inset: 0;
}

.hbd {
  --ambient-k: var(--ambient-k-hero);
}

.hg:has( > .brokers) {
  --hg-glow-a: .1;
}

.hg:has( > .steps) {
  --hg-glow-a: .1;
  --hg-glow-tint: var(--neo-2-tint);
}

.hg:has( > .dash) {
  --hg-glow-a: .11;
  --hg-glow-side: 1;
}

.hg:has( > .pay-home) {
  --hg-glow-a: .1;
  --hg-glow-tint: var(--neo-2-tint);
}

.hg:has( > .eco) {
  --hg-glow-a: .09;
  --hg-glow-side: 1;
}

.hg:has( > .hblog) {
  --hg-glow-a: .11;
  --hg-glow-tint: var(--neo-2-tint);
}

.hg:has( > .hfaq) {
  --hg-glow-a: .1;
  --hg-glow-side: 1;
}

.hg:has( > .tstrip) {
  --hg-glow-a: .11;
  --hg-glow-tint: var(--neo-2-tint);
  --hg-glow-side: 1;
}

.hg:has( > .risknote) {
  --hg-glow-a: .09;
}

.hg:has( > .eco) + .hg:empty ~ .hg {
  --hg-glow-flip: 1;
}

/* [project]/src/styles/home-grounds.css [app-client] (css) */
.hg {
  --hg-gap: var(--section-gap);
  --hg-pad: clamp(var(--space-10), 5vw, var(--space-16));
  --hg-inset: max(var(--margin), (100% - var(--wrap)) / 2);
  --hg-glow-a: 0;
  --hg-glow-tint: var(--neo-tint);
  --hg-glow-side: 0;
  --hg-glow-flip: 0;
  --hg-glow-x: calc(6% +
      (var(--hg-glow-side) + var(--hg-glow-flip) - 2 * var(--hg-glow-side) * var(--hg-glow-flip)) *
      88%);
  --ground-glow: radial-gradient(min(56rem, 120vw) 64% at var(--hg-glow-x) 50%, rgb(var(--hg-glow-tint) / calc(var(--hg-glow-a) * var(--ambient-k))), transparent 72%);
  display: flow-root;
}

.hg:empty {
  display: none;
}

.hg > .home-wrap, .hg > .pay-home {
  margin-block: 0;
  padding-block: 0;
}

.hg.ground-plain {
  padding-block: calc(var(--hg-gap) / 2);
  background: var(--ground-glow);
}

.hg.ground-band {
  padding-block: calc(var(--hg-gap) * .75);
}

.hg.ground-panel {
  margin-block: calc(var(--hg-gap) / 2);
  margin-inline: var(--hg-inset);
  padding-block: var(--hg-pad);
  box-shadow: inset 0 0 0 1px var(--hairline);
  border: 0;
}

.hg.ground-panel > .home-wrap {
  padding-inline: clamp(var(--space-4), 3vw, var(--space-10));
  background: var(--ground-glow);
}

.hg.ground-well {
  padding-block: calc(var(--hg-gap) / 2) 0;
}

body:has(.hg.ground-well) .ftr {
  margin-block-start: 0;
}

.hg :is(.wi__node-mark--brand, .stepsb__icon, .why__value--icon, .tstrip__mark, .eco__tile:not([data-tone="logo"])) {
  --cell-ink: var(--cell-tone, var(--icon-idle));
  --cell-lit: var(--cell-tone, var(--neo));
  --eco-ink: var(--cell-lit);
  border-radius: var(--r-tile);
  background: var(--panel);
  color: var(--cell-ink);
  box-shadow: 0 0 0 1px var(--hairline);
  transition: color .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}

:root[data-theme="light"] .hg :is(.wi__node-mark--brand, .stepsb__icon, .why__value--icon, .tstrip__mark, .eco__tile:not([data-tone="logo"])) {
  --cell-lit: var(--cell-tone, var(--neo-deep));
  background: var(--surface-1);
}

.hg :is(.eco__tile[data-tone="money"], .stepsb__icon[data-kind="paid"]) {
  --cell-tone: var(--money);
}

.hg .eco__tile:not([data-tone="logo"]) {
  --cell-ink: var(--cell-tone, var(--eco-tone, var(--neo)));
}

.hg .eco__tile[data-tone="blue"] {
  --eco-tone: var(--accent-blue);
}

:root[data-theme="light"] .hg .eco__tile:not([data-tone="logo"]) {
  --cell-ink: var(--cell-tone, var(--eco-tone, var(--neo-deep)));
}

.hg :is(.stepsb__card, .why__card, .tstrip__tile, .eco__item, .wi__node):is(:hover, :focus-visible, :focus-within) :is(.wi__node-mark--brand, .stepsb__icon, .why__value--icon, .tstrip__mark, .eco__tile:not([data-tone="logo"])) {
  color: var(--cell-lit);
  box-shadow: 0 0 0 1.5px var(--cell-lit), 0 0 18px -6px color-mix(in srgb, var(--cell-lit) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hg :is(.wi__node-mark--brand, .stepsb__icon, .why__value--icon, .tstrip__mark, .eco__tile:not([data-tone="logo"])) {
    transition: none;
  }
}

/* [project]/src/styles/motion-slow.css [app-client] (css) */
@property --glow-dx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glow-dy {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glow-py {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glow-k {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --shine {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -30%;
}

.hg {
  --rise: 24px;
  --stagger: .1s;
  --lift: -4px;
  --beam-speed: 9s;
}

.lead-in {
  --beam-speed: 9s;
}

.hg .bmarq {
  --bmarq-dur: 56s;
}

@media (max-width: 639.98px) {
  .hg .bmarq {
    --bmarq-dur: 44s;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hg [data-reveal-group] > h2 {
    clip-path: inset(-.25em -.25em 100%);
    transition: opacity var(--t-reveal) var(--ease-expo),
      transform var(--t-reveal-move) var(--ease-expo),
      clip-path .9s var(--ease-out);
    transition-delay: var(--d, 0s);
  }

  .js .hg [data-reveal-group].is-in > h2 {
    clip-path: inset(-.25em);
  }

  .hg .home-wrap h2 .title-em {
    background-size: 200% 100%;
    animation: 11s ease-in-out infinite alternate fx-em-sweep;
  }

  .hg.ground-panel {
    --glow-x: 0%;
    background: radial-gradient(var(--panel-glow-size) at calc(var(--glow-x) + var(--glow-dx)) calc(var(--glow-dy) + var(--glow-py)), rgb(var(--neo-tint) / calc(var(--panel-glow) * var(--glow-k))), transparent 70%), var(--panel);
    animation: 21s ease-in-out infinite alternate fx-halo;
  }

  .hg.ground-panel--glow-right {
    --glow-x: 100%;
  }

  .hg.ground-band {
    position: relative;
    overflow-x: clip;
  }

  .hg.ground-band:before, .hg.ground-band:after {
    content: "";
    pointer-events: none;
    block-size: 1px;
    position: absolute;
    inset-block-start: 0;
  }

  .hg.ground-band:before {
    background: linear-gradient(90deg, transparent, rgb(var(--neo-tint) / .16) 50%, transparent);
    inset-inline: 0;
  }

  .hg.ground-band:after {
    background: linear-gradient(90deg, transparent, rgb(var(--neo-tint) / .55), transparent);
    inline-size: 22%;
    animation: 14s linear infinite fx-band-run;
    inset-inline-start: 0;
  }

  .hg.ground-panel:has( > :is(.eco, .vip)):before {
    content: "";
    z-index: -1;
    border-radius: inherit;
    opacity: .26;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .hg.ground-panel:has( > :is(.eco, .vip)):after {
    content: "";
    z-index: -1;
    border-radius: inherit;
    opacity: .26;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .hg.ground-panel:has( > :is(.eco, .vip)):before {
    --coin: color-mix(in srgb, var(--money) 90%, transparent);
    background: radial-gradient(7px circle at 8% 14%, var(--coin) 0 5px, transparent 6px), radial-gradient(5px circle at 46% 6%, var(--coin) 0 3.5px, transparent 4.5px), radial-gradient(6px circle at 88% 22%, var(--coin) 0 4.5px, transparent 5.5px);
    animation: 18s ease-in-out infinite alternate fx-coin-a;
  }

  .hg.ground-panel:has( > :is(.eco, .vip)):after {
    --coin: color-mix(in srgb, var(--money-2) 90%, transparent);
    background: radial-gradient(5px circle at 24% 64%, var(--coin) 0 3.5px, transparent 4.5px), radial-gradient(6px circle at 72% 58%, var(--coin) 0 4.5px, transparent 5.5px);
    opacity: .2;
    animation: 15s ease-in-out infinite alternate fx-coin-b;
  }

  body:has(.hg.ground-well) .ftr {
    isolation: isolate;
    position: relative;
  }

  body:has(.hg.ground-well) .ftr:before {
    content: "";
    z-index: -1;
    background: radial-gradient(circle, rgb(var(--neo-tint) / .16) 1px, transparent 1.5px) 0 0 / 24px 24px;
    pointer-events: none;
    animation: 20s ease-in-out infinite alternate fx-dots;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#0000, #000 30% 70%, #0000);
    mask-image: linear-gradient(#0000, #000 30% 70%, #0000);
  }

  html[data-settled].js .hero__line--grad .hero__word {
    background-image: linear-gradient(105deg, transparent calc(var(--shine) - 14%), var(--money-2) var(--shine), transparent calc(var(--shine) + 14%)), var(--grad-accent);
    background-size: 100% 100%, 200% 100%;
    animation: 8s ease-in-out infinite alternate rfx-hero-grad, 10s ease-in-out infinite fx-shine;
  }

  html[data-settled].js .lead-in:not([data-live]) .hero__line--grad .hero__word {
    animation-play-state: paused;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hg.ground-panel {
      animation: 21s ease-in-out infinite alternate fx-halo, linear both fx-halo-trail;
      animation-timeline: auto, view();
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation-duration: .25s;
    animation-timing-function: var(--ease-out);
  }

  ::view-transition-new(root) {
    animation-duration: .25s;
    animation-timing-function: var(--ease-out);
  }
}

@keyframes fx-em-sweep {
  from {
    background-position: 0%;
  }

  to {
    background-position: 100%;
  }
}

@keyframes fx-halo {
  from {
    --glow-dx: 0%;
    --glow-dy: 0%;
    --glow-k: .85;
  }

  50% {
    --glow-dx: 9%;
    --glow-dy: 7%;
    --glow-k: 1.2;
  }

  to {
    --glow-dx: 3%;
    --glow-dy: 14%;
    --glow-k: .95;
  }
}

@keyframes fx-halo-trail {
  from {
    --glow-py: -6%;
  }

  to {
    --glow-py: 6%;
  }
}

@keyframes fx-band-run {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(460%);
  }
}

@keyframes fx-coin-a {
  from {
    transform: translate(0, -2%);
  }

  to {
    transform: translate(1.5%, 9%);
  }
}

@keyframes fx-coin-b {
  from {
    transform: translate(0, -4%);
  }

  to {
    transform: translate(-1.5%, 7%);
  }
}

@keyframes fx-dots {
  to {
    transform: translateY(12px);
  }
}

@keyframes fx-shine {
  from {
    --shine: -30%;
  }

  40%, to {
    --shine: 130%;
  }
}

/* [project]/src/styles/motion-slow-ui.css [app-client] (css) */
@property --sheen {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.fx-btn {
  --fx-sheen: color-mix(in srgb, var(--money-2) 75%, transparent);
  position: relative;
  overflow: hidden;
}

:root[data-theme="light"] .fx-btn {
  --fx-sheen: color-mix(in srgb, var(--surface) 70%, transparent);
}

[data-count] {
  font-variant-numeric: tabular-nums;
}

:is(.lead-in, .hg) :is(a, button).fx-btn {
  background-color: var(--cta);
  background-image: var(--cta-fill);
  box-shadow: var(--glow-cta);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.lead-in, .hg) :is(a, button).fx-btn:focus-visible {
    box-shadow: var(--glow-cta-hover);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(.lead-in, .hg) :is(a, button).fx-btn:hover {
    box-shadow: var(--glow-cta-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.lead-in, .hg) :is(a, button).fx-btn {
    background-image: linear-gradient(105deg, transparent calc(var(--sheen) - 18%), var(--fx-sheen) var(--sheen), transparent calc(var(--sheen) + 18%)), linear-gradient(100deg, var(--neo), var(--neo-2) 50%, var(--neo));
    translate: var(--mag-x, 0px) var(--mag-y, 0px);
    transition: translate .45s var(--ease-out),
      --sheen 0s,
      box-shadow .4s var(--ease-out),
      transform var(--t-press) var(--ease-out);
    background-size: 100% 100%, 200% 100%;
    animation: 9s ease-in-out infinite alternate fx-grad-pan;
  }

  .lead-in:not([data-live]) .fx-btn {
    animation-play-state: paused;
  }

  :is(.lead-in, .hg) :is(a, button).fx-btn:is(:hover, :focus-visible) {
    --sheen: 140%;
    transition: translate .45s var(--ease-out),
      --sheen .7s var(--ease-out),
      box-shadow .4s var(--ease-out),
      transform var(--t-press) var(--ease-out);
  }

  .fx-btn:after {
    content: "";
    background: var(--fx-sheen);
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    block-size: 12px;
    inline-size: 12px;
    margin: -6px;
    position: absolute;
    inset-block-start: var(--ry, 50%);
    inset-inline-start: var(--rx, 50%);
  }

  .fx-btn.is-ripple:after {
    animation: fx-ripple .6s var(--ease-out);
  }

  :is(.fx-btn, .hblog__all, .tstrip__all, .why__link) :is(svg:last-child, [aria-hidden="true"]:last-child) {
    transition: translate .42s var(--ease-out);
  }

  .fx-btn-2 {
    transition: box-shadow .45s var(--ease-out),
      transform var(--t-press) var(--ease-out),
      background-color var(--t-hover) ease;
  }

  .fx-pill.is-pill-on:after {
    transition: translate .42s var(--ease-out),
      inline-size .42s var(--ease-out),
      block-size .42s var(--ease-out);
  }

  .hg :is(.stepsb__icon, .why__value--icon, .tstrip__mark) {
    animation: 7s ease-in-out infinite alternate fx-float;
  }

  .hg :nth-child(2) > * > :is(.stepsb__icon, .tstrip__mark), .hg :nth-child(2) > * > .why__head > .why__value--icon {
    animation-delay: -2.3s;
  }

  .hg :nth-child(3) > * > :is(.stepsb__icon, .tstrip__mark), .hg :nth-child(3) > * > .why__head > .why__value--icon {
    animation-delay: -4.6s;
  }

  .hg :nth-child(4) > * > :is(.stepsb__icon, .tstrip__mark), .hg :nth-child(4) > * > .why__head > .why__value--icon {
    animation-delay: -1.2s;
  }

  .hg :is(.bkp__item.fx-beam, .vip__card.fx-beam, .cmp-beam.fx-beam) {
    --beam-speed: 14s;
    --beam-from: var(--neo);
    --beam-to: var(--neo-2);
  }

  .is-count-armed .odo__strip {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(.fx-btn, .hblog__all, .tstrip__all, .why__link):hover :is(svg:last-child, [aria-hidden="true"]:last-child) {
    translate: 3px;
  }

  .fx-btn-2:hover {
    box-shadow: 0 0 0 1px rgb(var(--neo-tint) / .75), 0 0 22px -6px rgb(var(--neo-tint) / .6);
  }
}

.fx-pill {
  isolation: isolate;
  position: relative;
}

.fx-pill:after {
  content: "";
  z-index: -1;
  inline-size: var(--pill-w, 0px);
  block-size: var(--pill-h, 0px);
  translate: var(--pill-x, 0px) var(--pill-y, 0px);
  border-radius: var(--pill-r, var(--r-full));
  background: var(--cta);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.fx-pill.is-pill:after {
  opacity: 1;
}

.fx-pill.is-pill-moving > [aria-selected="true"] {
  background: none;
}

.fx-pill.is-pill-moving > :has( > input:checked) {
  background: none;
}

@keyframes fx-grad-pan {
  from {
    background-position: 0%;
  }

  to {
    background-position: 100%;
  }
}

@keyframes fx-ripple {
  from {
    opacity: .55;
    transform: scale(.5);
  }

  to {
    opacity: 0;
    transform: scale(26);
  }
}

@keyframes fx-float {
  from {
    translate: 0;
  }

  to {
    translate: 0 -4px;
  }
}

/* [project]/src/styles/home-hero.css [app-client] (css) */
.lead-in {
  isolation: isolate;
  padding-block-end: var(--space-12);
  position: relative;
  overflow-x: clip;
}

.hero__ground {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: clip;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 7rem), #0000);
  mask-image: linear-gradient(#000 calc(100% - 7rem), #0000);
}

.hero__skyline {
  z-index: -2;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: clip;
}

.hero__skyline-img {
  object-fit: cover;
  opacity: .14;
  width: 100%;
  height: 100%;
}

.silk {
  z-index: -1;
  --silk-band: color-mix(in oklab, var(--silk-a) 70%, transparent);
  --silk-1: radial-gradient(70% 60% at 78% 18%, var(--silk-a), transparent 62%);
  --silk-2: radial-gradient(45% 55% at 12% 88%, var(--silk-b), transparent 70%);
  --silk-3: linear-gradient(118deg, transparent 32%, var(--silk-band) 46%, transparent 61%);
  --silk-4: linear-gradient(180deg, var(--bg-hi), var(--bg));
  background: var(--silk-1), var(--silk-2), var(--silk-3), var(--silk-4);
  position: absolute;
  inset: 0;
  overflow: clip;
}

.hero {
  --hero-display: calc(clamp(1.85rem, 1.1rem + 1.8vw, 2.95rem) * var(--fit));
  --calc-w: clamp(420px, 18vw + 230px, 600px);
  grid-template-columns: minmax(0, 1fr) var(--calc-w) minmax(0, 1fr);
  box-sizing: content-box;
  max-inline-size: var(--wrap);
  padding-block: clamp(20px, 4svh, 48px) calc(var(--hero-display) * .84 + 8px);
  padding-inline: var(--margin);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 4.5rem);
  margin-inline: auto;
  display: grid;
}

@media (min-width: 1600px) {
  .hero {
    --hero-display: calc(clamp(2.95rem, 1.5rem + 1.2vw, 3.5rem) * var(--fit));
  }
}

.hero__title {
  font-size: var(--hero-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -.045em;
  text-wrap: wrap;
  grid-area: 1 / 1 / auto / -1;
  justify-content: space-between;
  gap: 2rem;
  margin: 0;
  display: flex;
}

.hero__half {
  max-inline-size: 34%;
  display: block;
}

.hero__half--end {
  text-align: end;
}

.hero__line {
  white-space: nowrap;
  display: block;
}

.hero__frame {
  z-index: 1;
  inline-size: 100%;
  grid-area: 1 / 2 / span 3;
  margin-block-start: calc(var(--hero-display) * 1.06);
  position: relative;
}

.hero__frame > .stack {
  margin-inline-end: calc(var(--peek-x) * -2);
}

.hero__lead, .hero__facts {
  grid-column: 1;
  max-inline-size: 30rem;
}

.hero__lead {
  grid-row: 3;
  align-self: start;
  margin-block-start: clamp(var(--space-6), 2.4vw, var(--space-10));
}

.hero__lead p {
  font-size: var(--step-lead);
  max-inline-size: 26ch;
  margin: 0 0 22px;
  line-height: 1.38;
}

.hero__actions {
  align-items: center;
  gap: var(--space-3) 22px;
  flex-wrap: wrap;
  display: flex;
}

.hero__cta {
  border-radius: var(--r-s);
  background: var(--cta);
  min-block-size: 48px;
  color: var(--cta-ink);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
    background-color var(--t-hover) ease;
  border: 0;
  justify-content: center;
  align-items: center;
  padding-inline: 22px;
  text-decoration: none;
  display: inline-flex;
}

.hero__cta:active {
  transform: scale(.97);
}

.hero__have {
  min-block-size: var(--tap);
  font-weight: var(--weight-semibold);
  text-underline-offset: .22em;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  -webkit-text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
  align-items: center;
  display: inline-flex;
}

@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover {
    background: var(--cta-2);
  }

  .hero__have:hover, .hero__member-link:hover {
    text-decoration-color: currentColor;
  }
}

.hero__lead .hero__member {
  margin: var(--space-4) 0 0;
  max-inline-size: none;
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.45;
  display: grid;
}

.hero__member-line {
  grid-area: 1 / 1;
}

.hero__member-link {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-underline-offset: .22em;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  -webkit-text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.hero__note {
  width: fit-content;
  margin: var(--space-5) 0 0;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  border: 1px solid var(--step);
  color: var(--ink);
  grid-area: 4 / 1;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: .8125rem;
  display: inline-flex;
}

.hero__note-icon {
  fill: none;
  block-size: 14px;
  inline-size: 14px;
  stroke: var(--brand);
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.hero__note-text {
  font-weight: var(--weight-semibold);
}

.hero__facts {
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: start;
  gap: 10px;
  max-inline-size: 34rem;
  margin: clamp(20px, 2.2vw, 36px) 0 0;
  padding: 0;
  display: grid;
}

.hero__fact-card {
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--step);
  flex-direction: column;
  padding: 12px 14px;
  transition: transform .2s, border-color .2s;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .hero__fact-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
  }
}

.hero__fact-head {
  justify-content: space-between;
  align-items: center;
  margin-block-end: 6px;
  display: flex;
}

.hero__fact-val {
  font-size: 1.1875rem;
  font-weight: var(--weight-bold);
  color: var(--green-neon);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.hero__fact-title {
  font-size: .8125rem;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-block-end: 4px;
  line-height: 1.25;
  display: block;
}

.hero__fact-desc {
  color: var(--muted);
  margin: 0;
  font-size: .725rem;
  line-height: 1.35;
}

@media (min-width: 1600px) {
  .hero__facts {
    gap: 14px;
    max-inline-size: 38rem;
  }
}

@media (min-width: 861px) and (max-width: 1500px) {
  .hero__actions {
    align-items: flex-start;
    gap: var(--space-1);
    flex-direction: column;
  }
}

@media (min-width: 861px) and (max-width: 1240px) {
  .hero__lead p {
    max-inline-size: none;
    font-size: 1.125rem;
  }
}

@media (min-width: 861px) and (max-width: 1000px) {
  .hero__frame {
    margin-block-start: calc(var(--hero-display) * 1.9 + var(--space-5));
  }
}

@media (max-width: 860px) {
  .lead-in {
    padding-block-end: var(--space-12);
  }

  .hero {
    column-gap: var(--gutter);
    padding-block: var(--space-2);
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "note"
                         "title"
                         "lead"
                         "calc"
                         "deck"
                         "dots"
                         "facts";
  }

  .hero__note {
    margin-block: 0 var(--space-2);
    grid-area: note;
  }

  .hero__title {
    font-size: calc(clamp(1.65rem, 5.2vw, 2.35rem) * var(--fit));
    text-wrap: balance;
    grid-area: title;
    line-height: 1.15;
    display: block;
  }

  .hero__half {
    text-align: start;
    max-inline-size: none;
    display: inline;
  }

  .hero__line {
    vertical-align: top;
    display: inline-block;
  }

  .hero__frame {
    display: contents;
  }

  .hero__lead {
    grid-area: lead;
    margin-block-start: var(--space-4);
  }

  .hero__lead p {
    max-inline-size: 34ch;
    margin-block-end: var(--space-4);
    font-size: 1.125rem;
  }

  .hero__facts {
    grid-area: facts;
    margin-block-start: 18px;
  }
}

@media (max-width: 599px) {
  .hero__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (min-width: 600px) and (max-width: 860px) {
  .hero {
    grid-template: "note note"
                   "title title"
                   "lead calc"
                   "facts calc"
                   "deck deck" minmax(0, 1fr)
                   "dots dots"
                   / minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .hero__lead p {
    max-inline-size: none;
  }

  .hero__lead, .hero__facts, .hero .stack__sheet {
    margin-block-start: var(--space-6);
  }

  .hero .bc {
    justify-self: center;
    inline-size: min(100%, 34rem);
  }
}

.hero .deal[data-k="1"] {
  --k: 1;
}

.hero .deal[data-k="2"] {
  --k: 2;
}

.hero .deal[data-k="3"] {
  --k: 3;
}

.hero .deal[data-k="4"] {
  --k: 4;
}

.hero .deal[data-k="5"] {
  --k: 5;
}

.hero .deal[data-k="6"] {
  --k: 6;
}

.hero [data-load="1"] {
  --d: .38s;
}

.hero [data-load="2"] {
  --d: .46s;
}

.hero [data-load="3"] {
  --d: .52s;
}

.hero [data-load="4"] {
  --d: .58s;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero .sheet {
    clip-path: inset(0 0 100% 0 round var(--r-l));
    animation: rfx-hero-open 1.2s var(--ease-in-out) .12s forwards;
  }

  .js .hero .deal {
    opacity: 0;
    animation: rfx-hero-deal .8s var(--ease-expo) forwards;
    animation-delay: calc(.42s + var(--k, 0) * 70ms);
    transform: translateY(14px);
  }

  .js .hero [data-load] {
    opacity: .01;
    animation: rfx-hero-deal .9s var(--ease-expo) forwards;
    animation-delay: var(--d, 0s);
    transform: translateY(16px);
  }

  @supports (animation-timeline: scroll()) {
    .silk {
      animation: linear both rfx-silk-drift;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

@keyframes rfx-hero-open {
  to {
    clip-path: inset(0 0 0 0 round var(--r-l));
  }
}

@keyframes rfx-hero-deal {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rfx-silk-drift {
  to {
    transform: translateY(12%) scale(1.08);
  }
}

/* [project]/src/styles/home-hero-desktop.css [app-client] (css) */
@media (min-width: 861px) {
  .hero {
    --hero-display: calc(clamp(2.2rem, 1.2rem + 2.4vw, 3.6rem) * var(--fit));
    --calc-w: clamp(420px, 30vw + 128px, 620px);
    grid-template-columns: minmax(0, 1fr) var(--calc-w);
    grid-template-rows: auto auto auto 1fr;
  }

  .hero__title {
    grid-area: 1 / 1;
    display: block;
  }

  .hero__half {
    max-inline-size: none;
    display: block;
  }

  .hero__half--end {
    color: var(--brand);
    text-align: start;
  }

  .hero__line {
    display: inline;
  }

  .hero__frame {
    grid-area: 1 / 2 / span 4;
    margin-block-start: 0;
  }

  .hero__lead {
    grid-row: 2;
    margin-block-start: var(--space-6);
  }

  .hero__facts {
    grid-row: 3;
    margin-block-start: var(--space-8);
  }

  .hero__note {
    grid-row: 4;
  }
}

/* [project]/src/styles/home-hero-b.css [app-client] (css) */
.lead-in {
  --spot-size: 34rem;
  --fx-tint: color-mix(in oklab, var(--accent-wash) 35%, transparent);
}

.hero__actions {
  align-items: center;
  gap: var(--space-3);
  flex-direction: row;
}

.hero__cta, .hero__have {
  border-radius: var(--r-ctl);
  min-block-size: 48px;
  transition: transform var(--t-press) var(--ease-bounce),
    background-color var(--t-hover) ease,
    box-shadow var(--t-hover) ease;
  justify-content: center;
  text-decoration: none;
}

.hero__cta {
  background: var(--cta);
  box-shadow: 0 0 0 1px var(--cta-edge), var(--elev-cta);
  --beam-from: var(--accent-blue);
  --beam-to: var(--ink);
  --beam-width: 2px;
  padding-inline: 22px;
}

:root[data-theme="light"] .hero__cta {
  --beam-to: var(--surface-2);
}

.lead-in:not([data-live]) .hero__cta:before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta.fx-beam:before {
    content: none;
  }
}

.hero__have {
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  box-shadow: 0 0 0 1px var(--edge-soft);
  color: var(--ink);
  padding-inline: 20px;
}

.hero__have:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover {
    background: var(--cta-2);
    transform: translateY(var(--lift));
  }

  .hero__have:hover {
    box-shadow: 0 0 0 1px var(--edge);
    transform: translateY(var(--lift));
  }
}

.hero__facts {
  box-shadow: inset 0 1px 0 var(--hairline);
  gap: 0;
  padding-block-start: var(--space-5);
}

.hero__fact-card {
  padding: 0 var(--space-4);
  box-shadow: inset 1px 0 0 var(--hairline);
  background: none;
  border: 0;
  border-radius: 0;
}

.hero__fact-card:first-child {
  box-shadow: none;
  padding-inline-start: 0;
}

.hero__fact-head {
  margin-block-end: var(--space-1);
}

.hero__fact-val {
  color: var(--ink);
  font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem);
  font-weight: var(--weight-head);
  letter-spacing: -.03em;
  line-height: 1.15;
}

.hero__fact-title {
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  color: var(--ink-2);
}

.hero__fact-desc {
  font-size: var(--step-caption);
  color: var(--ink-dim);
}

@media (hover: hover) and (pointer: fine) {
  .hero__fact-card:hover {
    transform: none;
  }
}

@media (max-width: 1099px) {
  .hero__facts {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__fact-card, .hero__fact-card:first-child {
    padding: var(--space-4) 0 0;
    box-shadow: inset 0 1px 0 var(--hairline);
  }

  .hero__fact-card:first-child {
    box-shadow: none;
    padding-block-start: 0;
  }
}

@media (max-width: 599px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 861px) {
  .hero {
    grid-template-rows: auto auto auto auto 1fr;
  }

  .hero__note {
    grid-area: 1 / 1;
  }

  .hero__title {
    grid-row: 2;
  }

  .hero__lead {
    grid-row: 3;
    max-inline-size: none;
  }

  .hero__facts {
    grid-row: 4;
    max-inline-size: none;
  }

  .hero__frame {
    grid-row: 1 / span 5;
  }
}

@media (max-width: 1023px) {
  .hero .hero__fact-desc {
    color: var(--ink-2);
  }
}

/* [project]/src/styles/home-hero-b-type.css [app-client] (css) */
.hero {
  --hero-grad-a: var(--accent);
}

.hero__note {
  margin: 0 0 var(--space-5);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-1);
  color: var(--ink-3);
  font-size: var(--step-caption);
  border: 0;
  padding: 6px 14px 6px 10px;
}

.hero__note-icon {
  stroke: var(--accent);
}

.hero__title {
  font-size: var(--step-display);
  font-weight: var(--weight-head);
  text-wrap: wrap;
  line-height: 1.04;
  container-type: inline-size;
}

.hero__line {
  font-size: var(--step-display);
  letter-spacing: var(--tracking-display);
  white-space: normal;
  font-size: clamp(2.5rem, 12.6cqi, 5.25rem);
  display: block;
}

@media (max-width: 860px) {
  .hero__line {
    font-size: clamp(2.75rem, 9cqi, 4rem);
  }
}

@media (max-width: 359px) {
  .hero__line {
    font-size: clamp(2.25rem, 12.6cqi, 2.75rem);
  }
}

.hero__word {
  vertical-align: top;
  display: inline-block;
}

.hero__line--grad .hero__word {
  color: var(--hero-grad-a);
  background-image: var(--grad-accent);
  -webkit-text-fill-color: transparent;
  background-position: 0%;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  margin-block-end: -.12em;
  padding-block-end: .12em;
}

@media (forced-colors: active) {
  .hero__line--grad .hero__word {
    -webkit-text-fill-color: currentColor;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__line--grad .hero__word {
    animation: 8s ease-in-out infinite alternate rfx-hero-grad;
  }
}

.lead-in:not([data-live]) .hero__line--grad .hero__word {
  animation-play-state: paused;
}

@keyframes rfx-hero-grad {
  to {
    background-position: 100%;
  }
}

.hero__lead p {
  color: var(--ink-3);
  font-size: var(--step-lead);
  max-inline-size: 36ch;
  line-height: 1.6;
}

/* [project]/src/styles/quick-calc-options.css [app-client] (css) */
.qopt {
  margin-block-end: var(--space-3);
  display: flex;
}

html:not(.js) .qopt {
  display: none;
}

.sheet__own-field.qopt-symbol {
  flex: 100%;
  min-inline-size: 0;
}

.qopt-hint {
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.4;
}

.sheet__own-field.qopt-own {
  flex: 2 16rem;
  min-inline-size: 0;
}

.qopt-own__row {
  gap: var(--space-2);
  align-items: stretch;
  min-inline-size: 0;
  display: flex;
}

.sheet__own-field.qopt-own input {
  flex: 5rem;
  inline-size: auto;
  min-inline-size: 0;
}

.seg.qopt-unit {
  flex: none;
  grid-auto-columns: auto;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.seg.qopt-unit button {
  min-inline-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--r-m);
  white-space: nowrap;
}

@media (max-width: 359px) {
  .qopt-own__row {
    flex-wrap: wrap;
  }

  .seg.qopt-unit {
    flex: 100%;
    grid-auto-columns: 1fr;
  }
}

/* [project]/src/styles/hero-calc.css [app-client] (css) */
.hcalc {
  min-inline-size: 0;
}

.hcalc > .sheet[data-ui] {
  padding: var(--space-6);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline),
    var(--elev-2);
}

.hcalc__title {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: var(--weight-head);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.hcalc__pick {
  margin-block-end: var(--space-5);
  container: hcalc / inline-size;
}

.hcalc__circuit {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.hcalc__wires {
  aspect-ratio: 600 / 88;
  block-size: auto;
  inline-size: 100%;
  display: block;
  overflow: visible;
}

.hcalc__trunk {
  block-size: 40px;
  inline-size: 12px;
  display: none;
  overflow: visible;
}

.hcalc__base, .hcalc__run {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hcalc__base {
  stroke: color-mix(in oklab, var(--accent) 28%, transparent);
  stroke-width: 2px;
  transition: stroke var(--t-hover) ease;
}

.hcalc__wire.is-on .hcalc__base {
  stroke: var(--accent);
}

.hcalc__run {
  stroke: var(--neo-2);
  stroke-width: 3px;
  stroke-dasharray: .12 2;
  stroke-dashoffset: .14px;
  opacity: .8;
}

.hcalc__wire.is-on .hcalc__run {
  stroke: var(--accent);
  opacity: 1;
}

.hcalc [data-ui] .hcalc__node {
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  padding: 8px 16px;
  line-height: 1;
  display: inline-flex;
}

.hcalc__node .hcalc__logo {
  font-size: 1rem;
}

@container hcalc (max-width: 339px) {
  .hcalc__wires {
    display: none;
  }

  .hcalc__trunk {
    display: block;
  }
}

.hcalc__pick.is-merged .hcalc__trunk {
  display: block;
}

.hcalc [data-ui] .cslide {
  --thumb: 24px;
  margin-block-end: var(--space-1);
}

.cslide__head {
  align-items: baseline;
  gap: var(--space-3);
  display: flex;
}

.hcalc [data-ui] .cslide__value {
  color: var(--ink);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-inline-start: auto;
}

.cslide__track {
  block-size: var(--tap);
  position: relative;
}

.cslide__rail, .cslide__fill {
  inset-inline: calc(var(--thumb) / 2);
  border-radius: var(--r-full);
  pointer-events: none;
  block-size: 6px;
  position: absolute;
  inset-block-start: calc(50% - 3px);
}

.cslide__rail {
  background: var(--surface-3);
}

.cslide__fill {
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0;
}

.hcalc [data-ui] .cslide__range {
  cursor: pointer;
  appearance: none;
  touch-action: pan-y;
  background: none;
  block-size: 100%;
  inline-size: 100%;
  margin: 0;
  position: absolute;
  inset: 0;
}

.cslide__range::-webkit-slider-runnable-track {
  background: none;
  block-size: 100%;
}

.cslide__range::-moz-range-track {
  background: none;
  block-size: 100%;
}

.hcalc [data-ui] .cslide__range::-webkit-slider-thumb {
  inline-size: var(--thumb);
  block-size: var(--thumb);
  border: 3px solid var(--surface-1);
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  appearance: none;
  transition: transform var(--t-press) var(--ease-out);
  border-radius: 50%;
  margin-block-start: calc((var(--tap) - var(--thumb)) / 2);
}

.hcalc [data-ui] .cslide__range::-moz-range-thumb {
  inline-size: var(--thumb);
  block-size: var(--thumb);
  box-sizing: border-box;
  border: 3px solid var(--surface-1);
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform var(--t-press) var(--ease-out);
  border-radius: 50%;
}

.cslide__range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.cslide__range:active::-moz-range-thumb {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .cslide__range:active::-webkit-slider-thumb {
    transform: none;
  }

  .cslide__range:active::-moz-range-thumb {
    transform: none;
  }
}

.cslide__range:focus-visible {
  outline-offset: 0;
  border-radius: var(--r-ctl);
}

.cslide.is-idle .cslide__track, .cslide.is-idle .cslide__value {
  opacity: .5;
}

.cslide__marks {
  block-size: var(--tap);
  margin-inline: calc(var(--thumb) / 2);
  position: relative;
}

.hcalc [data-ui] .cslide__mark {
  min-block-size: var(--tap);
  border-radius: var(--r-ctl);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(calc(var(--at, 0) * -100%));
  transition: background-color var(--t-hover) ease,
    color var(--t-hover) ease;
  background: none;
  border: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  line-height: 1.2;
  display: flex;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--at, 0) * 100%);
}

.cslide__mark small {
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: var(--weight-regular);
}

.hcalc [data-ui] .cslide__mark[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .hcalc [data-ui] .cslide__mark:not([aria-pressed="true"]):hover {
    color: var(--ink);
  }
}

.hcalc [data-ui] .cslide__more {
  margin-block: var(--space-2) var(--space-3);
}

.hcalc .sheet[data-ui] .row.row--month {
  align-items: flex-start;
  gap: var(--space-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--money) 60%, transparent), 0 0 30px -10px color-mix(in srgb, var(--money) 50%, transparent);
  flex-direction: column;
}

.hcalc [data-ui] .row--month dd {
  filter: var(--glow-money-text);
}

.hcalc .sheet[data-ui] .row.row--year {
  background: none;
  margin-inline: 0;
  padding: 8px 16px 0;
}

.hcalc [data-ui] .row--year dd {
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .hcalc {
    grid-area: calc;
    margin-block-start: var(--space-6);
  }
}

@media (max-width: 599px) {
  .hcalc > .sheet[data-ui] {
    padding: var(--space-5) var(--space-4);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero .hcalc > .sheet[data-ui] {
    clip-path: none;
    opacity: .01;
    animation: rfx-hero-deal .9s var(--ease-expo) .12s forwards;
    transform: translateY(16px);
  }

  .hcalc__run {
    animation: rfx-wire-run 2.6s var(--ease-in-out) infinite;
    animation-play-state: paused;
  }

  .hcalc__circuit[data-live] .hcalc__run {
    animation-play-state: running;
  }

  .hcalc__wire[data-i="1"] .hcalc__run {
    animation-delay: .35s;
  }

  .hcalc__wire[data-i="2"] .hcalc__run {
    animation-delay: .7s;
  }

  .hcalc__wire[data-i="3"] .hcalc__run {
    animation-delay: 1.05s;
  }

  .hcalc__wire[data-i="4"] .hcalc__run {
    animation-delay: 1.4s;
  }

  .hcalc__wire[data-i="5"] .hcalc__run {
    animation-delay: 1.75s;
  }
}

@keyframes rfx-wire-run {
  from {
    stroke-dashoffset: .14px;
  }

  to {
    stroke-dashoffset: -1.02px;
  }
}

/* [project]/src/styles/hero-calc-chips.css [app-client] (css) */
.hcalc__chips {
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  display: grid;
}

.hcalc__chips::-webkit-scrollbar {
  display: none;
}

.hcalc [data-ui] .hcalc__chip {
  min-inline-size: 0;
  min-block-size: var(--tap);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-bounce);
  border: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-inline: 3px;
  padding: 6px 10px;
  line-height: 1.2;
  display: inline-flex;
}

.hcalc [data-ui] .hcalc__chip[aria-pressed="true"] {
  --bmark-halo: var(--broker-halo, none);
  background: var(--accent-wash);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.hcalc__chip:active {
  transform: scale(.96);
}

.hcalc__chip .bmark.bmark--tile.blogo--inline {
  padding: 0;
}

.hcalc__chip-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .hcalc [data-ui] .hcalc__chip:not([aria-pressed="true"]):hover {
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--edge-soft);
  }
}

@container hcalc (max-width: 519px) {
  .hcalc [data-ui] .hcalc__chip {
    border-radius: var(--r-ctl);
    flex-direction: column;
    gap: 2px;
    padding: 5px 4px;
  }
}

@container hcalc (max-width: 339px) {
  .hcalc__chips {
    gap: var(--space-2);
    display: flex;
    overflow-x: auto;
  }

  .hcalc [data-ui] .hcalc__chip {
    border-radius: var(--r-full);
    flex-direction: row;
    flex: none;
    margin: 0;
    padding: 6px 14px;
  }
}

.hcalc__pick.is-merged .hcalc__chips {
  gap: var(--space-2);
  display: flex;
  overflow-x: auto;
}

.hcalc [data-ui] .is-merged .hcalc__chip {
  border-radius: var(--r-full);
  flex-direction: row;
  flex: none;
  margin: 0;
  padding: 6px 14px;
}

.hcalc__tip-from {
  stop-color: var(--accent-blue);
}

.hcalc__tip-to {
  stop-color: var(--accent);
}

/* [project]/src/styles/hero-backdrop.css [app-client] (css) */
.hbd {
  --hbd-veil: 88%;
  --hbd-band: 30%;
  --hbd-dot: color-mix(in oklab, var(--ink) 15%, transparent);
  --hbd-dot-lit: color-mix(in oklab, var(--accent) 75%, transparent);
  --hbd-tint: .08;
  --hbd-vignette: 72%;
  --hbd-glow: calc(.13 * var(--ambient-k));
  --hbd-sweep: calc(.07 * var(--ambient-k));
  --hbd-sweep-2: calc(.05 * var(--ambient-k));
  --hbd-glow-2: calc(.06 * var(--ambient-k));
  --hbd-video: .65;
  --hbd-video-filter: none;
}

:root[data-theme="light"] .hbd {
  --hbd-band: 18%;
  --hbd-tint: .06;
  --hbd-vignette: 60%;
  --hbd-dot: color-mix(in oklab, var(--ink) 16%, transparent);
  --hbd-video: .22;
  --hbd-video-filter: invert(1) hue-rotate(180deg);
}

.hbd > * {
  pointer-events: none;
  position: absolute;
}

.hbd .hero__skyline {
  opacity: var(--hbd-video);
  filter: var(--hbd-video-filter);
}

.hbd .hero__skyline-img, .hbd__video {
  object-fit: cover;
  object-position: 0% 50%;
  block-size: 100%;
  inline-size: 100%;
}

.hbd .hero__skyline-img {
  opacity: 1;
}

.hbd__video {
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  position: absolute;
  inset: 0;
}

.hbd.is-video .hbd__video {
  opacity: 1;
}

.hbd__tint {
  background: radial-gradient(70% 80% at 72% 62%, rgb(var(--neo-tint) / var(--hbd-tint)), transparent 72%);
  inset: 0;
}

.hbd__vignette {
  --hbd-edge: color-mix(in oklab, var(--page) var(--hbd-vignette), transparent);
  background: radial-gradient(120% 100% at 55% 28%, transparent 52%, var(--hbd-edge) 100%), linear-gradient(180deg, transparent 62%, var(--hbd-edge));
  inset: 0;
}

.hbd__veil {
  --hbd-scrim: color-mix(in oklab, var(--page) var(--hbd-veil), transparent);
  background: linear-gradient(90deg, var(--hbd-scrim) 0 54%, transparent 68%);
  inset: 0;
}

@media (max-width: 860px) {
  .hbd__veil {
    background: linear-gradient(180deg, var(--hbd-scrim) 0 22rem, transparent 32rem), linear-gradient(90deg, var(--hbd-scrim) 0 46%, transparent 60%);
  }
}

@media (max-width: 599px) {
  .hbd__veil {
    background: linear-gradient(180deg, var(--hbd-scrim) 0 38rem, transparent 50rem);
  }
}

.hbd__band {
  --hbd-c: var(--accent-blue);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hbd-c) var(--hbd-band), transparent), transparent);
  will-change: transform;
  border-radius: 50%;
  block-size: 78%;
  inline-size: 62%;
}

.hbd__band--1 {
  --hbd-c: var(--accent);
  --hbd-drift: hbd-drift-1 26s;
  inset-block-start: -22%;
  inset-inline-start: 28%;
}

.hbd__band--2 {
  --hbd-drift: hbd-drift-2 30s;
  inset-block-end: -26%;
  inset-inline-start: -14%;
}

.hbd__band--3 {
  --hbd-drift: hbd-drift-3 22s;
  opacity: .8;
  inline-size: 48%;
  inset-block-start: 18%;
  inset-inline-end: -18%;
}

.hbd__dots {
  background-image: radial-gradient(circle at 1px 1px, var(--hbd-dot) 1px, transparent 0);
  background-size: 22px 22px;
  inset: 0;
  -webkit-mask-image: radial-gradient(95% 80% at 55% 0, #000 25%, #0000 88%);
  mask-image: radial-gradient(95% 80% at 55% 0, #000 25%, #0000 88%);
}

.hbd:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(55% 60% at 6% 86%, rgb(var(--neo-tint) / var(--hbd-glow)), transparent 72%), linear-gradient(118deg, transparent 38%, rgb(var(--neo-tint) / var(--hbd-sweep)) 52%, rgb(var(--neo-2-tint) / var(--hbd-sweep-2)) 60%, transparent 72%), radial-gradient(40% 45% at 92% 30%, rgb(var(--neo-2-tint) / var(--hbd-glow-2)), transparent 72%);
  position: absolute;
  inset: 0;
}

.hbd__dots--lit {
  --hbd-dot: var(--hbd-dot-lit);
  -webkit-mask-image: radial-gradient(11rem circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%);
  mask-image: radial-gradient(11rem circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%);
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lead-in:hover .hbd__dots--lit {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hbd__band {
    animation: var(--hbd-drift) ease-in-out infinite alternate;
  }
}

.lead-in:not([data-live]) .hbd__band {
  animation-play-state: paused;
}

@keyframes hbd-drift-1 {
  to {
    transform: translate3d(-18%, 14%, 0) rotate(14deg) scale(1.15);
  }
}

@keyframes hbd-drift-2 {
  to {
    transform: translate3d(26%, -16%, 0) rotate(-10deg) scale(1.2);
  }
}

@keyframes hbd-drift-3 {
  to {
    transform: translate3d(-22%, 18%, 0) scale(.85);
  }
}

@media (max-width: 599px) {
  .hbd__band--2, .hbd__band--3, .hbd__dots {
    display: none;
  }

  .hbd__band--1 {
    inline-size: 120%;
    inset-inline-start: 10%;
  }

  .hbd__video {
    display: none;
  }

  .hbd .hero__skyline-img {
    object-position: 70% 50%;
  }
}

/* [project]/src/styles/what-is.css [app-client] (css) */
.wi {
  margin-block-start: var(--section-gap);
}

.wi__panel {
  align-items: center;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  display: grid;
}

.home-wrap .wi__title {
  margin: 0 0 var(--space-5);
}

.wi__text {
  margin: 0 0 var(--space-4);
  color: var(--ink-3);
  font-size: var(--step-lead);
  max-inline-size: 46ch;
  line-height: 1.6;
}

.wi__actions {
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-6);
  display: flex;
}

.wi__cta, .wi__more {
  border-radius: var(--r-full);
  min-block-size: 46px;
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  transition: transform var(--t-press) var(--ease-bounce),
    box-shadow var(--t-hover) ease,
    filter var(--t-hover) ease;
  align-items: center;
  gap: 8px;
  padding-inline: 20px;
  display: inline-flex;
}

.wi__cta {
  background: var(--cta-fill);
  box-shadow: 0 0 0 1px var(--cta-edge), var(--elev-cta);
  color: var(--cta-ink);
}

.wi__cta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: 16px;
  inline-size: 16px;
}

.wi__more {
  box-shadow: 0 0 0 1px var(--edge-soft);
  color: var(--ink);
}

.wi__cta:active, .wi__more:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .wi__cta:hover {
    filter: brightness(1.06);
    transform: translateY(var(--lift));
  }

  .wi__more:hover {
    box-shadow: 0 0 0 1px var(--edge);
    transform: translateY(var(--lift));
  }
}

.wi__foot {
  margin: var(--space-5) 0 0;
  color: var(--ink-dim);
  font-size: var(--step-caption);
}

.wi__ring {
  aspect-ratio: 520 / 440;
  inline-size: 100%;
  max-inline-size: 600px;
  margin: 0;
  margin-inline: auto;
  position: relative;
}

.wi__svg {
  block-size: 100%;
  inline-size: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.wi__track {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1px;
  stroke-dasharray: 2 6;
}

.wi__halo {
  fill: color-mix(in oklab, var(--ink) 4%, transparent);
  stroke: var(--hairline);
  stroke-width: 1px;
}

.wi__arc-base {
  fill: none;
  stroke: color-mix(in oklab, var(--accent) 45%, transparent);
  stroke-width: 2px;
}

.wi__head {
  fill: var(--accent);
}

.wi__centre, .wi__node, .wi__tag {
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
}

.wi__centre {
  gap: 2px;
  inline-size: 34%;
  display: grid;
  inset-block-start: 54.5%;
  inset-inline-start: 50%;
}

.wi__centre-big {
  color: color-mix(in oklab, var(--accent) 84%, var(--ink));
  font-size: clamp(1rem, .8rem + .8vw, 1.375rem);
  font-weight: var(--weight-head);
  letter-spacing: var(--tracking-title);
  line-height: 1.2;
}

.wi__centre-sub {
  color: var(--ink-3);
  font-size: var(--step-caption);
}

.wi__node {
  border-radius: var(--r-card);
  background: var(--surface-2);
  inline-size: 30%;
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-1);
  justify-items: center;
  gap: 2px;
  padding: 10px 12px;
  display: grid;
}

.wi__node[data-node="broker"] {
  inset-block-start: 9%;
  inset-inline-start: 50%;
}

.wi__node[data-node="you"] {
  inset-block-start: 78%;
  inset-inline-start: 19%;
}

.wi__node[data-node="us"] {
  inset-block-start: 78%;
  inset-inline-start: 81%;
}

.wi__node-mark {
  border-radius: var(--r-ctl);
  background: var(--surface-3);
  place-items: center;
  block-size: 40px;
  inline-size: 40px;
  margin-block-end: 6px;
  display: grid;
}

.wi__node-mark svg {
  fill: none;
  block-size: 22px;
  inline-size: 22px;
  stroke: var(--accent);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wi__node[data-node="broker"] {
  container-type: inline-size;
}

@media (min-width: 600px) {
  .wi__node[data-node="broker"] {
    inline-size: 36%;
  }
}

.wi__node-mark.wi__tiles {
  background: none;
  border-radius: 0;
  block-size: auto;
  inline-size: auto;
  display: flex;
}

.wi__tiles .wi__tile {
  --bmark-size: min(36px, calc(100cqi / 4.4));
  --bmark-halo: 0 0 0 2px var(--surface-2);
  position: relative;
}

.wi__tiles .wi__tile + .wi__tile {
  margin-inline-start: calc(var(--bmark-size) * -.15);
}

.wi__tiles .wi__tile:first-child {
  z-index: 5;
}

.wi__tiles .wi__tile:nth-child(2) {
  z-index: 4;
}

.wi__tiles .wi__tile:nth-child(3) {
  z-index: 3;
}

.wi__tiles .wi__tile:nth-child(4) {
  z-index: 2;
}

.wi__node-name {
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
}

.wi__node-sub {
  color: var(--ink-4);
  font-size: var(--step-caption);
  line-height: 1.35;
}

.wi__tag {
  border-radius: var(--r-card);
  background: var(--surface-1);
  inline-size: max-content;
  max-inline-size: 32%;
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--ink-3);
  font-size: var(--step-caption);
  text-wrap: balance;
  padding: 4px 10px;
  line-height: 1.35;
}

.wi__tag--accent {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.wi__tag[data-tag="toBroker"] {
  inset-block-start: 38%;
  inset-inline-start: 18%;
}

.wi__tag[data-tag="toUs"] {
  inset-block-start: 38%;
  inset-inline-start: 82%;
}

.wi__tag[data-tag="toYou"] {
  max-inline-size: 44%;
  inset-block-start: 96%;
  inset-inline-start: 50%;
}

@media (max-width: 960px) {
  .wi__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* [project]/src/styles/what-is-art.css [app-client] (css) */
.wi__stop-a {
  stop-color: var(--accent);
}

.wi__stop-b {
  stop-color: var(--accent-blue);
}

.wi__node-mark.wi__avatar {
  border-radius: var(--r-full);
  background: none;
}

.wi__avatar svg {
  stroke: none;
  block-size: 100%;
  inline-size: 100%;
}

.wi__av-ground {
  fill: var(--accent-soft);
}

.wi__av-body {
  fill: url("#wi-av");
}

.wi__node-mark--brand {
  --logo-accent: var(--brand);
  --logo-ink: var(--ink);
  background: var(--accent-soft);
}

.wi__node-mark--brand .wi__logo {
  block-size: 28px;
  inline-size: 28px;
}

@media (min-width: 600px) {
  .wi__ring {
    isolation: isolate;
  }

  .wi__ring:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(34% 40% at 50% 54.5%, rgb(var(--neo-tint) / calc(.08 * var(--ambient-k))), transparent 72%);
    position: absolute;
    inset: 0;
  }
}

.wi__art {
  block-size: auto;
  inline-size: clamp(60px, 5.2vw, 80px);
  justify-self: center;
  margin-block-end: var(--space-2);
  overflow: visible;
}

.wi__art-line {
  fill: none;
  stroke: url("#wi-art");
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wi__art-coin, .wi__coin-body {
  fill: var(--money);
}

.wi__art-coin-rim, .wi__coin-rim {
  fill: none;
  stroke: var(--money-ink);
  stroke-opacity: .45;
  stroke-width: 1.6px;
}

.wi__coin {
  display: none;
}

@supports (offset-path: path("M 0 0")) {
  .wi__coin {
    offset-path: path("M 95 278 A 170 170 0 1 1 425 278 A 170 170 0 0 1 95 278");
    offset-rotate: 0deg;
    offset-distance: 72%;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--money) 55%, transparent));
    display: inline;
  }

  @media (prefers-reduced-motion: no-preference) {
    .wi__coin {
      animation: 9s linear infinite wi-coin;
    }
  }
}

@keyframes wi-coin {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* [project]/src/styles/what-is-mobile.css [app-client] (css) */
@media (max-width: 599px) {
  .wi__ring {
    aspect-ratio: auto;
    justify-items: center;
    max-inline-size: 26rem;
    display: grid;
  }

  .wi__svg {
    display: none;
  }

  .wi__ring > .wi__centre, .wi__ring > .wi__node, .wi__ring > .wi__tag {
    position: relative;
    inset: auto;
    transform: none;
  }

  .wi__node {
    justify-items: start;
    column-gap: var(--space-3);
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    text-align: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wi__node-mark {
    grid-row: span 2;
    margin: 0;
  }

  .wi__ring > .wi__tag {
    margin-block: var(--space-6);
    max-inline-size: 100%;
  }

  .wi__tag:before, .wi__tag:after {
    content: "";
    inline-size: 10px;
    block-size: var(--space-6);
    background: color-mix(in oklab, var(--accent) 55%, transparent);
    position: absolute;
    inset-inline-start: 50%;
    translate: -50%;
  }

  .wi__tag:before {
    clip-path: inset(0 40%);
    inset-block-end: 100%;
  }

  .wi__tag:after {
    background: var(--accent);
    clip-path: polygon(40% 0, 60% 0, 60% 70%, 100% 70%, 50% 100%, 0 70%, 40% 70%);
    inset-block-start: 100%;
  }

  .wi__centre {
    inline-size: 100%;
    padding: var(--space-4);
    border-radius: var(--r-card);
    background: var(--accent-wash);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
  }
}

/* [project]/src/styles/broker-marquee.css [app-client] (css) */
.bmarq {
  --bmarq-gap: clamp(2rem, 1rem + 3vw, 4rem);
  --bmarq-fade: clamp(3rem, 14%, 8rem);
  --bmarq-dur: 48s;
  --bmarq-pad: var(--space-6);
  gap: var(--space-3);
  display: grid;
}

.bmarq__title {
  max-inline-size: 36ch;
  padding-inline: var(--bmarq-pad);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  text-align: center;
  color: var(--ink-3);
  justify-self: center;
  margin: 0;
  line-height: 1.35;
}

.bmarq__marquee {
  padding-block: var(--space-1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--bmarq-fade), #000 calc(100% - var(--bmarq-fade)), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--bmarq-fade), #000 calc(100% - var(--bmarq-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--bmarq-fade), #000 calc(100% - var(--bmarq-fade)), transparent);
  overflow: hidden;
}

.bmarq__rail {
  inline-size: 100%;
  display: flex;
}

.bmarq__list {
  justify-content: space-around;
  align-items: center;
  gap: var(--bmarq-gap);
  min-inline-size: 100%;
  padding: 0;
  flex: none;
  margin: 0;
  padding-inline-end: var(--bmarq-gap);
  list-style: none;
  display: flex;
}

.bmarq__cell {
  flex: none;
}

.bmarq__item {
  align-items: center;
  gap: var(--space-3);
  block-size: 52px;
  padding-inline: var(--space-2);
  border-radius: var(--r-m);
  color: var(--ink-3);
  transition: color var(--t-hover) var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.bmarq__item .bmark {
  --bmark-size: 32px;
  padding: 4px;
}

.bmarq__name {
  font-size: 1.125rem;
  font-weight: var(--weight-head);
  letter-spacing: -.02em;
  white-space: nowrap;
  line-height: 1;
}

.bmarq__item:focus-visible {
  --bmark-halo: var(--broker-halo, none);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .bmarq__item:hover {
    --bmark-halo: var(--broker-halo, none);
    color: var(--ink);
  }
}

.bmarq__note {
  max-inline-size: none;
  padding-inline: var(--bmarq-pad);
  font-size: var(--step-caption);
  text-align: center;
  color: var(--ink-4);
  justify-self: center;
  margin: 0;
  line-height: 1.4;
}

@keyframes rfx-bmarq-run {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes rfx-bmarq-run-rtl {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bmarq__list {
    animation: rfx-bmarq-run var(--bmarq-dur) linear infinite;
  }

  .bmarq__list .bmarq__item {
    transition: color var(--t-hover) var(--ease-out),
      translate var(--t-hover) var(--ease-out);
  }

  [dir="rtl"] .bmarq__list {
    animation-name: rfx-bmarq-run-rtl;
  }

  .bmarq__marquee:hover .bmarq__list, .bmarq__marquee:focus-within .bmarq__list {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmarq__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bmarq__list {
    justify-content: center;
    gap: var(--space-1) var(--bmarq-gap);
    min-inline-size: 0;
    padding-inline: var(--bmarq-pad);
    flex-wrap: wrap;
    flex: auto;
  }

  .bmarq__list[aria-hidden="true"] {
    display: none;
  }

  .bmarq__item {
    transition: none;
  }
}

@media (max-width: 639.98px) {
  .bmarq {
    --bmarq-dur: 36s;
    --bmarq-pad: var(--space-5);
  }

  .bmarq__name {
    font-size: 1rem;
  }
}

/* [project]/src/styles/compare.css [app-client] (css) */
.compare {
  padding-block: clamp(80px, 9vw, 128px) clamp(64px, 7vw, 104px);
}

.compare__head {
  text-align: center;
  max-inline-size: 46rem;
  margin-inline: auto;
}

.compare__head h2 {
  margin-block-end: var(--space-4);
}

.compare__lead {
  max-inline-size: 52ch;
  margin: 0 auto;
}

.compare__table {
  max-inline-size: 60rem;
  margin: var(--space-8) auto 0;
}

.compare__foot {
  max-inline-size: 60rem;
  margin: var(--space-6) auto 0;
  color: var(--ink-3);
  font-size: var(--step-small);
  text-align: center;
}

.cmp-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: var(--step-ui);
  margin-block-start: var(--space-6);
  line-height: 1.45;
}

.cmp-table th, .cmp-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--hairline);
  text-align: start;
  vertical-align: middle;
}

.cmp-table tbody tr:last-child > * {
  border-block-end: 0;
}

.cmp-head {
  padding-block: var(--space-6) var(--space-4);
  color: var(--ink);
  font-weight: var(--weight-head);
}

.cmp-head.cmp-col-criteria {
  inline-size: 36%;
  color: var(--ink-dim);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
}

.cmp-head.cmp-col-with {
  inline-size: 32%;
  color: var(--accent);
  position: relative;
}

.cmp-head__name {
  align-items: center;
  gap: var(--space-2);
  display: inline-flex;
}

.cmp-head__mark.logo {
  font-size: 1rem;
}

.cmp-label {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

.cmp-table .cmp-col-with {
  border-inline: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}

.cmp-table thead .cmp-col-with {
  border-block-start: 1px solid var(--accent);
  border-start-start-radius: var(--r-l);
  border-start-end-radius: var(--r-l);
}

.cmp-table tbody tr:last-child .cmp-col-with {
  border-block-end: 1px solid var(--accent);
  border-end-end-radius: var(--r-l);
  border-end-start-radius: var(--r-l);
}

.cmp-table .cmp-row:has( + .cmp-row .cmp-cell--verifying) .cmp-col-with {
  border-block-end: 1px solid var(--accent);
  border-end-end-radius: var(--r-l);
  border-end-start-radius: var(--r-l);
}

.cmp-badge {
  border-radius: var(--r-full);
  background: var(--cta);
  color: var(--cta-ink);
  font-size: .8125rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  padding: 4px 12px;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
}

.cmp-fact {
  align-items: center;
  gap: var(--space-2);
  display: inline-flex;
}

.cmp-mark {
  border-radius: var(--r-full);
  flex: none;
  place-items: center;
  block-size: 24px;
  inline-size: 24px;
  display: inline-grid;
}

.cmp-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: 14px;
  inline-size: 14px;
}

.cmp-mark.is-yes {
  background: color-mix(in oklab, var(--up) 24%, transparent);
  color: var(--up);
}

.cmp-mark.is-no {
  background: color-mix(in oklab, var(--down) 22%, transparent);
  color: var(--down);
}

.cmp-mark.is-yes svg, .cmp-mark.is-no svg {
  stroke-width: 2.4px;
}

.cmp-row--amount td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cmp-row--money .cmp-label {
  font-weight: var(--weight-semibold);
}

.cmp-amount {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.cmp-amount.is-back {
  color: var(--money);
  filter: var(--glow-money-text);
}

.cmp-amount.is-zero {
  color: var(--ink-dim);
}

.cmp-tag {
  vertical-align: middle;
  margin-inline-start: var(--space-2);
}

.cmp-cell--verifying {
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .compare__table {
    margin-block-start: var(--space-6);
  }

  .cmp-table, .cmp-table thead, .cmp-table tbody {
    display: block;
  }

  .cmp-table {
    border-radius: var(--r-l);
    padding-block-end: var(--space-2);
  }

  .cmp-table tr {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--hairline);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    display: grid;
  }

  .cmp-table tbody tr:last-child {
    border-block-end: 0;
  }

  .cmp-table th, .cmp-table td {
    padding: var(--space-2) var(--space-3);
    border-block-end: 0;
  }

  .cmp-head.cmp-col-criteria {
    display: none;
  }

  .cmp-head, .cmp-head.cmp-col-with {
    inline-size: auto;
    padding-block: var(--space-3);
    text-align: center;
  }

  .cmp-badge {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin: 0 auto var(--space-2);
    white-space: normal;
    display: block;
    position: static;
    translate: none;
  }

  .cmp-head__name {
    gap: var(--space-1);
    flex-direction: column;
  }

  .cmp-label {
    grid-column: 1 / -1;
    padding-block-end: 0;
  }

  .cmp-table .cmp-col-with, .cmp-table thead .cmp-col-with, .cmp-table tbody tr:last-child .cmp-col-with {
    border: 1px solid var(--accent);
    border-radius: var(--r-m);
  }

  .cmp-table .cmp-row:has( + .cmp-row .cmp-cell--verifying) .cmp-col-with {
    border: 1px solid var(--accent);
    border-radius: var(--r-m);
  }

  .cmp-table .cmp-col-direct {
    border-radius: var(--r-m);
    background: var(--surface-3);
  }

  .cmp-table thead .cmp-col-direct {
    background: none;
  }

  .cmp-cell--verifying {
    grid-column: 1 / -1;
  }

  .cmp-amount {
    font-size: 1.125rem;
  }

  .cmp-table thead tr {
    align-items: center;
  }
}

/* [project]/src/styles/compare-switch.css [app-client] (css) */
.cmp-switch {
  border-radius: var(--r-l);
  background: var(--surface-1);
  inline-size: fit-content;
  max-inline-size: 100%;
  color: var(--ink);
  border: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 4px;
  display: flex;
}

:root:not(.js) .cmp-switch {
  display: none;
}

.cmp-switch__legend {
  float: left;
  margin-inline: var(--space-3) var(--space-2);
  color: var(--ink-3);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
}

.cmp-switch__opt {
  border-radius: var(--r-m);
  cursor: pointer;
  min-block-size: 44px;
  min-inline-size: 96px;
  transition: background-color var(--t-hover) var(--ease-out);
  flex: 1 1 0;
  align-content: center;
  justify-items: center;
  padding: 6px 14px;
  display: grid;
  position: relative;
}

.cmp-switch__input {
  opacity: 0;
  cursor: pointer;
  margin: 0;
  position: absolute;
  inset: 0;
}

.cmp-switch__name {
  font-size: var(--step-ui);
  font-weight: var(--weight-bold);
}

.cmp-switch__amount {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
}

.cmp-switch__opt:has(:checked) {
  background: var(--cta);
  color: var(--cta-ink);
}

.cmp-switch__opt:has(:checked) .cmp-switch__amount {
  color: var(--cta-ink);
}

.cmp-switch__opt:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .cmp-switch__opt:not(:has(:checked)):hover {
    background: var(--surface-3);
  }
}

@media (max-width: 640px) {
  .cmp-switch {
    inline-size: 100%;
  }

  .cmp-switch__legend {
    float: none;
    text-align: center;
    inline-size: 100%;
    margin: 4px 0 2px;
  }

  .cmp-switch__opt {
    min-inline-size: 0;
    padding-inline: 8px;
  }
}

/* [project]/src/styles/compare-brokers.css [app-client] (css) */
.cmp-brokers {
  min-inline-size: 0;
  margin: 0 0 var(--space-4);
  border: 0;
  padding: 0;
}

:root:not(.js) .cmp-brokers {
  display: none;
}

.cmp-brokers__legend {
  inline-size: 100%;
  color: var(--ink-3);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  text-align: center;
  margin-block-end: var(--space-1);
  padding: 0;
  display: block;
}

.cmp-brokers__row {
  gap: var(--space-2);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding: 6px;
  display: flex;
  overflow-x: auto;
}

.cmp-broker:first-child {
  margin-inline-start: auto;
}

.cmp-broker:last-child {
  margin-inline-end: auto;
}

.cmp-broker {
  border-radius: var(--r-ctl);
  min-inline-size: 76px;
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out);
  flex: none;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px 8px;
  display: grid;
  position: relative;
}

.cmp-broker__input {
  opacity: 0;
  cursor: pointer;
  margin: 0;
  position: absolute;
  inset: 0;
}

.cmp-broker__logo.bmark {
  --bmark-size: 40px;
}

.cmp-broker:has(:checked) {
  --bmark-halo: var(--broker-halo, none);
  background: var(--accent-faint);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--ink);
}

.cmp-broker:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .cmp-broker:not(:has(:checked)):hover {
    background: var(--surface-3);
  }
}

@media (max-width: 640px) {
  .cmp-brokers__row {
    gap: 4px;
  }

  .cmp-broker {
    min-inline-size: 64px;
    padding-inline: 4px;
  }
}

/* [project]/src/styles/compare-fx.css [app-client] (css) */
.cmp-frame {
  position: relative;
}

.cmp-beam {
  --beam-width: 2px;
  --beam-from: var(--neo);
  --beam-to: var(--neo-2);
  --beam-speed: 7s;
  inline-size: var(--beam-w, 0px);
  block-size: var(--beam-h, 0px);
  translate: var(--beam-x, 0px) var(--beam-y, 0px);
  border-radius: var(--r-l);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.cmp-beam[data-on] {
  opacity: 1;
}

.cmp-head.cmp-col-with {
  isolation: isolate;
}

.cmp-head.cmp-col-with:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--neo) calc(32% * var(--ambient-k)), transparent), transparent 100%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .compare__table .cmp-mark {
    transition: opacity var(--t-reveal) var(--ease-out),
      transform var(--t-reveal-move) var(--ease-spring);
    transition-delay: calc(var(--row, 0) * 40ms + .24s);
  }

  .js .compare__table[data-reveal]:not(.is-in) .cmp-mark {
    opacity: 0;
    transform: scale(.5);
  }
}

.cmp-cell--back {
  position: relative;
}

.cmp-flash {
  border-radius: var(--r-m);
  box-shadow: var(--glow-money);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .cmp-flash {
    animation: cmp-flash var(--t-odometer) var(--ease-out) both;
  }
}

@keyframes cmp-flash {
  25% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.cmp-cell.is-busy > * {
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .cmp-cell > * {
    transition: opacity var(--t-reveal) var(--ease-out);
  }
}

@media (max-width: 640px) {
  .cmp-beam {
    border-radius: var(--r-m);
  }
}

/* [project]/src/styles/home-steps.css [app-client] (css) */
.steps {
  --steps-line: color-mix(in srgb, var(--ink) 10%, transparent);
  --steps-node: 40px;
  --steps-pad: var(--space-6);
  gap: var(--space-8);
  padding-block: clamp(96px, 10vw, 144px) 0;
  display: grid;
}

.steps__head {
  gap: var(--space-3);
  max-inline-size: 44rem;
  display: grid;
}

.steps__eyebrow {
  color: var(--ink-2);
  font-size: var(--step-small);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.steps__lead {
  color: var(--muted);
  font-size: var(--step-lead);
  line-height: 1.45;
}

.steps__list {
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 961px) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps__card:not(:last-child):after {
    content: "";
    background: linear-gradient(90deg, color-mix(in srgb, var(--edge) 60%, transparent), color-mix(in srgb, var(--edge) 20%, transparent));
    pointer-events: none;
    block-size: 2px;
    position: absolute;
    inset-block-start: calc(var(--steps-pad) + var(--steps-node) / 2 - 1px);
    inset-inline-start: calc(var(--steps-pad) + var(--steps-node) + var(--space-3));
    inset-inline-end: calc(var(--space-5) * -1 - 1px);
  }
}

.steps__card {
  gap: var(--space-4);
  padding: var(--steps-pad);
  border: 1px solid var(--steps-line);
  border-radius: var(--r-l);
  background: var(--surface);
  transition: border-color var(--t-hover) var(--ease-out);
  flex-direction: column;
  display: flex;
  position: relative;
}

.steps__card-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.steps__card-node {
  z-index: 1;
  inline-size: var(--steps-node);
  block-size: var(--steps-node);
  background: var(--panel);
  color: var(--icon-idle);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 6px var(--surface);
  transition: color .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}

:root[data-theme="light"] .steps__card-node {
  background: var(--surface-1);
}

.steps__card:not(.steps__card--paid):is(:hover, :focus-within) .steps__card-node {
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--surface), 0 0 18px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.steps__node-num {
  font-size: var(--step-ui);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.steps__card--paid .steps__card-node {
  background: var(--reward-soft);
  color: var(--reward-ink);
}

.steps__card-phase {
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--steps-line);
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: .75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  position: relative;
}

.steps__card-body {
  gap: var(--space-2);
  display: grid;
}

.steps__card-title {
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.steps__card-desc {
  color: var(--muted);
  font-size: var(--step-ui);
  line-height: 1.55;
}

.steps__card-preview {
  padding: var(--space-4);
  border: 1px solid var(--steps-line);
  border-radius: var(--r-m);
  background: var(--bg);
  margin-block-start: auto;
}

.steps__card-footer {
  display: flex;
}

.steps__card-link {
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--ink-2);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.steps__card-link:is(:hover, :focus-visible) {
  color: var(--accent);
}

.steps__card-link svg {
  transition: translate var(--t-hover) var(--ease-out);
}

.step-frag {
  gap: var(--space-3);
  font-size: var(--step-small);
  display: grid;
}

.step-frag__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.step-frag__broker, .step-frag__field-label {
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  display: inline-flex;
}

.step-frag__dot {
  background: var(--step);
  block-size: 26px;
  inline-size: 26px;
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: var(--weight-bold);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.step-frag__badge-tag {
  border-radius: var(--r-full);
  background: var(--step);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.step-frag__row {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--steps-line);
  border-radius: var(--r-s);
  background: var(--surface);
  display: grid;
}

.step-frag__meta {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.step-frag__label {
  align-items: center;
  gap: var(--space-1);
  color: var(--muted);
  display: inline-flex;
}

.step-frag__sub-status {
  color: var(--muted);
  font-size: .75rem;
}

.step-frag__code-wrap {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.step-frag__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step-ui);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.step-frag__copy-chip, .step-frag__status-pill {
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  display: inline-flex;
}

.step-frag__copy-chip {
  background: var(--step);
  color: var(--ink-2);
}

.step-frag__status-pill {
  background: var(--step);
  color: var(--muted);
}

.step-frag__field {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--steps-line);
  border-radius: var(--r-s);
  background: var(--surface);
  display: flex;
}

.step-frag__input-mock {
  align-items: center;
  gap: var(--space-2);
  display: inline-flex;
}

.step-frag__input-prefix {
  background: var(--step);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: var(--weight-bold);
  border-radius: 4px;
  padding: 2px 6px;
}

.step-frag__input-val {
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
}

.step-frag__ok {
  align-items: center;
  gap: var(--space-2);
  color: var(--positive);
  font-weight: var(--weight-semibold);
  display: inline-flex;
}

.step-frag__source-label {
  color: var(--ink-2);
  font-weight: var(--weight-semibold);
}

.step-frag__row--back {
  background: var(--reward-soft);
  border-color: #0000;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.step-frag__payout-info {
  gap: 2px;
  display: grid;
}

.step-frag__payout-title {
  color: var(--reward-ink);
  font-weight: var(--weight-bold);
}

.step-frag__payout-freq {
  color: var(--reward-ink);
  opacity: .8;
  font-size: .75rem;
}

.step-frag__amount-badge {
  background: var(--reward);
  block-size: 28px;
  inline-size: 28px;
  color: var(--reward-ink);
  font-weight: var(--weight-bold);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.step-frag__destination {
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  display: inline-flex;
}

.step-frag__note {
  font-size: .75rem;
}

.steps__action {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--step) 55%, var(--surface));
  flex-wrap: wrap;
  display: flex;
}

.steps__trust-strip {
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  flex-wrap: wrap;
  display: flex;
}

.steps__trust-item {
  align-items: center;
  gap: var(--space-2);
  display: inline-flex;
}

.steps__trust-icon {
  color: var(--icon-idle);
}

.steps__trust-sep {
  color: var(--muted);
}

.steps__cta {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 52px;
  padding-inline: var(--space-6);
  border-radius: var(--r-m);
  background-color: var(--cta);
  background-image: var(--cta-fill);
  box-shadow: var(--glow-cta);
  color: var(--cta-ink);
  font-size: var(--step-ui);
  font-weight: var(--weight-bold);
  transition: background-color var(--t-hover) var(--ease-out),
    box-shadow .4s var(--ease-out),
    transform var(--t-press) var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.steps__cta:active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .steps__card:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  }

  .steps__card-link:hover svg {
    translate: 3px;
  }

  .steps__cta:hover {
    background-color: var(--cta-2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .steps__cta:focus-visible {
    box-shadow: var(--glow-cta-hover);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .steps__cta:hover {
    box-shadow: var(--glow-cta-hover);
  }
}

@media (max-width: 639.98px) {
  .steps {
    --steps-pad: var(--space-5);
    gap: var(--space-6);
  }

  .steps__action {
    padding: var(--space-5);
  }

  .steps__trust-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .steps__trust-sep {
    display: none;
  }

  .steps__cta {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps__card-link, .steps__card-link svg, .steps__card-node, .steps__cta {
    transition: none;
  }
}

/* [project]/src/styles/home-steps-b.css [app-client] (css) */
.steps--b {
  gap: var(--space-10);
}

.stepsb__list {
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 900px) {
  .stepsb__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stepsb__item {
  display: grid;
}

.stepsb__card {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-1);
  transition: translate var(--t-hover) var(--ease-out),
    box-shadow var(--t-hover) ease;
  flex-direction: column;
  display: flex;
  position: relative;
}

.stepsb__icon {
  block-size: 48px;
  inline-size: 48px;
  border-radius: var(--r-tile);
  background: var(--accent-faint);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--accent);
  place-items: center;
  margin-block-end: var(--space-3);
  display: grid;
}

.stepsb__num {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 2rem);
  font-weight: 400;
  line-height: 1;
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-6);
}

.home-wrap .stepsb__title {
  font-size: 1.125rem;
  font-weight: var(--weight-head);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.3;
}

.stepsb__text {
  color: var(--ink-3);
  font-size: var(--step-ui);
  margin: 0;
  line-height: 1.6;
}

.stepsb__link {
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--ink-2);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.stepsb__link:is(:hover, :focus-visible) {
  color: var(--accent);
}

.stepsb__link svg {
  transition: translate var(--t-hover) var(--ease-out);
}

.stepui {
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-4);
  border-radius: var(--r-tile);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline);
  font-size: var(--step-caption);
  -webkit-user-select: none;
  user-select: none;
  margin-block-start: auto;
  line-height: 1.35;
  display: grid;
}

.stepui__top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  display: flex;
}

.stepui__who, .stepui__label {
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  color: var(--ink-2);
  font-weight: var(--weight-semibold);
  display: inline-flex;
}

.stepui__dot {
  border-radius: var(--r-xs);
  background: var(--surface-3);
  block-size: 22px;
  inline-size: 22px;
  color: var(--ink-2);
  font-weight: var(--weight-bold);
  place-items: center;
  display: grid;
}

.stepui__tag {
  border-radius: var(--r-full);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--ink-4);
  flex: none;
  padding: 1px 8px;
}

.stepui__button {
  border-radius: var(--r-full);
  background: var(--cta);
  min-block-size: 36px;
  color: var(--cta-ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  place-items: center;
  display: grid;
}

.stepui__code, .stepui__field, .stepui__row {
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding-inline: var(--space-3) var(--space-1);
  border-radius: var(--r-ctl);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--edge-soft);
  display: flex;
}

.stepui__code-label, .stepui__field-pre, .stepui__row-date {
  color: var(--ink-4);
}

.stepui__code-value {
  min-inline-size: 0;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
  flex: 1;
  padding-block: 6px;
}

.stepui__copy, .stepui__row-icon {
  border-radius: var(--r-m);
  background: var(--surface-3);
  block-size: 32px;
  inline-size: 32px;
  color: var(--ink-2);
  flex: none;
  place-items: center;
  display: grid;
}

.stepui svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stepui__field-val {
  color: var(--ink-2);
  font-size: var(--step-small);
  letter-spacing: .08em;
}

.stepui__linked {
  color: var(--accent);
  font-weight: var(--weight-semibold);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.stepui__row {
  padding-inline: var(--space-1) var(--space-3);
}

.stepui__row-icon {
  background: var(--surface-3);
  color: var(--icon-idle);
}

.stepui__row-what {
  flex: 1;
  min-inline-size: 0;
  padding-block: 4px;
  display: grid;
}

.stepui__row-title {
  color: var(--ink-2);
  font-weight: var(--weight-semibold);
}

.stepui__amount {
  color: var(--money);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stepsb__close {
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.stepsb__close-line {
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--step-ui);
  font-weight: var(--weight-medium);
  margin: 0;
  display: inline-flex;
}

.stepsb__close-icon {
  color: var(--icon-idle);
  flex: none;
}

.stepsb__cta {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--r-full);
  background: var(--cta-fill);
  min-block-size: 46px;
  box-shadow: 0 0 0 1px var(--cta-edge), var(--elev-cta);
  color: var(--cta-ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  transition: translate var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-bounce),
    filter var(--t-hover) ease;
  padding-inline: 22px;
  text-decoration: none;
  display: inline-flex;
}

.stepsb__cta:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .stepsb__card:hover {
    translate: 0 var(--lift);
    box-shadow: 0 0 0 1px var(--edge-soft), var(--elev-2);
  }

  .stepsb__link:hover svg {
    translate: 3px;
  }

  .stepsb__cta:hover {
    filter: brightness(1.06);
    translate: 0 var(--lift);
  }
}

@media (min-width: 640px) and (max-width: 899.98px) {
  .stepsb__card {
    align-content: start;
    gap: var(--space-2) var(--space-5);
    grid-template-columns: auto minmax(0, 1fr);
    display: grid;
  }

  .stepsb__icon {
    grid-row: 1 / span 3;
    margin-block-end: 0;
  }

  .stepsb__title, .stepsb__text, .stepsb__link, .stepui {
    grid-column: 2;
  }

  .stepui {
    max-inline-size: 26rem;
  }

  .home-wrap .stepsb__title {
    margin-inline-end: 3.5rem;
  }

  .stepsb__link {
    justify-self: start;
  }
}

@media (max-width: 639.98px) {
  .steps--b {
    gap: var(--space-8);
  }

  .stepsb__card {
    padding: var(--space-5);
  }

  .stepsb__num {
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-5);
  }

  .stepsb__close {
    flex-direction: column;
    align-items: stretch;
  }

  .stepsb__close-line {
    align-items: flex-start;
  }

  .stepsb__close-icon {
    margin-block-start: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stepsb__card, .stepsb__link svg, .stepsb__cta {
    transition: none;
  }

  .stepsb__card:hover, .stepsb__cta:hover {
    translate: none;
  }
}

/* [project]/src/styles/home-faq.css [app-client] (css) */
.hfaq {
  --hfaq-line: var(--hairline);
  gap: var(--space-8);
  grid-template-areas: "head"
                       "main"
                       "support";
  align-items: start;
  padding-block: clamp(96px, 10vw, 144px) 0;
  display: grid;
}

.hfaq__head {
  gap: var(--space-4);
  grid-area: head;
  align-content: start;
  display: grid;
}

.hfaq__main {
  gap: var(--space-5);
  grid-area: main;
  display: grid;
}

.hfaq__support {
  gap: var(--space-3);
  grid-area: support;
  align-content: start;
  display: grid;
}

@media (min-width: 1024px) {
  .hfaq {
    gap: var(--space-10) clamp(40px, 5vw, 96px);
    grid-template: "head main"
                   "support main" 1fr
                   / minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (max-width: 860px) {
  .hfaq {
    gap: var(--space-6);
    padding-block-start: clamp(48px, 13vw, 72px);
  }
}

.hfaq__lead {
  max-inline-size: 30rem;
  color: var(--muted);
  font-size: var(--step-lead);
  line-height: 1.45;
}

.hfaq .hfaq__list {
  gap: var(--space-2);
  background: none;
  border: 0;
  display: grid;
  overflow: visible;
}

.hfaq .hfaq__list > .hfaq__item {
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  transition: background-color var(--t-hover) var(--ease-out);
  border: 0;
}

.hfaq .hfaq__list > .hfaq__item[open] {
  background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface-2));
}

.hfaq .hfaq__list > .hfaq__item[hidden] {
  display: none;
}

.hfaq .hfaq__item summary {
  min-block-size: 60px;
  padding: var(--space-4) var(--space-5);
  border-radius: inherit;
  grid-template-columns: minmax(0, 1fr) auto;
}

.hfaq .hfaq__answer {
  padding: 0 calc(var(--space-5) + 32px + var(--space-3)) var(--space-5) var(--space-5);
}

@media (max-width: 639.98px) {
  .hfaq .hfaq__item summary {
    min-block-size: 56px;
    padding: var(--space-3) var(--space-4);
  }

  .hfaq .hfaq__answer {
    padding: 0 var(--space-4) var(--space-4);
  }
}

.hfaq__actions {
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.hfaq__more {
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-5) var(--space-4);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out),
    scale var(--t-press) var(--ease-out);
  border: 0;
  align-items: center;
  display: inline-flex;
}

.hfaq__more:active {
  scale: .98;
}

.hfaq__support-title {
  font-size: var(--step-title);
  font-weight: var(--weight-head);
}

.hfaq__support-text {
  color: var(--muted);
  font-size: var(--step-ui);
  line-height: 1.5;
}

.hfaq__channels {
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.hfaq__ch {
  gap: var(--space-3);
  min-block-size: 64px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--ink);
  transition: background-color var(--t-hover) var(--ease-out),
    translate var(--t-hover) var(--ease-out);
  align-items: center;
  text-decoration: none;
  display: flex;
}

.hfaq__ch-icon {
  border-radius: var(--r-m);
  background: var(--surface-3);
  block-size: 40px;
  inline-size: 40px;
  color: var(--icon-idle);
  transition: color .4s var(--ease-out);
  flex: none;
  place-items: center;
  display: grid;
}

.hfaq__ch:is(:hover, :focus-visible) .hfaq__ch-icon {
  color: var(--accent);
}

.hfaq__ch-body {
  gap: 2px;
  min-inline-size: 0;
  display: grid;
}

.hfaq__ch-name {
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
}

.hfaq__ch-text {
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.4;
}

.hfaq__safety {
  gap: var(--space-2);
  color: var(--ink-3);
  font-size: var(--step-ui);
  align-items: flex-start;
  margin-block-start: var(--space-2);
  line-height: 1.5;
  display: flex;
}

.hfaq__safety svg {
  color: var(--icon-idle);
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .hfaq__ch:hover {
    background: var(--surface-3);
    translate: 0 var(--lift);
  }

  .hfaq__more:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hfaq .hfaq__list > .hfaq__item {
    interpolate-size: allow-keywords;
  }

  .hfaq .hfaq__list > .hfaq__item::details-content {
    block-size: 0;
    transition: block-size .45s var(--ease-out),
      content-visibility .45s allow-discrete;
    overflow-y: clip;
  }

  .hfaq .hfaq__list > .hfaq__item[open]::details-content {
    block-size: auto;
  }

  .hfaq .hfaq__item .hfaq__icon {
    transition: rotate .45s var(--ease-out),
      background-color var(--t-hover) var(--ease-out),
      color var(--t-hover) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hfaq .hfaq__list > .hfaq__item, .hfaq__more, .hfaq__ch, .hfaq__ch-icon {
    transition: none;
  }

  .hfaq__ch:hover {
    translate: none;
  }
}

/* [project]/src/styles/payouts-home.css [app-client] (css) */
.pay-home {
  max-inline-size: calc(var(--wrap) + 2 * var(--margin));
  padding: var(--space-4) var(--margin) var(--space-12);
  margin-inline: auto;
}

.pay-home__card {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  display: flex;
}

.pay-home__text {
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: var(--weight-semibold);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.pay-home__dot {
  border-radius: var(--r-full);
  background: var(--brand);
  flex: none;
  block-size: .625rem;
  inline-size: .625rem;
}

.pay-home__amount {
  color: var(--money);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  filter: var(--glow-money-text);
}

.pay-home__tag {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-s);
  background: var(--reward-soft);
  color: var(--reward-ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
}

.pay-home__link {
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-m);
  background: var(--cta);
  color: var(--cta-ink);
  font-size: var(--step-ui);
  font-weight: var(--weight-bold);
  transition: transform var(--t-press) var(--ease-out),
    background-color var(--t-hover) var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

@media (hover: hover) and (pointer: fine) {
  .pay-home__link:hover {
    background: var(--cta-2);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pay-home__link {
    transition: none;
  }
}

/* [project]/src/styles/home-vip.css [app-client] (css) */
.vip {
  padding-block: var(--section-gap) 0;
}

.vip__card {
  --vip-pad: var(--space-10);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline);
  position: relative;
  overflow: hidden;
}

.vip__card:before {
  z-index: 1;
}

.vip__card:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 75% at 6% 0%, rgb(var(--neo-tint) / calc(.09 * var(--ambient-k))), transparent 72%), radial-gradient(40% 60% at 100% 35%, rgb(var(--neo-2-tint) / calc(.07 * var(--ambient-k))), transparent 72%);
  position: absolute;
  inset: 0;
}

.vip__body {
  gap: var(--space-8);
  padding: var(--vip-pad);
  grid-template-areas: "head"
                       "points"
                       "action";
  display: grid;
}

.vip__head {
  gap: var(--space-4);
  grid-area: head;
  align-content: start;
  display: grid;
}

.vip__lead {
  max-inline-size: 40ch;
  font-size: var(--step-lead);
  margin: 0;
  line-height: 1.55;
}

.vip__head .vip__lead {
  color: var(--ink-2);
}

.vip__points {
  gap: var(--space-6);
  grid-area: points;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.vip__point {
  gap: var(--space-1) var(--space-4);
  grid-template-columns: auto minmax(0, 1fr);
  display: grid;
}

.vip__icon {
  fill: none;
  block-size: 24px;
  inline-size: 24px;
  stroke: var(--icon-idle);
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--ease-out);
  grid-row: 1 / span 2;
  margin-block-start: 1px;
}

.vip__point:hover .vip__icon {
  stroke: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .vip__icon {
    transition: none;
  }
}

.home-wrap .vip__point-title {
  font-size: var(--step-title);
  font-weight: var(--weight-head);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

.vip__point-text {
  max-inline-size: 52ch;
  font-size: var(--step-ui);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}

.vip__action {
  align-self: start;
  align-items: flex-start;
  gap: var(--space-3);
  flex-direction: column;
  grid-area: action;
  display: flex;
}

.vip__cta {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--r-full);
  background: var(--cta-fill);
  min-block-size: 46px;
  box-shadow: 0 0 0 1px var(--cta-edge), var(--elev-cta);
  color: var(--cta-ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  padding-inline: 22px;
  text-decoration: none;
  display: inline-flex;
}

.vip .vip__cta {
  transition: translate var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-bounce),
    filter var(--t-hover) ease;
}

.vip__cta:active {
  transform: scale(.97);
}

.vip__cta-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: 18px;
  inline-size: 18px;
  transition: translate var(--t-hover) var(--ease-out);
}

.vip__note {
  max-inline-size: 40ch;
  font-size: var(--step-small);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .vip__cta:hover {
    filter: brightness(1.06);
  }

  .vip__cta:hover .vip__cta-arrow {
    translate: 3px;
  }
}

.vip__brokers {
  padding-block: var(--space-6) var(--space-5);
  background: var(--surface-1);
}

@media (min-width: 900px) {
  .vip__body {
    gap: var(--space-8) var(--space-16);
    grid-template: "head points"
                   "action points" 1fr
                   / minmax(0, 5fr) minmax(0, 6fr);
  }
}

@media (max-width: 639.98px) {
  .vip__card {
    --vip-pad: var(--space-6);
  }

  .vip__action {
    align-items: stretch;
  }

  .vip__brokers {
    padding-block: var(--space-5) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip .vip__cta, .vip__cta-arrow {
    transition: none;
  }

  .vip__cta:hover .vip__cta-arrow {
    translate: none;
  }
}

/* [project]/src/styles/vip-page.css [app-client] (css) */
.vpg {
  padding-block-end: clamp(64px, 8vw, 112px);
}

.vpg-hero {
  padding-block: clamp(24px, 4vw, 40px) clamp(24px, 3vw, 40px);
}

.vpg-hero__grid {
  gap: var(--space-8);
  align-items: center;
  margin-block-start: var(--space-6);
  display: grid;
}

.vpg-hero__text {
  gap: var(--space-4);
  max-inline-size: 40rem;
  display: grid;
}

.vpg-hero h1 {
  font-size: var(--step-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin: 0;
}

.vpg-hero__lead {
  max-inline-size: 46ch;
  font-size: var(--step-lead);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

.vpg-hero__action {
  justify-items: start;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  display: grid;
}

.vpg-hero__note {
  max-inline-size: 44ch;
  font-size: var(--step-small);
  color: var(--ink-4);
  margin: 0;
  line-height: 1.5;
}

.vpg-hero__art {
  justify-self: center;
  inline-size: min(100%, 320px);
}

.vpg-art {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: auto;
  inline-size: 100%;
  display: block;
}

.vpg-art__base {
  stroke: var(--hairline);
  stroke-width: 2px;
}

.vpg-art__bar {
  fill: var(--surface-2);
  stroke: var(--icon-idle);
  stroke-width: 1.5px;
}

.vpg-art__bar--hi {
  fill: var(--accent-wash);
  stroke: var(--accent);
}

.vpg-art__bubble {
  fill: var(--surface-1);
  stroke: var(--accent-edge);
  stroke-width: 1.5px;
}

.vpg-art__tick {
  stroke: var(--accent);
  stroke-width: 3px;
}

.vpg-btn {
  border-radius: var(--r-full);
  background: var(--cta-fill);
  min-block-size: 46px;
  box-shadow: 0 0 0 1px var(--cta-edge), var(--elev-cta);
  color: var(--cta-ink);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  text-align: center;
  transition: transform var(--t-press) var(--ease-bounce),
    filter var(--t-hover) ease;
  justify-content: center;
  align-items: center;
  padding-inline: 22px;
  text-decoration: none;
  display: inline-flex;
}

.vpg-btn:active {
  transform: scale(.97);
}

.vpg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .vpg-btn:hover {
    filter: brightness(1.06);
  }
}

.vpg-sec {
  padding-block-start: var(--section-gap);
}

.vpg-sec__head {
  gap: var(--space-3);
  max-inline-size: 44rem;
  margin-block-end: var(--space-8);
  display: grid;
}

.vpg-sec__lead {
  font-size: var(--step-ui);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}

.vpg-cards {
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.vpg-card {
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline);
  display: grid;
}

.vpg-card__icon {
  fill: none;
  block-size: 28px;
  inline-size: 28px;
  stroke: var(--icon-idle);
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--ease-out);
}

.vpg-card:hover .vpg-card__icon {
  stroke: var(--accent);
}

.vpg-card__title, .vpg-step__title {
  font-size: var(--step-title);
  font-weight: var(--weight-head);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

.vpg-card__text, .vpg-step__text {
  font-size: var(--step-ui);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}

.vpg-same {
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline);
  display: grid;
}

.vpg-same .vpg-sec__head {
  margin-block-end: var(--space-4);
}

.vpg-same__list {
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.vpg-same__item {
  font-size: var(--step-ui);
  color: var(--ink-2);
  padding-inline-start: var(--space-6);
  line-height: 1.6;
  position: relative;
}

.vpg-same__item:before {
  content: "";
  border-radius: var(--r-full);
  background: var(--accent);
  block-size: 8px;
  inline-size: 8px;
  position: absolute;
  inset-block-start: .6em;
  inset-inline-start: 0;
}

.vpg-steps {
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.vpg-step {
  align-content: start;
  gap: var(--space-2);
  border-block-start: 1px solid var(--hairline);
  padding-block-start: var(--space-4);
  display: grid;
}

.vpg-step__num {
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--accent);
}

.vpg-faq {
  max-inline-size: 48rem;
  display: grid;
}

.vpg-faq__item {
  border-block-end: 1px solid var(--hairline);
}

.vpg-faq__q {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--tap);
  padding-block: var(--space-4);
  cursor: pointer;
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  list-style: none;
  display: flex;
}

.vpg-faq__q::-webkit-details-marker {
  display: none;
}

.vpg-faq__q:after {
  content: "+";
  font-size: var(--step-title);
  color: var(--ink-4);
  transition: transform var(--t-hover) var(--ease-out);
  flex: none;
  line-height: 1;
}

.vpg-faq__item[open] .vpg-faq__q:after {
  color: var(--accent);
  transform: rotate(45deg);
}

.vpg-faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vpg-faq__a {
  max-inline-size: 60ch;
  font-size: var(--step-ui);
  color: var(--ink-3);
  margin: 0;
  padding-block-end: var(--space-4);
  line-height: 1.6;
}

.vpg-cta {
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline);
  display: grid;
}

.vpg-cta__text {
  gap: var(--space-3);
  display: grid;
}

.vpg-cta__text p {
  font-size: var(--step-ui);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}

.vpg-risk {
  margin: var(--space-6) 0 0;
  max-inline-size: 70ch;
  font-size: var(--step-small);
  color: var(--ink-4);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .vpg-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .vpg-same, .vpg-cta {
    padding: var(--space-10);
  }
}

@media (min-width: 900px) {
  .vpg-hero__grid {
    gap: var(--space-16);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .vpg-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vpg-same {
    gap: var(--space-16);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .vpg-same .vpg-sec__head {
    margin-block-end: 0;
  }

  .vpg-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 639.98px) {
  .vpg-hero__action {
    justify-items: stretch;
  }

  .vpg-hero__art {
    inline-size: min(100%, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vpg-btn, .vpg-card__icon, .vpg-faq__q:after {
    transition: none;
  }
}

/* [project]/src/styles/breadcrumbs.css [app-client] (css) */
.crumbs {
  min-width: 0;
  max-width: 100%;
}

.crumbs__list {
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  color: var(--ink-3);
  font-size: var(--step-caption);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  list-style: none;
  display: flex;
}

.crumbs__item {
  overflow-wrap: anywhere;
  min-width: 0;
}

.crumbs__item + .crumbs__item:before {
  content: "›";
  color: var(--ink-3);
  margin-inline-end: var(--space-2);
}

.crumbs__link {
  padding-block: var(--space-1);
  color: inherit;
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
}

.crumbs__link:hover {
  color: var(--accent);
}

.crumbs__link:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 48rem) {
  .crumbs__list {
    font-size: var(--step-small);
  }
}

/* [project]/src/styles/why-us.css [app-client] (css) */
.why {
  gap: var(--space-10);
  padding-block: var(--section-gap) 0;
  display: grid;
}

.why__intro {
  gap: var(--space-3);
  max-inline-size: 44rem;
  display: grid;
}

.why__lead {
  font-size: var(--step-lead);
  margin: 0;
  line-height: 1.45;
}

.why__list {
  isolation: isolate;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}

@media (min-width: 1100px) {
  .why__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.why__list:before {
  content: "";
  inset: calc(var(--space-12) * -1) 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(26% 48% at 27% 50%, rgb(var(--neo-tint) / calc(.14 * var(--ambient-k))), transparent), radial-gradient(22% 44% at 76% 54%, rgb(var(--neo-2-tint) / calc(.09 * var(--ambient-k))), transparent);
  position: absolute;
}

.why__item {
  display: grid;
}

.why__card {
  --spot-size: 18rem;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-1);
  flex-direction: column;
  display: flex;
}

.why__head {
  justify-content: flex-end;
  gap: var(--space-1);
  min-block-size: 3.5rem;
  flex-direction: column;
  margin-block-end: var(--space-2);
  display: flex;
}

.why__value {
  color: var(--ink);
  line-height: 1.1;
}

.why__value--num, .why__value--date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  letter-spacing: -.03em;
}

.why__value--num {
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem);
}

.why__value--date {
  font-size: clamp(1.375rem, 1.25rem + .4vw, 1.625rem);
}

.why__value--word {
  font-size: clamp(1.375rem, 1.25rem + .4vw, 1.625rem);
  font-weight: var(--weight-head);
  letter-spacing: -.02em;
}

.why__value--icon {
  border-radius: var(--r-tile);
  background: var(--accent-faint);
  block-size: 48px;
  inline-size: 48px;
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--accent);
  place-items: center;
  display: grid;
}

.why__caption {
  color: var(--ink-4);
  font-size: var(--step-caption);
  font-weight: var(--weight-medium);
}

.home-wrap .why__title {
  font-size: 1.125rem;
  font-weight: var(--weight-head);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.3;
}

.why__text {
  color: var(--ink-3);
  font-size: var(--step-ui);
  margin: 0;
  line-height: 1.6;
}

.why__nowrap {
  white-space: nowrap;
}

.why__nowrap .term-hint__pop {
  white-space: normal;
}

.why__link {
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--ink-2);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out);
  margin-block-start: auto;
  text-decoration: none;
  display: inline-flex;
}

.why__link:is(:hover, :focus-visible) {
  color: var(--accent);
}

.why__link svg {
  transition: translate var(--t-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .why__link:hover svg {
    translate: 3px;
  }
}

@media (max-width: 559.98px) {
  .why {
    gap: var(--space-8);
  }

  .why__list {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .why__card {
    padding: var(--space-5);
  }

  .why__head {
    min-block-size: 0;
    margin-block-end: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why__link svg {
    transition: none;
  }
}

/* [project]/src/styles/ecosystem.css [app-client] (css) */
.eco {
  gap: var(--space-10);
  padding-block: var(--section-gap) 0;
  align-items: center;
  display: grid;
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .eco {
    gap: var(--space-12);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.eco__head {
  gap: var(--space-3);
  max-inline-size: 30rem;
  display: grid;
}

.eco__lead {
  font-size: var(--step-lead);
  margin: 0;
  line-height: 1.55;
}

.eco__brokers {
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  display: none;
}

.eco__broker {
  --bmark-halo: var(--broker-halo, none);
  display: flex;
}

.eco__brokers .eco__bicon {
  --bmark-size: 28px;
}

.eco__item {
  border-radius: var(--r-card);
  block-size: 100%;
  inline-size: 100%;
  color: var(--ink-2);
  place-items: center;
  text-decoration: none;
  display: grid;
  position: relative;
}

.eco__tile {
  --eco-ink: var(--accent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--eco-ink) 12%, var(--surface-2));
  block-size: 100%;
  inline-size: 100%;
  color: var(--eco-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--eco-ink) 32%, var(--hairline)), var(--elev-1);
  transition: box-shadow var(--t-hover) ease;
  place-items: center;
  display: grid;
}

.eco__tile[data-tone="blue"] {
  --eco-ink: var(--accent-blue);
}

.eco__tile[data-tone="money"] {
  --eco-ink: var(--money);
}

.eco__tile[data-tone="logo"] {
  --eco-ink: var(--ink-3);
  background: var(--surface-2);
}

.eco__icon {
  block-size: 24px;
  inline-size: 24px;
}

.eco__icon--logo {
  block-size: 32px;
  inline-size: 32px;
}

.eco__item:hover .eco__tile, .eco__item:focus-visible .eco__tile {
  box-shadow: 0 0 0 1.5px var(--eco-ink), var(--elev-1);
}

.eco__label {
  inline-size: max-content;
  max-inline-size: 9.5rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover) ease;
  line-height: 1.35;
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  translate: -50%;
}

.eco__item:hover .eco__label, .eco__item:focus-visible .eco__label {
  opacity: 1;
}

@media (hover: none) {
  .eco__label {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .eco {
    gap: var(--space-8);
  }

  .eco__brokers {
    flex-wrap: wrap;
    display: flex;
  }

  .eco__item {
    gap: var(--space-3);
    min-block-size: var(--tap);
    padding: var(--space-2);
    border-radius: var(--r-tile);
    background: var(--surface-1);
    box-shadow: 0 0 0 1px var(--hairline);
    align-items: center;
    display: flex;
  }

  .eco__tile {
    border-radius: var(--r-tile);
    flex: none;
    block-size: 44px;
    inline-size: 44px;
  }

  .eco__label {
    inline-size: auto;
    max-inline-size: none;
    color: var(--ink-2);
    text-align: start;
    opacity: 1;
    background: none;
    padding: 0;
    position: static;
    translate: none;
  }
}

/* [project]/src/styles/ecosystem-orbit.css [app-client] (css) */
.eco__stage {
  --eco-tile: 56px;
  --eco-radius: 41cqi;
  --eco-inner: 23cqi;
  --eco-play: running;
  aspect-ratio: 1;
  inline-size: min(100%, 520px);
  margin-inline: auto;
  position: relative;
  container-type: inline-size;
}

.eco__stage:before, .eco__stage:after {
  content: "";
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}

.eco__stage:before {
  inset: calc(50cqi - var(--eco-radius));
  border: 1px dashed var(--edge-soft);
}

.eco__stage:after {
  inset: calc(50cqi - var(--eco-inner));
  background: var(--surface-1);
}

.eco__core {
  z-index: 1;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hairline), 0 0 72px 20px color-mix(in srgb, var(--cta) 24%, transparent);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 35cqi;
}

.eco__logo {
  font-size: clamp(2.25rem, 12cqi, 4rem);
}

.eco__defs {
  block-size: 0;
  inline-size: 0;
  position: absolute;
  overflow: hidden;
}

.eco__stop-a {
  stop-color: var(--accent);
}

.eco__stop-b {
  stop-color: var(--accent-blue);
}

.eco__logo .logo__arc {
  stroke: url("#eco-mark-run");
}

.eco__logo .logo__head {
  fill: var(--accent-blue);
  stroke: var(--accent-blue);
}

.eco__core:after {
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow-accent);
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.eco__orbit {
  inset: calc(50cqi - var(--eco-radius));
  pointer-events: none;
  border-radius: 50%;
  display: none;
  position: absolute;
}

.eco__orbit:before {
  background: var(--accent);
  block-size: 6px;
  inline-size: 6px;
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  content: "";
  border-radius: 50%;
  position: absolute;
  inset-block-start: -2.5px;
  inset-inline-start: calc(50% - 3px);
}

.eco__ring, .eco__inner {
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  inset: 0;
}

.eco__ring--n1 {
  --eco-n: 1;
}

.eco__ring--n2 {
  --eco-n: 2;
}

.eco__ring--n3 {
  --eco-n: 3;
}

.eco__ring--n4 {
  --eco-n: 4;
}

.eco__ring--n5 {
  --eco-n: 5;
}

.eco__ring--n6 {
  --eco-n: 6;
}

.eco__ring--n7 {
  --eco-n: 7;
}

.eco__ring--n8 {
  --eco-n: 8;
}

.eco__slot--i0 {
  --eco-i: 0;
}

.eco__slot--i1 {
  --eco-i: 1;
}

.eco__slot--i2 {
  --eco-i: 2;
}

.eco__slot--i3 {
  --eco-i: 3;
}

.eco__slot--i4 {
  --eco-i: 4;
}

.eco__slot--i5 {
  --eco-i: 5;
}

.eco__slot--i6 {
  --eco-i: 6;
}

.eco__slot--i7 {
  --eco-i: 7;
}

.eco__slot {
  --eco-a: calc(360deg / var(--eco-n, 1) * var(--eco-i, 0));
  inline-size: var(--eco-tile);
  block-size: var(--eco-tile);
  margin: calc(var(--eco-tile) / -2);
  transform: rotate(var(--eco-a)) translateY(calc(-1 * var(--eco-radius)))
    rotate(calc(-1 * var(--eco-a)));
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
}

.eco__inner {
  pointer-events: none;
}

.eco__bslot {
  --eco-a: calc(360deg / var(--eco-n, 1) * (var(--eco-i, 0) + .5));
  --bmark-halo: var(--broker-halo, none);
  block-size: 32px;
  inline-size: 32px;
  transform: rotate(var(--eco-a)) translateY(calc(-1 * var(--eco-inner)))
    rotate(calc(-1 * var(--eco-a)));
  margin: -16px;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .eco__stage:not(.is-in), .eco:hover .eco__stage, .eco:focus-within .eco__stage {
    --eco-play: paused;
  }

  .eco__ring {
    animation: 70s linear infinite eco-turn;
    animation-play-state: var(--eco-play);
  }

  .eco__item {
    animation: 70s linear infinite reverse eco-turn;
    animation-play-state: var(--eco-play);
  }

  .eco__inner {
    animation: 80s linear infinite reverse eco-turn;
    animation-play-state: var(--eco-play);
  }

  .eco__inner .eco__bicon {
    animation: 80s linear infinite eco-turn;
    animation-play-state: var(--eco-play);
  }

  .eco__core:after {
    animation: 5s ease-in-out infinite alternate eco-breathe;
    animation-play-state: var(--eco-play);
  }

  .eco__orbit {
    animation: 40s linear infinite eco-turn;
    animation-play-state: var(--eco-play);
    display: block;
  }
}

@keyframes eco-breathe {
  from {
    opacity: .2;
    scale: 1;
  }

  to {
    opacity: 1;
    scale: 1.08;
  }
}

@keyframes eco-turn {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 600px) {
  .eco__stage {
    aspect-ratio: auto;
    inline-size: 100%;
    container-type: normal;
  }

  .eco__stage:before, .eco__stage:after, .eco__core, .eco__orbit, .eco__inner {
    display: none;
  }

  .eco__ring {
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    animation: none;
    display: grid;
    position: static;
  }

  .eco__slot {
    block-size: auto;
    inline-size: auto;
    margin: 0;
    position: static;
    transform: none;
  }

  .eco__item {
    animation: none;
  }
}

/* [project]/src/styles/home-blog.css [app-client] (css) */
.hblog {
  gap: var(--space-10);
  padding-block: var(--section-gap) 0;
  display: grid;
}

.hblog__head {
  gap: var(--space-4);
  align-items: end;
  display: grid;
}

@media (min-width: 768px) {
  .hblog__head {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.hblog__intro {
  gap: var(--space-3);
  max-inline-size: 44rem;
  display: grid;
}

.hblog__lead {
  color: var(--ink-3);
  font-size: var(--step-lead);
  margin: 0;
  line-height: 1.5;
}

.hblog__all {
  justify-self: start;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--ink-2);
  font-size: var(--step-ui);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.hblog__all:is(:hover, :focus-visible) {
  color: var(--accent);
}

.hblog__all svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate var(--t-hover) var(--ease-out);
}

.hblog__top {
  gap: var(--space-5);
  display: grid;
}

@media (min-width: 1024px) {
  .hblog__top:not(.hblog__top--solo) {
    gap: var(--space-6);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .hblog__top:not(.hblog__top--solo) .hblog__post--story .hblog__media {
    aspect-ratio: 2;
  }
}

.hblog__story {
  display: grid;
}

.hblog__list {
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline);
  align-self: start;
  margin: 0;
  list-style: none;
  display: grid;
}

.hblog__list:has( > li:nth-child(4)) {
  grid-auto-rows: 1fr;
  align-content: stretch;
  align-self: stretch;
}

.hblog__post {
  border-radius: var(--r-tile);
  block-size: 100%;
  display: grid;
  position: relative;
}

.hblog__post--story, .hblog__post--card {
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-1);
  transition: translate var(--t-hover) var(--ease-out),
    box-shadow var(--t-hover) ease;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.hblog__media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}

.hblog__img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  transition: transform .7s var(--ease-out);
  display: block;
}

.bcover {
  background: radial-gradient(90% 120% at 0% 100%, var(--accent-wash), transparent 70%), radial-gradient(80% 110% at 100% 0%, var(--accent-blue-wash), transparent 70%), var(--surface-2);
  place-items: center;
  block-size: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.bcover__art {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: 100%;
  inline-size: 100%;
  transition: transform var(--t-reveal) var(--ease-out);
  position: absolute;
  inset: 0;
}

.bcover__art > * {
  vector-effect: non-scaling-stroke;
}

.bcover__a {
  stroke: var(--accent);
}

.bcover__b {
  stroke: var(--accent-blue);
}

.bcover__soft {
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1.5px;
}

.bcover__dot {
  fill: var(--surface-2);
}

.bcover__label {
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--ink-2);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  padding: 4px 14px;
  position: relative;
}

.hblog__body {
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  flex-direction: column;
  display: flex;
}

.hblog__chip {
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--step-caption);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out),
    background-color .4s var(--ease-out);
  align-items: center;
  padding: 2px 10px;
  display: inline-flex;
}

.hblog__post:is(:hover, :focus-within) .hblog__chip {
  background: var(--accent-faint);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .hblog__chip {
    transition: none;
  }
}

.home-wrap .hblog__title {
  font-size: 1.0625rem;
  font-weight: var(--weight-head);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.35;
}

.hblog__link {
  color: var(--ink);
  background: linear-gradient(var(--neo), var(--neo)) 0 100% / 0% 1px no-repeat;
  transition: background-size .6s var(--ease-out);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .hblog__link {
    transition: none;
  }
}

.hblog__link:after {
  content: "";
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.hblog__post:has(.hblog__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hblog__link:focus-visible {
  outline: none;
}

.hblog__summary {
  color: var(--ink-3);
  font-size: var(--step-body);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.hblog__meta {
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink-4);
  font-size: var(--step-caption);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--space-1);
  display: flex;
}

.hblog__post--story .hblog__body {
  gap: var(--space-3);
  padding: var(--space-6);
}

.home-wrap .hblog__post--story .hblog__title {
  letter-spacing: var(--tracking-title);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hblog__top--solo .hblog__post--story {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .hblog__top--solo .hblog__post--story .hblog__media {
    aspect-ratio: auto;
    min-block-size: 18rem;
  }

  .hblog__top--solo .hblog__post--story .hblog__body {
    padding: var(--space-8);
    justify-content: center;
  }

  .hblog__top--solo .hblog__meta {
    margin-block-start: 0;
  }
}

.hblog__post--item {
  transition: background-color var(--t-hover) ease;
}

.hblog__post--item .hblog__body {
  padding: var(--space-3) var(--space-4);
  justify-content: center;
}

.hblog__post--item .hblog__meta {
  margin-block-start: 0;
}

.hblog__cards {
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 640px) {
  .hblog__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hblog__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .hblog__post--card {
    grid-template-rows: none;
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .hblog__post--card .hblog__media {
    aspect-ratio: auto;
  }

  .hblog__post--card .hblog__body {
    padding: var(--space-4);
  }

  .hblog__post--story .hblog__body {
    padding: var(--space-5);
  }

  .home-wrap .hblog__post--story .hblog__title {
    font-size: var(--step-title);
    line-height: 1.3;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hblog__post--story:hover, .hblog__post--card:hover {
    translate: 0 var(--lift);
    box-shadow: 0 0 0 1px var(--edge-soft), var(--elev-2);
  }

  .hblog__post--item:hover {
    background-color: var(--surface-2);
  }

  .hblog__post:hover .hblog__img, .hblog__post:hover .bcover__art {
    transform: scale(1.05);
  }

  .hblog__all:hover span {
    text-underline-offset: 3px;
    text-decoration: underline;
  }

  .hblog__post:hover .hblog__link {
    background-size: 100% 1px;
  }

  .hblog__all:hover svg {
    translate: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hblog__post, .hblog__img, .bcover__art, .hblog__all svg {
    transition: none;
  }

  .hblog__post:hover {
    translate: none;
  }

  .hblog__post:hover .hblog__img, .hblog__post:hover .bcover__art {
    transform: none;
  }
}

/* [project]/src/styles/tools-strip.css [app-client] (css) */
.tstrip {
  gap: var(--space-8);
  padding-block: var(--section-gap) 0;
  display: grid;
}

.tstrip__head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3) var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.tstrip__intro {
  gap: var(--space-3);
  max-inline-size: 44rem;
  display: grid;
}

.tstrip__lead {
  color: var(--ink-3);
  font-size: var(--step-lead);
  margin: 0;
  line-height: 1.45;
}

.tstrip__all {
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--ink-2);
  font-size: var(--step-small);
  font-weight: var(--weight-semibold);
  transition: color .4s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.tstrip__all:is(:hover, :focus-visible) {
  color: var(--accent);
}

.tstrip__all-arrow, .tstrip__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  block-size: 15px;
  inline-size: 15px;
}

.tstrip__all-arrow {
  transition: translate var(--t-hover) var(--ease-out);
}

.tstrip__grid {
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.tstrip__item {
  display: grid;
}

.tstrip__tile {
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--tap);
  padding: var(--space-4);
  border-radius: var(--r-card);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--ink);
  transition: translate var(--t-hover) var(--ease-out),
    box-shadow var(--t-hover) ease;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.tstrip__mark {
  border-radius: var(--r-tile);
  background: var(--accent-faint);
  block-size: 40px;
  inline-size: 40px;
  color: var(--accent);
  flex: none;
  place-items: center;
  display: grid;
}

.tstrip__icon {
  --d: 0s;
  stroke-width: 1.5px;
  block-size: 22px;
  inline-size: 22px;
}

.tstrip__item:nth-child(2) {
  --draw-delay: .22s;
}

.tstrip__item:nth-child(3) {
  --draw-delay: .28s;
}

.tstrip__item:nth-child(4) {
  --draw-delay: .34s;
}

.tstrip__item:nth-child(5) {
  --draw-delay: .4s;
}

.tstrip__item:nth-child(6) {
  --draw-delay: .46s;
}

.tstrip__tile {
  --spot-size: 14rem;
}

.tstrip__words {
  gap: var(--space-1);
  min-inline-size: 0;
  display: grid;
}

.tstrip__name {
  font-size: var(--step-body);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.tstrip__desc {
  color: var(--ink-3);
  font-size: var(--step-ui);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .tstrip__grid {
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tstrip__tile {
    gap: var(--space-4);
    padding: var(--space-5);
    flex-direction: row;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tstrip__tile:hover {
    translate: 0 var(--lift);
    box-shadow: 0 0 0 1px var(--edge-soft);
  }

  .tstrip__all:hover .tstrip__all-arrow {
    translate: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tstrip__tile, .tstrip__all-arrow {
    transition: none;
  }

  .tstrip__tile:hover, .tstrip__all:hover .tstrip__all-arrow {
    translate: none;
  }
}

/* [project]/src/styles/risk-note.css [app-client] (css) */
.risknote {
  padding-block: var(--section-gap) 0;
}

.risknote__panel {
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--hairline);
  background: var(--well);
  color: var(--ink-3);
  display: grid;
}

.home-wrap .risknote__title {
  color: var(--ink);
  font-size: var(--step-h3);
  font-weight: var(--weight-head);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-title);
  margin: 0;
}

.risknote__list {
  gap: var(--space-5) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.risknote__item {
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.risknote__mark {
  color: var(--ink-4);
  margin-block-start: .125rem;
}

.risknote__item p {
  max-inline-size: var(--measure);
  color: var(--ink-3);
  font-size: var(--step-small);
  line-height: var(--leading-body);
  margin: 0;
}

.risknote__links {
  gap: 0 var(--space-6);
  flex-wrap: wrap;
  max-inline-size: none;
  margin: 0;
  display: flex;
}

.risknote__link {
  color: var(--ink-2);
  font-size: var(--step-small);
}

@media (min-width: 768px) {
  .risknote__panel {
    gap: var(--space-8);
    padding: var(--space-10) var(--space-10) var(--space-8);
  }

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

/*# sourceMappingURL=src_styles_0ywgbznce-yv9._.css.map*/