body {
  --gold: var(--accent);
  --silver: color-mix(in srgb, var(--ink) 84%, var(--paper-soft));
  --bronze: color-mix(in srgb, var(--accent) 45%, color-mix(in srgb, var(--paper-soft) 35%, rgb(205 100 50)));
  --shield: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
}

.wordmark img {
  width: auto;
  height: 2rem;
  margin-left: -1rem;
}

.nap__logo {
  width: auto;
  height: 1.75rem;
  margin-left: -0.875rem;
  margin-bottom: var(--step);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.action {
  min-height: 48px;
  padding: 0.875rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.action:hover {
  box-shadow: none;
}

.action--quiet {
  background: rgb(94 200 255 / 0.06);
  border-color: rgb(45 111 150);
  color: rgb(159 224 255);
}

.action--quiet:hover {
  background: rgb(94 200 255 / 0.12);
  border-color: rgb(94 200 255);
  color: var(--ink);
}

nav .nav__login .action {
  display: inline-flex;
}

@media (max-width: 47.99rem) {
  nav .nav__login {
    padding: var(--step) var(--gap);
  }

  nav ul[popover] .nav__login a {
    display: flex;
    padding: 0.75rem 1.5rem;
  }
}

@media (min-width: 48rem) {
  nav .action {
    min-height: 40px;
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }

  nav > ul {
    align-items: center;
  }

  nav .nav__login {
    margin-left: var(--step);
  }

  nav .nav__login .action {
    margin-left: 0;
  }
}

.arena__cap,
.sale__stage figcaption,
.profile figcaption {
  margin-top: var(--gap);
  font-family: var(--type);
  font-size: 0.8125rem;
  text-transform: none;
  color: var(--ink-soft);
}

.arena {
  margin: 0;
}

.arena__frame {
  container-type: size;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  isolation: isolate;
  background: rgb(2 3 5);
  font-family: var(--type-heading);
  --avh: 1cqh;
  --avw: 1cqw;
  --nm: 6;
  --port-h: 26;
  --port-w: 20;
  --rec-l: 1.8;
  --rec-n: 2.6;
  --place: 3.2;
  --hp-h: 7;
  --hp-t: 5;
  --ko: 24;
  --out: 13;
  --seat-gap: 4;
  --seat-pad: 4;
  --seam-pad: 7;
  --band-h: 40;
  --bloom-h: 14;
}

.arena__frame p {
  max-width: none;
}

.arena__field {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 0.68, 0.28, 1);
}

.arena__frame.has-field .arena__field {
  opacity: 1;
}

.arena__half {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  height: 50%;
  overflow: hidden;
}

.arena__half--higher {
  top: 0;
}

.arena__half--lower {
  top: 50%;
  opacity: 0.55;
}

.arena__ground,
.arena__gather {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.arena__half--higher .arena__ground {
  background:
    radial-gradient(ellipse 70% 120% at 88% 18%, color-mix(in srgb, var(--ground) 27%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(105deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(168deg, color-mix(in srgb, var(--ground) 20%, transparent) 0%, rgb(3 5 9 / 0.97) 62%, rgb(1 2 4) 100%);
}

.arena__half--lower .arena__ground {
  background:
    radial-gradient(ellipse 70% 120% at 12% 82%, color-mix(in srgb, var(--ground) 27%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(105deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(348deg, color-mix(in srgb, var(--ground) 20%, transparent) 0%, rgb(3 5 9 / 0.97) 62%, rgb(1 2 4) 100%);
}

.arena__half--higher .arena__gather {
  background: radial-gradient(ellipse 60% 88% at 74% 50%, color-mix(in srgb, var(--ground) 33%, transparent) 0%, transparent 72%);
}

.arena__half--lower .arena__gather {
  background: radial-gradient(ellipse 60% 88% at 26% 50%, color-mix(in srgb, var(--ground) 33%, transparent) 0%, transparent 72%);
}

.arena__seat {
  position: absolute;
  inset-inline: 0;
  z-index: 3;
  height: 50%;
  display: flex;
  align-items: center;
  gap: calc(var(--avw) * var(--seat-gap));
  padding-inline: calc(var(--avw) * var(--seat-pad));
}

.arena__seat--higher {
  top: 0;
  flex-direction: row-reverse;
  padding-bottom: calc(var(--avh) * var(--seam-pad));
}

.arena__seat--lower {
  top: 50%;
  opacity: 0.55;
  padding-top: calc(var(--avh) * var(--seam-pad));
}

.arena__portrait {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  height: calc(var(--avh) * var(--port-h));
  width: calc(var(--avh) * var(--port-w));
  overflow: hidden;
  clip-path: polygon(8.4% 0%, 100% 0%, 91.6% 100%, 0% 100%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ground) 27%, transparent) 0%, rgb(6 8 12 / 0.94) 62%);
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.9),
    0 0 0 7px var(--ground),
    0 0 60px color-mix(in srgb, var(--ground) 80%, transparent),
    inset 0 0 70px rgb(0 0 0 / 0.75);
}

.arena__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arena__id {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--avh) * 1.4);
}

.arena__seat--higher .arena__id {
  align-items: flex-start;
  text-align: left;
}

.arena__seat--lower .arena__id {
  align-items: flex-end;
  text-align: right;
}

.arena__nm {
  width: 100%;
  margin: 0;
  font-size: calc(var(--avh) * var(--nm));
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255 250 240);
  text-shadow: 0 0 5px rgb(0 0 0 / 0.98), 0 5px 18px rgb(0 0 0 / 0.95), 0 0 54px var(--ground);
}

.arena__rec {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: calc(var(--avw) * 2);
  margin: 0;
}

.arena__seat--higher .arena__rec {
  justify-content: flex-start;
}

.arena__seat--lower .arena__rec {
  justify-content: flex-end;
}

.arena__rec span {
  display: flex;
  align-items: baseline;
  gap: calc(var(--avw) * 0.5);
}

.arena__rec b {
  font-size: calc(var(--avh) * var(--rec-l));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #8b9bb0;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.95);
}

.arena__rec i {
  font-style: normal;
  font-size: calc(var(--avh) * var(--rec-n));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #e8eff9;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.95), 0 2px 8px rgb(0 0 0 / 0.9);
}

.arena__hpline {
  display: flex;
  width: 100%;
  align-items: center;
  gap: calc(var(--avw) * 1.4);
}

.arena__seat--lower .arena__hpline {
  flex-direction: row-reverse;
}

.arena__place {
  flex: none;
  font-size: calc(var(--avh) * var(--place));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ground);
  text-shadow: 0 0 4px rgb(0 0 0 / 0.95);
}

.arena__hp {
  position: relative;
  display: block;
  min-width: 0;
  flex: 1;
  height: calc(var(--avh) * var(--hp-h));
  clip-path: polygon(5.6% 0%, 100% 0%, 94.4% 100%, 0% 100%);
  background: linear-gradient(180deg, rgb(11 16 24) 0%, rgb(5 7 12) 46%, rgb(13 19 29) 100%);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.95), inset 0 -2px 4px rgb(255 255 255 / 0.06);
}

.arena__hpGrid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 7px);
}

.arena__hpFill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: calc(var(--hp, 1) * 100%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.62) 0%, rgb(255 255 255 / 0.05) 50%, rgb(255 255 255 / 0) 50%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground) 34%, rgb(0 0 0 / 0.34) 100%);
}

.arena__hpFill::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 7px;
  background: rgb(255 255 255);
  box-shadow: 0 0 24px rgb(255 255 255), 0 0 34px var(--ground), 0 0 70px var(--ground);
}

.arena__hp[style*="--hp:0"] .arena__hpFill {
  display: none;
}

.arena__hpPct {
  position: absolute;
  inset-block: 0;
  right: calc(var(--avw) * 4);
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: calc(var(--avh) * var(--hp-t));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255);
  text-shadow: 0 0 4px rgb(0 0 0 / 0.98), 0 1px 4px rgb(0 0 0 / 0.95);
}

.arena__outcome {
  position: absolute;
  top: 50%;
  z-index: 4;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
  font-size: calc(var(--avh) * var(--out));
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 3px rgb(8 11 18 / 0.9);
  paint-order: stroke fill;
}

.arena__seat--higher .arena__outcome {
  left: calc(var(--avw) * 4);
}

.arena__seat--lower .arena__outcome {
  right: calc(var(--avw) * 4);
}

.arena__outcome--win {
  color: #fff4cf;
  text-shadow: 0 0 10px rgb(0 0 0 / 0.98), 0 0 60px rgb(255 196 86), 0 0 140px rgb(255 150 50 / 0.8);
}

.arena__outcome--lose {
  color: #8894a6;
  text-shadow: 0 0 10px rgb(0 0 0 / 0.98), 0 6px 22px rgb(0 0 0 / 0.95);
}

.arena__band,
.arena__bloom,
.arena__seam,
.arena__sweep {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  pointer-events: none;
}

.arena__band {
  height: calc(var(--avh) * var(--band-h));
  background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.85) 34%, rgb(0 0 0 / 0.9) 50%, rgb(0 0 0 / 0.85) 66%, transparent 100%);
}

.arena__bloom {
  height: calc(var(--avh) * var(--bloom-h));
  opacity: 0.78;
  filter: blur(10px);
  background: linear-gradient(180deg, transparent 0%, rgb(255 168 74 / 0.42) 44%, rgb(255 214 150 / 0.5) 50%, rgb(255 168 74 / 0.42) 56%, transparent 100%);
}

.arena__seam {
  height: 10px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, rgb(255 226 178 / 0.9) 10%, rgb(255 255 255) 50%, rgb(255 226 178 / 0.9) 90%, rgb(0 0 0 / 0) 100%);
  box-shadow: 0 0 20px rgb(255 206 140), 0 0 20px rgb(255 150 60 / 0.7), 0 0 47px rgb(255 110 40 / 0.5);
}

.arena__sweep {
  display: none;
  width: 22%;
  height: 10px;
  inset-inline: auto;
  filter: blur(1px);
  background: linear-gradient(90deg, transparent, rgb(255 255 255), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .arena__sweep {
    display: block;
    animation: arena-sweep 1.9s cubic-bezier(0.22, 0.68, 0.28, 1) infinite;
  }
}

@keyframes arena-sweep {
  from {
    transform: translate(-30%, -50%);
  }

  to {
    transform: translate(460%, -50%);
  }
}

.arena__ko {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: calc(var(--avh) * var(--ko));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgb(255 246 226);
  -webkit-text-stroke: 3px rgb(10 14 22 / 0.85);
  paint-order: stroke fill;
  text-shadow: 0 0 10px rgb(0 0 0 / 0.98), 0 10px 34px rgb(0 0 0 / 0.96), 0 0 80px rgb(255 80 50), 0 0 180px rgb(255 180 60 / 0.85);
  pointer-events: none;
}

@media (min-width: 52rem) {
  .arena__frame {
    aspect-ratio: 16 / 9;
    --nm: 9;
    --port-h: 38;
    --port-w: 25;
    --rec-l: 2.1;
    --rec-n: 3.2;
    --place: 4;
    --hp-h: 12;
    --hp-t: 8;
    --ko: 34;
    --out: 20;
    --seat-gap: 3;
    --seat-pad: 3;
    --seam-pad: 6;
  }
}

.sale__body {
  display: grid;
  gap: var(--gap-wide);
}

.sale__stage {
  margin: 0;
}

.sale__frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(19rem, 46vw, 32rem);
  overflow: hidden;
  isolation: isolate;
  background: rgb(7 9 12);
  font-family: var(--type-heading);
}

.sale__frame p {
  max-width: none;
}

.sale__crystal {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 60% at 50% 45%, rgb(0 0 0 / 0.6), transparent 80%),
    rgb(6 4 16 / 0.35);
}


.sale__over {
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: var(--gap-wide) var(--gap);
  text-align: center;
}

.sale__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem clamp(0.75rem, 2.4vw, 1.75rem);
  margin: 0;
}

.sale__rank {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 7vw, 4.75rem);
  height: clamp(2.9rem, 7.75vw, 5.25rem);
  background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(226 230 235) 45%, rgb(176 183 192) 100%);
  color: rgb(6 8 11);
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  clip-path: var(--shield);
}

.sale__name {
  font-size: clamp(2rem, 6.4vw, 4.75rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: rgb(255 255 255);
  text-shadow: 0 4px 44px rgb(0 0 0 / 0.95), 0 0 90px rgb(0 0 0 / 0.8), 0 2px 4px rgb(0 0 0);
}

.sale__tag {
  padding: 0.32rem 0.85rem;
  border: 2px solid rgb(86 160 196);
  border-radius: 3px;
  background: rgb(10 30 44 / 0.7);
  color: rgb(166 222 248);
  font-size: clamp(0.75rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sale__pill {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2.4vw, 1.75rem);
  margin: 0;
  padding: 0.42rem clamp(1rem, 2.8vw, 1.75rem);
  border: 1.5px solid rgb(214 190 24);
  border-radius: 6px;
  background: rgb(78 74 4 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055), 0 0 34px -10px rgb(214 190 24 / 0.4);
  color: rgb(38 240 90);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sale__pill span {
  font-size: clamp(0.6875rem, 1.3vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.sale__total {
  margin: 0;
  font-size: clamp(3.25rem, 11vw, 8rem);
  font-weight: 800;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 6px 54px rgb(0 0 0 / 0.95), 0 0 120px rgb(255 170 40 / 0.25), 0 3px 6px rgb(0 0 0);
}

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

.sale__notes li {
  padding-left: var(--gap);
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
}

.control .facts-list {
  max-width: none;
}

.profile {
  min-width: 0;
  margin: 0;
}

.profile__card {
  display: grid;
  gap: var(--gap);
  padding-bottom: var(--gap);
  background: rgb(11 12 14);
  font-family: var(--type-heading);
}

.profile__card p {
  max-width: none;
  margin: 0;
}

.profile__top {
  border: 1px solid rgb(47 50 56);
  background: rgb(23 25 30);
}

.profile__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
  padding: var(--gap-wide) var(--gap);
}

.profile__av {
  display: grid;
  place-items: center;
  width: clamp(4rem, 9vw, 6rem);
  aspect-ratio: 1;
  border: 1px solid rgb(138 70 32);
  border-radius: 50%;
  background: rgb(98 42 16);
  color: rgb(255 201 74);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
}

.profile__team {
  color: rgb(255 201 74);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.profile__name {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.profile__note {
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.875rem;
}

.profile__totals,
.profile__records {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.profile__totals {
  grid-column: 1 / -1;
  gap: var(--gap);
}

.profile__records {
  border-top: 1px solid rgb(47 50 56);
}

.profile__records div {
  padding: 0.75rem var(--gap);
  border-left: 1px solid rgb(47 50 56);
}

.profile__records div:first-child {
  border-left: 0;
}

.profile__card dt {
  color: rgb(166 177 190);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile__card dd {
  margin: 0.15rem 0 0;
  color: rgb(255 201 74);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile__tabs {
  display: flex;
  gap: var(--gap-wide);
  margin: 0;
  padding: 0 var(--gap);
  overflow-x: auto;
  list-style: none;
  border-bottom: 1px solid rgb(38 41 46);
  scrollbar-width: none;
}

.profile__tabs li {
  flex: none;
  padding: 0.85rem 0;
  border-bottom: 2px solid transparent;
  color: rgb(166 177 190);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile__tabs .is-on {
  border-bottom-color: rgb(255 201 74);
  color: rgb(255 201 74);
}

.panel {
  display: grid;
  gap: var(--gap);
  align-content: start;
  padding: var(--gap);
  border-top: 2px solid rgb(46 112 156);
  background: rgb(27 29 34);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

.panel__title {
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
}

.panel__count {
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.8125rem;
}

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

.trophy {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--gap);
  min-height: 10.5rem;
  padding: var(--gap) var(--gap) 0;
  text-align: center;
}

.trophy--champion,
.trophy--top {
  --metal: rgb(255 201 74);
  border: 1px solid color-mix(in srgb, var(--metal) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 26%, rgb(27 29 34)) 0%, rgb(27 29 34) 100%);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.trophy--top {
  --metal: rgb(200 208 218);
}

.trophy__icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--metal);
}

.trophy__plate {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.6rem var(--gap) 0.9rem;
  border-top: 1px solid var(--metal);
  background: rgb(16 17 20 / 0.7);
}

.trophy__rank {
  color: var(--metal);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trophy__name {
  font-family: var(--type);
  font-weight: 600;
}

.trophy__meta {
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.8125rem;
}

.trophy--empty {
  place-content: center;
  border: 1px dashed rgb(74 78 86);
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.875rem;
}

.profile__lower {
  display: grid;
  gap: var(--gap);
}

.moment__day {
  display: flex;
  align-items: center;
  gap: var(--gap);
  color: rgb(128 140 153);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moment__day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(47 50 56);
}

.moment,
.bout {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: start;
}

.moment {
  padding-bottom: var(--gap);
}

.bout {
  padding: 0.85rem;
  border: 1px solid rgb(47 50 56);
  background: rgb(20 22 26);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.moment__icon {
  grid-row: span 2;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border: 1px solid rgb(46 112 156);
  color: rgb(126 205 240);
}

.moment__icon--gold {
  border-color: rgb(160 120 40);
  color: rgb(255 201 74);
}

.moment__icon--flame {
  border-color: rgb(140 110 200);
  color: rgb(200 173 255);
}

.moment__title {
  font-family: var(--type);
  font-weight: 600;
  line-height: 1.35;
}

.moment__when {
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.8125rem;
}

.moment__sub {
  grid-column: 2 / -1;
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 0.8125rem;
}

@media (min-width: 48rem) {
  .sale__notes {
    grid-template-columns: repeat(3, 1fr);
  }

  .profile__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: var(--gap-wide);
  }

  .profile__totals {
    grid-column: auto;
    grid-template-columns: repeat(3, auto);
    gap: var(--gap-wide);
  }

  .profile__records div {
    padding-inline: var(--gap-wide);
  }

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

  .profile__lower {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 48rem) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .control .facts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-wide);
  }
}

@media (min-width: 72rem) {
  .record {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
    column-gap: calc(var(--gap-wide) * 1.5);
  }

  .record__act {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  main > section.statement {
    grid-template-columns: 1.1fr 0.9fr;
    gap: calc(var(--gap-wide) * 2);
  }

  .rules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .battles .rules > div {
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    padding: var(--gap);
    border: 1px solid var(--line);
    border-right-width: 0;
  }

  .rules > div:last-child {
    border-right-width: 1px;
  }
}

main {
  flex: 1;
}

@media (min-width: 60rem) {
  .footer-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
}

.footer-legal {
  margin-inline: 0;
  max-width: none;
}

.service ul,
.faq-group ul {
  list-style: none;
  padding-left: 0;
}

.service ul > li {
  position: relative;
  padding-left: calc(var(--gap) * 1.9);
}

.service ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.7rem;
  height: 2px;
  background: var(--accent);
}

.faq-group {
  border-top: 1px solid var(--hairline);
}

.faq-group > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}

.faq-group .qa {
  padding-block: var(--gap);
  border-top: 1px solid var(--hairline);
  max-width: var(--narrow);
}

.faq-group .qa:first-of-type {
  border-top: 0;
}

.faq-group h3 {
  font-size: 1.375rem;
}

.faq-group .qa p {
  color: var(--ink-soft);
  margin: 0;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: var(--gap-wide) 0 0;
  padding: 0;
  list-style: none;
}

.legal__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.legal {
  display: grid;
  gap: var(--gap-wide);
}

nav.legal__toc {
  position: static;
  display: block;
  padding: 0 0 var(--gap-wide);
  background: none;
  border-bottom: 1px solid var(--hairline);
}

.legal > * {
  min-width: 0;
}

.legal__body {
  overflow-wrap: anywhere;
}

.footer-grid a,
.nap a,
.footer-legal a {
  color: var(--ink-soft);
  font-weight: 400;
}

.footer-grid a:hover,
.nap a:hover,
.footer-legal a:hover {
  color: var(--ink);
}

.facts th {
  white-space: nowrap;
}

.feature__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--gap);
  color: var(--accent);
}

.audience {
  border-top: 1px solid var(--hairline);
}

.choices {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.choices:hover {
  color: var(--ink);
}

.legal__toc ol {
  columns: 16rem 2;
  margin: 0;
  padding-left: calc(var(--gap) * 1.5);
  color: var(--ink-soft);
}

.legal__toc a,
.legal__body a {
  color: var(--accent);
}

.legal__toc h2 {
  font-size: 1.25rem;
}

.legal__body {
  max-width: 48rem;
}

.legal__body h2 {
  margin-top: var(--gap-wide);
  font-size: 1.5rem;
}

.legal__body h3,
.legal__body h4 {
  margin-top: var(--gap);
  font-size: 1.125rem;
}

.legal__body p,
.legal__body li {
  color: var(--ink-soft);
}

.legal__contact {
  padding: var(--gap);
  border-left: 2px solid var(--line);
  margin-bottom: var(--gap);
}

.legal__contact p {
  margin: 0;
}

.eyebrow {
  color: var(--ink-soft);
  font-family: var(--type-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

@media (max-width: 47.99rem) {
  body:not(:has(.callbar)) {
    --callbar: 0rem;
  }

  .facts,
  .facts tbody,
  .facts tr,
  .facts th,
  .facts td {
    display: block;
    width: auto;
  }

  .facts th {
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--ink-soft);
  }

  .facts td {
    overflow-wrap: anywhere;
  }

  .facts caption {
    display: block;
    padding: 0 0 var(--step);
  }
}

.chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.5rem;
  background: var(--chip, var(--gold));
  color: var(--accent-ink);
  clip-path: var(--shield);
  font-family: var(--type-heading);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}

.chip--2 {
  --chip: var(--silver);
}

.chip--3 {
  --chip: var(--bronze);
}

.chip--4 {
  --chip: var(--line);
  color: var(--ink);
}

.hero h1 {
  max-width: 22ch;
  font-weight: 600;
}

@media (max-width: 39.99rem) {
  .hero h1 {
    max-width: 17ch;
  }
}

.hero h1 .gold {
  color: var(--accent);
}

.hero .lede {
  max-width: 44ch;
}

.hero__board {
  margin: 0;
  order: 2;
}

.hero__say {
  order: 0;
}

.hero__act {
  order: 1;
}

.hero__cost {
  margin: var(--gap) 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.trust strong {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.problem .section-head {
  margin-bottom: 0;
}

.problem .section-head p {
  font-size: 1.1875rem;
  color: var(--ink);
}

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

.flow li {
  display: grid;
  align-content: start;
  gap: var(--step);
  padding: calc(var(--gap) * 1.5);
  border: 1px solid var(--line);
  border-top: 2px solid rgb(46 112 156);
  background: var(--paper-soft);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.flow .chip {
  margin-bottom: var(--step);
}

.flow h3 {
  margin: 0;
  font-size: 1.375rem;
}

.flow p {
  margin: 0;
  color: var(--ink-soft);
}

.how .actions {
  margin-top: var(--gap-wide);
}

main > section.statement {
  background: var(--paper);
  color: var(--ink);
  align-items: center;
}

.statement::before {
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 85%);
}

.statement__body .display {
  max-width: 20ch;
  margin: 0;
  font-family: var(--type-heading);
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.record {
  display: grid;
  gap: var(--gap-wide);
  align-items: start;
  border-top: 1px solid var(--hairline);
}

.record__facts {
  display: grid;
  gap: var(--gap);
  margin: 0;
}

.record__facts div {
  padding-left: var(--gap);
  border-left: 2px solid var(--accent);
}

.record__facts dt {
  font-family: var(--type-heading);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.record__facts dd {
  margin: 0;
  color: var(--ink-soft);
}

.record__act {
  margin: 0;
}

.audience-line {
  max-width: var(--narrow);
  margin: 0 0 var(--gap-wide);
  font-family: var(--type-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero__grid {
  row-gap: 3rem;
}

.hero__say h1 {
  margin-bottom: 0;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    row-gap: 3rem;
  }

  .hero__say {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .hero__act {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .hero__board {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.board {
  --board-line: color-mix(in srgb, var(--line) 70%, rgb(30 37 48));
  --board-dim: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --ember: rgb(255 122 47);
  --violet: rgb(200 173 255);
  --cyan: rgb(94 211 255);
  --board-gold: rgb(255 201 74);
  --board-gold-soft: rgb(255 230 163);
  width: 100%;
  border: 1px solid var(--board-line);
  background: linear-gradient(180deg, rgb(12 16 22) 0%, rgb(6 8 11) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055), 0 34px 80px -46px rgb(0 0 0);
  font-family: var(--type-heading);
}

.board__top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--board-line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent);
}

.board__team {
  margin: 0 auto 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.board__stat {
  margin: 0;
  text-align: right;
  line-height: 1.1;
}

.board__stat dt {
  color: var(--board-dim);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board__stat dd {
  margin: 2px 0 0;
  color: var(--board-gold);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.board__rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 4px 6px;
  list-style: none;
}

.row {
  --row-h: 32px;
  --edge-a: rgb(70 88 106);
  --edge-b: rgb(159 182 198);
  --edge-glow: rgb(122 205 240 / 0.1);
  --fire-inset: 7px;
  --clip: polygon(1.65% 5%, 99.25% 5%, 98.05% 93%, 0.35% 93%);
  position: relative;
  height: var(--row-h);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.5)) drop-shadow(0 0 6px var(--edge-glow));
}

.row__edge,
.row__face {
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
}

.row__edge {
  z-index: 0;
  background: linear-gradient(90deg, var(--edge-a), var(--edge-b) 18%, var(--edge-a) 39%, var(--edge-b) 66%, var(--edge-a));
  background-size: 220% 100%;
  opacity: 0.85;
}

.row__face {
  z-index: 1;
  inset: 1.5px;
  background:
    radial-gradient(ellipse at 18% 50%, rgb(96 127 141 / 0.09), transparent 38%),
    linear-gradient(90deg, rgb(31 39 45 / 0.97), rgb(16 22 27 / 0.99) 44%, rgb(13 18 22 / 0.99));
}

.row__face::after {
  content: "";
  position: absolute;
  left: 1%;
  right: 1%;
  top: 1px;
  height: 34%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent);
}

.row__content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: grid;
  grid-template-columns: 22px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0 max(0.6rem, 2.2%) 0 max(0.3rem, 1.9%);
}

.row__rank {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 19px;
  height: 21px;
  padding-bottom: 4px;
  background: linear-gradient(145deg, rgb(51 76 93) 0%, rgb(36 56 71) 45%, rgb(23 41 53) 100%);
  color: rgb(171 212 231);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
  clip-path: var(--shield);
}

.row__rank--crown {
  background: none;
  clip-path: none;
  padding: 0;
}

.row__crown {
  width: 19px;
  height: 19px;
  fill: var(--board-gold);
  filter: drop-shadow(0 0 7px rgb(255 201 74 / 0.7));
}

.row__av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(10 13 17), 0 0 0 3px var(--ring);
}

.row__id {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.row__total {
  color: var(--board-gold);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.streak {
  flex: none;
  padding: 0.1rem 0.34rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--type);
  font-size: 0.4375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.streak--double {
  color: var(--ember);
}

.streak--ultra {
  color: var(--board-gold);
}

.streak--monster {
  color: var(--violet);
}

.row--ultra::after,
.row--monster::after,
.row--double::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 1.5px;
  pointer-events: none;
  clip-path: var(--clip);
  background-size: 250% 100%;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
}

.row--ultra {
  --edge-glow: rgb(255 138 32 / 0.32);
  z-index: 3;
}

.row--ultra .row__edge {
  background: linear-gradient(90deg, rgb(255 138 32) 0%, rgb(255 210 122) 4%, rgb(221 92 11) 11%, rgb(255 158 43) 21%, rgb(189 65 5) 39%, rgb(255 140 31) 61%, rgb(217 83 8) 79%, rgb(255 175 53) 96%, rgb(191 67 6) 100%);
  background-size: 260% 100%;
  opacity: 0.9;
}

.row--ultra::after {
  background: linear-gradient(90deg, rgb(255 90 20), rgb(255 248 224) 17%, rgb(255 138 30) 34%, rgb(255 248 224) 53%, rgb(255 60 5) 74%, rgb(255 195 98) 91%, rgb(255 90 20));
  filter: drop-shadow(0 0 3px rgb(255 112 16 / 0.85));
}

.row--ultra .row__face {
  background:
    radial-gradient(ellipse at 5% 50%, rgb(255 106 15 / 0.14), transparent 30%),
    linear-gradient(90deg, rgb(32 36 42), rgb(19 25 30) 40%, rgb(17 22 27));
}

.row--monster {
  --edge-glow: rgb(90 215 255 / 0.36);
  z-index: 4;
}

.row--monster .row__edge {
  background: linear-gradient(90deg, rgb(26 99 128) 0%, rgb(126 205 227) 6%, rgb(24 81 107) 18%, rgb(77 152 176) 30%, rgb(23 76 100) 47%, rgb(154 217 232) 58%, rgb(51 127 153) 75%, rgb(105 175 194) 90%, rgb(22 75 99) 100%);
  background-size: 280% 100%;
  opacity: 0.9;
}

.row--monster::after {
  background: linear-gradient(90deg, rgb(59 215 255), rgb(255 255 255) 12%, rgb(126 232 255) 26%, rgb(255 255 255) 44%, rgb(46 168 255) 62%, rgb(234 252 255) 80%, rgb(59 215 255));
  filter: drop-shadow(0 0 2px rgb(235 253 255 / 0.95)) drop-shadow(0 0 5px rgb(60 200 255 / 0.7));
}

.row--monster .row__face {
  background:
    radial-gradient(ellipse at 58% 50%, rgb(0 173 255 / 0.13), transparent 36%),
    linear-gradient(90deg, rgb(30 43 52), rgb(17 28 35) 42%, rgb(12 21 26));
}

.row__volt {
  position: absolute;
  z-index: 4;
  left: 6%;
  right: 4%;
  top: 8%;
  width: 88%;
  height: 84%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgb(231 253 255 / 0.96)) drop-shadow(0 0 5px rgb(80 211 255 / 0.9));
}

.bolt {
  fill: none;
  stroke: rgb(159 233 255);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.bolt--2 {
  opacity: 0.7;
  stroke: rgb(255 255 255);
}

.bolt--3 {
  opacity: 0.5;
}

.row--double {
  --edge-glow: rgb(226 244 252 / 0.1);
}

.row--double .row__edge {
  background: linear-gradient(102deg, rgb(119 129 136) 0%, rgb(174 185 191) 21%, rgb(245 251 255) 28%, rgb(138 149 155) 35%, rgb(104 115 122) 58%, rgb(223 233 238) 72%, rgb(124 135 141) 100%);
  background-size: 260% 100%;
  opacity: 0.7;
}

.row--double::after {
  background: linear-gradient(102deg, rgb(141 151 158), rgb(245 251 255) 26%, rgb(124 135 141) 52%, rgb(230 240 245) 78%, rgb(141 151 158));
  filter: drop-shadow(0 0 2px rgb(226 244 252 / 0.35));
  opacity: 0.75;
}

.row__fire,
.row__plasma {
  position: absolute;
  z-index: 4;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  pointer-events: none;
  mix-blend-mode: screen;
}

.row__fire {
  filter: drop-shadow(0 0 1px rgb(255 246 204 / 0.58)) drop-shadow(0 0 2px rgb(255 103 12 / 0.4));
}

.row__plasma {
  filter: drop-shadow(0 0 0.6px rgb(239 253 255 / 0.9)) drop-shadow(0 0 1.4px rgb(59 215 255 / 0.62));
}

.row--ultra.has-fire::after,
.row--monster.has-plasma::after,
.row--monster.has-plasma .row__volt {
  opacity: 0;
}

.row--lead {
  --edge-glow: rgb(255 201 74 / 0.34);
  z-index: 6;
}

.row--lead .row__face {
  background:
    radial-gradient(ellipse at 4% 50%, rgb(255 201 74 / 0.2), transparent 34%),
    linear-gradient(90deg, rgb(48 39 18 / 0.98), rgb(20 18 12 / 0.99) 46%, rgb(14 14 12 / 0.99));
}

.row--lead .row__name {
  color: var(--board-gold-soft);
}

.board__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  max-width: none;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--board-line);
  color: var(--board-dim);
  font-family: var(--type);
  font-size: 0.75rem;
}

.board__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.board__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgb(255 122 47 / 0.12), 0 0 10px rgb(255 122 47 / 0.9);
}

@media (prefers-reduced-motion: no-preference) {
  .row--ultra .row__edge,
  .row--ultra::after {
    animation: edge-flow 2.15s linear infinite;
  }

  .row--monster .row__edge {
    animation: edge-flow 2.3s linear infinite;
  }

  .row--monster::after {
    animation: edge-flow 1.75s linear infinite;
  }

  .row--double .row__edge,
  .row--double::after {
    animation: edge-flow 7.6s linear infinite;
  }

  .bolt {
    animation: bolt-fire 3.05s ease-in-out infinite;
  }

  .bolt--2 {
    animation-delay: 0.12s;
  }

  .bolt--3 {
    animation-delay: 0.22s;
  }

  .row--monster:nth-of-type(6) .bolt {
    animation-delay: 1.1s;
  }

  .row--monster:nth-of-type(6) .bolt--2 {
    animation-delay: 1.22s;
  }

  .row--monster:nth-of-type(6) .bolt--3 {
    animation-delay: 1.32s;
  }

  .board__dot {
    animation: pulse 2.2s ease-in-out infinite;
  }
}

@keyframes edge-flow {
  to {
    background-position: -260% 0;
  }
}

@keyframes bolt-fire {
  0%,
  61% {
    stroke-dashoffset: 620;
    opacity: 0;
  }

  63% {
    opacity: 1;
  }

  72% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  77% {
    opacity: 0.15;
  }

  80%,
  100% {
    stroke-dashoffset: -240;
    opacity: 0;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (max-width: 39.99rem) {
  .hero .board__rows .row:nth-child(n + 11) {
    display: none;
  }
}

@media (min-width: 40rem) {
  .row {
    --row-h: 38px;
  }

  .row__content {
    grid-template-columns: 30px 32px minmax(0, 1fr) auto;
    padding: 0 max(0.85rem, 2.2%) 0 max(0.4rem, 1.9%);
  }

  .row__av {
    width: 32px;
    height: 32px;
  }

  .row__name,
  .row__total {
    font-size: 0.875rem;
  }

  .row__rank {
    width: 24px;
    height: 27px;
    font-size: 0.75rem;
  }

  .row__crown {
    width: 24px;
    height: 24px;
  }
}

.how {
  border-top: 1px solid var(--hairline);
}

.steps li::before {
  content: none;
}

.steps li {
  border-top-color: var(--hairline);
}

.steps .chip {
  margin-bottom: var(--gap);
}

.steps p {
  color: var(--ink);
  font-size: 1.125rem;
}

.battles {
  background: var(--paper-soft);
  border-block: 1px solid var(--hairline);
}

.battles__body {
  display: grid;
  gap: var(--gap-wide);
}

.rules {
  display: grid;
  margin: 0;
}

.rules > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--gap);
  align-items: baseline;
  padding: var(--gap) 0;
  border-top: 1px solid var(--line);
}

.rules dt {
  font-family: var(--type-heading);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rules dd {
  margin: 0;
  color: var(--ink-soft);
}

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

.facts-list li {
  padding-left: var(--gap);
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
}

.facts-list strong {
  display: block;
  color: var(--ink);
  font-family: var(--type-heading);
  font-size: 1.125rem;
  text-transform: uppercase;
}

.questions > p a,
.identity a,
.service a:not(.action) {
  color: var(--accent);
}

.who-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.who-list li {
  display: grid;
  gap: var(--step);
  padding: var(--gap) 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
}

.who-list strong {
  color: var(--ink);
  font-family: var(--type-heading);
  font-size: 1.25rem;
  text-transform: uppercase;
}

.questions {
  background: var(--sunken);
}

.answers p {
  max-width: 65ch;
}

.band,
main > section.next {
  text-align: left;
}

.band p,
.next p,
.band .leaves {
  margin-inline: 0;
}

.band .actions,
.next .actions {
  justify-content: flex-start;
}

.questions > p {
  margin-top: var(--gap);
}

.leaves {
  font-size: 0.875rem;
  color: var(--band-ink-soft);
}


.band .leaves {
  margin-top: var(--gap);
}

.about-open .chip {
  margin-bottom: var(--gap);
}

.intro a {
  color: var(--accent);
}

.facts th {
  width: 10rem;
}

.service .chip {
  margin-bottom: var(--gap);
}

@media (min-width: 48rem) {
  .who-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-wide);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pricing-offers {
  display: flex;
  flex-direction: column;
}

.pricing-offers .founder-band {
  order: -1;
}

.pricing-offers > section {
  padding: var(--run) var(--gutter);
}

.plans-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tier-ambient: rgb(214 220 226 / 0.14);
  --tier-lines: rgb(214 220 226 / 0.08);
}

.plans-band:has(.plan[data-tier="starter"]:hover),
.plans-band:has(.plan[data-tier="starter"]:focus-within) {
  --tier-ambient: rgb(205 138 78 / 0.2);
  --tier-lines: rgb(205 138 78 / 0.09);
}

.plans-band:has(.plan[data-tier="growth"]:hover),
.plans-band:has(.plan[data-tier="growth"]:focus-within) {
  --tier-ambient: rgb(214 220 226 / 0.2);
  --tier-lines: rgb(214 220 226 / 0.1);
}

.plans-band:has(.plan[data-tier="scale"]:hover),
.plans-band:has(.plan[data-tier="scale"]:focus-within) {
  --tier-ambient: rgb(242 193 78 / 0.22);
  --tier-lines: rgb(242 193 78 / 0.11);
}

.plans-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 34%, var(--tier-ambient), transparent 32rem),
    linear-gradient(var(--tier-lines) 1px, transparent 1px),
    linear-gradient(90deg, var(--tier-lines) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  transition: background 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.plans__head {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.plans__head p {
  margin-inline: auto;
  color: var(--ink-soft);
}

.plans {
  display: grid;
  gap: 1.5rem;
  max-width: 32rem;
  margin-inline: auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  padding: 2rem;
  border: 1px solid rgb(61 64 72);
  background: linear-gradient(160deg, rgb(35 35 42 / 0.96), rgb(14 14 18 / 0.98));
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.plan p {
  max-width: none;
  margin: 0;
}

.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 2px;
  background: var(--plan-metal, rgb(87 91 100));
}

.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--plan-wash, transparent), transparent 62%);
  transition: opacity 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.plan:hover,
.plan:focus-within {
  border-color: var(--plan-metal);
  box-shadow: 0 32px 64px -28px rgb(0 0 0 / 0.9), 0 0 0 1px var(--plan-metal-dim), 0 26px 72px -30px var(--plan-metal-dim);
}

.plan:hover::after,
.plan:focus-within::after,
.plan[data-selected="true"]::after {
  opacity: 1;
}

.plan--tier-starter {
  --plan-metal: var(--bronze);
  --plan-metal-dim: rgb(205 138 78 / 0.45);
  --plan-wash: rgb(205 138 78 / 0.1);
}

.plan--tier-growth {
  --plan-metal: rgb(214 220 226);
  --plan-metal-dim: rgb(214 220 226 / 0.45);
  --plan-wash: rgb(214 220 226 / 0.13);
}

.plan--tier-scale {
  --plan-metal: var(--accent);
  --plan-metal-dim: rgb(242 193 78 / 0.52);
  --plan-wash: rgb(242 193 78 / 0.16);
}

.plan[data-selected="true"] {
  border-color: var(--plan-metal, rgb(87 91 100));
  box-shadow: 0 32px 64px -28px rgb(0 0 0 / 0.9), 0 0 0 1px var(--plan-metal-dim, transparent), 0 18px 60px -30px var(--plan-metal-dim, transparent);
}

.plan__sweep {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.plan__sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-140%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.15) 35%, rgb(255 255 255 / 0.9) 50%, rgb(255 255 255 / 0.15) 65%, transparent);
}

.plan__badge-row {
  display: flex;
  min-height: 26px;
  margin-bottom: 1rem !important;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid rgb(242 193 78 / 0.45);
  background: rgb(242 193 78 / 0.1);
  color: var(--accent);
  font-family: var(--type-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__name {
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
}

.plan__for {
  min-height: 3.2em;
  color: var(--ink-soft);
}

.plan__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(61 64 72);
}

.plan__price {
  font-family: var(--type-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.plan__per {
  color: rgb(136 143 152);
  font-family: var(--type-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan__activation {
  margin-top: 0.5rem !important;
  color: rgb(214 220 226);
  font-family: var(--type-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan__features {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.plan__features li {
  position: relative;
  padding-left: 1.5rem;
}

.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: rgb(45 111 150);
  transform: rotate(45deg);
}

.plan__capacity {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid rgb(61 64 72);
  background: rgb(8 9 11 / 0.45);
}

.plan__cap-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.plan__cap-row span:first-child {
  min-width: 0;
  color: var(--ink-soft);
}

.plan__cap-value {
  flex: none;
  color: rgb(214 220 226);
  font-family: var(--type-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.plan__tone {
  color: var(--ink-soft);
}

.plan__cta {
  margin-top: auto;
  padding-top: 1.5rem;
}

.plan__cta .action,
.founder-card__cta .action {
  width: 100%;
}

.founder-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(9 10 13) 0%, rgb(17 16 22) 52%, rgb(8 9 11) 100%);
}

.founder-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.founder-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1rem, 3.5vw, 2.75rem);
  border: 1px solid rgb(154 214 255 / 0.28);
  background:
    radial-gradient(ellipse 90% 70% at 22% 18%, rgb(126 202 255 / 0.13), transparent 70%),
    radial-gradient(ellipse 70% 60% at 82% 90%, rgb(242 193 78 / 0.09), transparent 72%),
    linear-gradient(155deg, rgb(20 21 27), rgb(8 8 11) 62%);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.founder-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, rgb(126 202 255 / 0.2), rgb(207 231 255) 45%, rgb(242 193 78 / 0.85));
}

.founder-stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg, rgb(206 234 255 / 0.055) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(-60deg, rgb(206 234 255 / 0.04) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(60deg, rgb(242 193 78 / 0.035) 0 1px, transparent 1px 152px);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 74%);
  mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 74%);
}

.founder-stage__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.founder-stage__offer {
  min-width: 0;
}

.founder-stage__offer h1 {
  margin: 0.75rem 0 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.founder-stage__offer p {
  max-width: none;
}

.founder-badge {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(72vw, 16rem);
  margin-inline: auto;
  aspect-ratio: 1;
}

.founder-badge__art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 0 18px rgb(126 202 255 / 0.24)) drop-shadow(0 14px 38px rgb(0 0 0 / 0.7));
  transition: filter 420ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder-badge__shimmer {
  position: absolute;
  inset: 6%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgb(206 234 255 / 0.3) 26deg, rgb(242 193 78 / 0.34) 52deg, transparent 96deg, transparent 360deg);
  filter: blur(14px);
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder-badge__sparkles {
  position: absolute;
  inset: -6%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder-badge__sparkles::before,
.founder-badge__sparkles::after {
  content: "";
  position: absolute;
  inset: 0;
}

.founder-badge__sparkles::before {
  background-image:
    radial-gradient(circle 2.5px at 18% 26%, rgb(255 255 255 / 0.95), transparent 100%),
    radial-gradient(circle 2px at 78% 20%, rgb(255 246 214 / 0.9), transparent 100%),
    radial-gradient(circle 3px at 88% 58%, rgb(255 255 255 / 0.85), transparent 100%),
    radial-gradient(circle 2px at 62% 88%, rgb(206 234 255 / 0.9), transparent 100%),
    radial-gradient(circle 2.5px at 22% 76%, rgb(255 246 214 / 0.85), transparent 100%),
    radial-gradient(circle 2px at 8% 50%, rgb(255 255 255 / 0.8), transparent 100%),
    radial-gradient(circle 1.5px at 46% 12%, rgb(255 255 255 / 0.75), transparent 100%),
    radial-gradient(circle 2px at 94% 34%, rgb(242 193 78 / 0.85), transparent 100%);
}

.founder-badge__sparkles::after {
  background-image:
    radial-gradient(circle 2px at 34% 44%, rgb(255 255 255 / 0.8), transparent 100%),
    radial-gradient(circle 1.5px at 68% 62%, rgb(206 234 255 / 0.85), transparent 100%),
    radial-gradient(circle 2.5px at 12% 66%, rgb(255 246 214 / 0.8), transparent 100%),
    radial-gradient(circle 2px at 84% 78%, rgb(255 255 255 / 0.75), transparent 100%),
    radial-gradient(circle 1.5px at 52% 32%, rgb(242 193 78 / 0.8), transparent 100%),
    radial-gradient(circle 2px at 4% 34%, rgb(206 234 255 / 0.75), transparent 100%),
    radial-gradient(circle 2.5px at 72% 6%, rgb(255 255 255 / 0.7), transparent 100%),
    radial-gradient(circle 2px at 38% 94%, rgb(255 246 214 / 0.8), transparent 100%);
}

.founder-badge__tip-sparkles {
  position: absolute;
  inset: -5%;
  z-index: 4;
  opacity: 0.42;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder-badge__tip-sparkles::before,
.founder-badge__tip-sparkles::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  filter: drop-shadow(0 0 5px rgb(206 234 255 / 0.82));
}

.founder-badge__tip-sparkles::before {
  background-image:
    radial-gradient(circle 4px at 4% 25%, white 0 18%, rgb(206 234 255 / 0.8) 20% 38%, transparent 70%),
    radial-gradient(circle 3px at 8% 42%, white 0 18%, rgb(242 193 78 / 0.72) 20% 38%, transparent 70%),
    radial-gradient(circle 4px at 96% 25%, white 0 18%, rgb(206 234 255 / 0.8) 20% 38%, transparent 70%),
    radial-gradient(circle 3px at 92% 42%, white 0 18%, rgb(242 193 78 / 0.72) 20% 38%, transparent 70%);
}

.founder-badge__tip-sparkles::after {
  background-image:
    radial-gradient(circle 3px at 11% 57%, white 0 18%, rgb(126 202 255 / 0.78) 20% 38%, transparent 70%),
    radial-gradient(circle 3px at 89% 57%, white 0 18%, rgb(126 202 255 / 0.78) 20% 38%, transparent 70%);
}

.founder-stage:hover .founder-badge__shimmer,
.founder-stage:hover .founder-badge__sparkles,
.founder-stage:hover .founder-badge__tip-sparkles,
.founder-stage:focus-within .founder-badge__shimmer,
.founder-stage:focus-within .founder-badge__sparkles,
.founder-stage:focus-within .founder-badge__tip-sparkles {
  opacity: 1;
}

.founder-stage:hover .founder-badge__art,
.founder-stage:focus-within .founder-badge__art {
  filter: drop-shadow(0 0 26px rgb(126 202 255 / 0.42)) drop-shadow(0 0 60px rgb(242 193 78 / 0.22)) drop-shadow(0 14px 38px rgb(0 0 0 / 0.7));
}

.founder__limit {
  margin-top: 1rem !important;
  color: var(--accent);
  font-family: var(--type-heading);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.founder__intro {
  max-width: 36rem !important;
  margin-top: 1rem;
  color: var(--ink-soft);
}

.plan.plan--stage {
  --plan-metal: rgb(233 238 244);
  --plan-metal-dim: rgb(233 238 244 / 0.5);
  --plan-wash: rgb(200 224 245 / 0.14);
  --founder-fx-inset: 20px;
  margin-top: 2rem;
  padding: 0;
  border-color: rgb(233 238 244 / 0.42);
  overflow: clip;
  overflow-clip-margin: var(--founder-fx-inset);
}

.plan.plan--stage::after {
  opacity: 0.34;
  background: radial-gradient(circle at 50% 0%, rgb(206 234 255 / 0.17), rgb(242 193 78 / 0.09) 38%, transparent 72%);
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.plan.plan--stage:hover::after,
.plan.plan--stage:focus-within::after {
  opacity: 1;
}

.founder-card__body {
  position: relative;
  z-index: 4;
  padding: 2rem;
}

.founder-card__head .plan__name {
  margin: 0;
}

.founder__terms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  margin: 1.5rem 0 0;
  padding: 0.3125rem;
  border: 1px solid rgb(61 64 72);
  background: var(--paper-soft);
}

.founder__term-btn {
  padding: 0.5rem 1.125rem;
  color: var(--ink-soft);
  font-family: var(--type-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder__term-btn:hover {
  color: var(--ink);
}

#fnd-6:checked ~ .founder-band__inner label[for="fnd-6"],
#fnd-12:checked ~ .founder-band__inner label[for="fnd-12"] {
  background: rgb(38 39 47);
  color: var(--ink);
}

#fnd-6:focus-visible ~ .founder-band__inner label[for="fnd-6"],
#fnd-12:focus-visible ~ .founder-band__inner label[for="fnd-12"] {
  outline: 2px solid rgb(94 200 255);
  outline-offset: 2px;
}

.founder__term-body {
  display: none;
}

#fnd-6:checked ~ .founder-band__inner .founder__term-body--6,
#fnd-12:checked ~ .founder-band__inner .founder__term-body--12 {
  display: block;
}

.plan--stage .plan__price-row {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}

.founder__monthly {
  margin-top: 0.65rem !important;
  color: rgb(214 220 226);
  font-family: var(--type-heading);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.founder__monthly span {
  display: block;
  margin-top: 0.5rem;
  color: var(--accent);
}

.founder__discount {
  position: absolute !important;
  top: 1rem;
  right: 1rem;
  z-index: 7 !important;
  max-width: 8.5rem;
  overflow: hidden;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgb(242 193 78 / 0.7);
  background: linear-gradient(110deg, rgb(73 49 9 / 0.92), rgb(242 193 78 / 0.22));
  color: rgb(255 224 138);
  font-family: var(--type-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(2deg);
  box-shadow: 0 0 26px rgb(242 193 78 / 0.2);
}

.founder__discount::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.75), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

.founder-capacity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.875rem;
  border: 1px solid rgb(61 64 72);
  background: rgb(8 9 11 / 0.45);
}

.founder-capacity div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.founder-capacity span {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.founder-capacity strong {
  color: rgb(214 220 226);
  font-family: var(--type-heading);
  letter-spacing: 0.06em;
}

.founder-card__cta {
  margin-top: 1.5rem;
}

.founder__legal {
  max-width: 36rem !important;
  margin-top: 1.5rem;
  color: rgb(136 143 152);
  font-size: 0.75rem;
  line-height: 1.65;
}

.founder__legal a {
  color: var(--accent);
}

.founder__comparison {
  margin-top: 0.75rem;
  color: rgb(136 143 152);
  font-size: 0.75rem;
  line-height: 1.5;
}

.founder-fx,
.founder-edge {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.founder-fx {
  top: calc(var(--founder-fx-inset) * -1);
  left: calc(var(--founder-fx-inset) * -1);
  width: calc(100% + var(--founder-fx-inset) * 2);
  height: calc(100% + var(--founder-fx-inset) * 2);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.founder-fx[data-live="true"] {
  opacity: 1;
}

.founder-edge {
  inset: 0;
  padding: 2px;
  background: linear-gradient(135deg, rgb(250 201 87), rgb(255 153 56) 40%, rgb(240 92 143) 55%, rgb(154 107 234) 70%, rgb(117 199 248) 85%, rgb(250 201 87)) border-box;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
  box-shadow: 0 0 30px rgb(242 193 78 / 0.2);
}

.founder-edge[data-live="true"] {
  opacity: 0;
}

.compare-band {
  border-top: 1px solid var(--hairline);
}

.compare-band .section-head a,
.compare__more a,
.faq__answer a {
  color: var(--accent);
}

.compare {
  width: 100%;
  border: 0;
  background: none;
  border-collapse: collapse;
}

.compare caption {
  margin-bottom: 1rem;
  color: rgb(136 143 152);
}

.compare th,
.compare td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(61 64 72 / 0.5);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  background: none;
  border-bottom: 1px solid rgb(61 64 72);
  color: rgb(214 220 226);
  font-family: var(--type-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compare thead th:not(:first-child),
.compare td:not(:first-child) {
  text-align: center;
}

.compare tbody th {
  color: var(--ink-soft);
  font-weight: 400;
}

.compare__group th {
  padding-top: 2rem;
  border-bottom-color: rgb(61 64 72);
  color: rgb(94 200 255);
  font-family: var(--type-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare .yes {
  color: var(--accent);
  font-size: 1.125rem;
  line-height: 1;
}

.compare td.val {
  color: rgb(214 220 226);
  font-variant-numeric: tabular-nums;
}

.compare__more {
  margin-top: 2rem;
  color: var(--ink-soft);
}

.pricing-faq {
  background: var(--sunken);
}

.faq {
  display: grid;
  max-width: 54rem;
  border-top: 1px solid rgb(61 64 72);
}

.faq details {
  border-bottom: 1px solid rgb(61 64 72);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 0;
  font-family: var(--type-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid rgb(94 200 255);
  border-bottom: 2px solid rgb(94 200 255);
  transform: rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.faq details[open] summary::after {
  transform: rotate(225deg);
}

.faq summary:hover {
  color: rgb(159 224 255);
}

.faq__answer {
  padding: 0 0 1.5rem;
}

.faq__answer p {
  color: var(--ink-soft);
}

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, rgb(19 20 25 / 0) 0%, rgb(19 20 25 / 0.68) 24%, rgb(19 20 25 / 0.68) 76%, rgb(19 20 25 / 0) 100%);
}

.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(61 64 72) 24%, rgb(61 64 72) 76%, transparent);
}

.cta-band::before {
  top: 0;
}

.cta-band::after {
  bottom: 0;
}

.cta-band h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.cta-band p {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--ink-soft);
}

.cta-band .actions {
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .plan:hover,
  .plan:focus-within {
    transform: translateY(-7px) scale(1.012);
  }

  .plan.plan--stage:hover,
  .plan.plan--stage:focus-within {
    transform: none;
  }

  .plan:hover .plan__sweep::before,
  .plan:focus-within .plan__sweep::before {
    animation: plan-sweep 2.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }

  .plan--tier-scale .plan__sweep::before {
    animation: plan-sweep 7s cubic-bezier(0.2, 0.7, 0.3, 1) 1.5s infinite;
  }

  .founder__discount::after {
    animation: founder-shimmer 4.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }

  .founder-stage::after {
    animation: founder-stage-drift 64s linear infinite;
  }

  .founder-badge__shimmer {
    animation: founder-badge-idle-shimmer 14s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }

  .founder-badge__tip-sparkles::before {
    animation: founder-badge-tip-glint 8.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }

  .founder-badge__tip-sparkles::after {
    animation: founder-badge-tip-glint 11.3s cubic-bezier(0.2, 0.7, 0.3, 1) -3.4s infinite;
  }

  .founder-stage:hover .founder-badge__art,
  .founder-stage:focus-within .founder-badge__art {
    transform: translateY(-6px) scale(1.02);
  }

  .founder-stage:hover .founder-badge__shimmer,
  .founder-stage:focus-within .founder-badge__shimmer {
    animation: founder-badge-shimmer 5.2s linear infinite;
  }

  .founder-stage:hover .founder-badge__sparkles::before,
  .founder-stage:focus-within .founder-badge__sparkles::before {
    animation: founder-badge-twinkle 3.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }

  .founder-stage:hover .founder-badge__sparkles::after,
  .founder-stage:focus-within .founder-badge__sparkles::after {
    animation: founder-badge-twinkle 5.1s cubic-bezier(0.2, 0.7, 0.3, 1) -1.7s infinite;
  }
}

@keyframes plan-sweep {
  0% {
    transform: translateX(-140%);
  }

  26%,
  100% {
    transform: translateX(140%);
  }
}

@keyframes founder-shimmer {
  0%,
  72% {
    transform: translateX(-140%) skewX(-18deg);
  }

  86%,
  100% {
    transform: translateX(140%) skewX(-18deg);
  }
}

@keyframes founder-stage-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(58px, 100px, 0);
  }
}

@keyframes founder-badge-shimmer {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes founder-badge-twinkle {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes founder-badge-idle-shimmer {
  0%,
  64%,
  100% {
    opacity: 0.08;
    transform: rotate(0deg);
  }

  73% {
    opacity: 0.58;
  }

  88% {
    opacity: 0.08;
    transform: rotate(360deg);
  }
}

@keyframes founder-badge-tip-glint {
  0%,
  68%,
  100% {
    opacity: 0.18;
  }

  74% {
    opacity: 0.92;
  }

  82% {
    opacity: 0.26;
  }
}

@media (max-width: 47.99rem) {
  .compare thead {
    display: none;
  }

  .compare,
  .compare caption,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: 100%;
  }

  .compare tbody tr {
    margin-bottom: 1.5rem;
    border: 1px solid rgb(61 64 72);
    background: rgb(27 28 34);
  }

  .compare tbody th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(61 64 72);
    background: var(--paper-soft);
    color: rgb(214 220 226);
    font-weight: 600;
  }

  .compare tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left !important;
    border-bottom: 1px solid rgb(61 64 72 / 0.4);
  }

  .compare tbody td:last-child {
    border-bottom: 0;
  }

  .compare tbody td::before {
    content: attr(data-plan);
    color: rgb(136 143 152);
    font-family: var(--type-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .compare .compare__group {
    margin-bottom: 0;
    border: 0;
    background: none;
  }

  .compare .compare__group th {
    padding: 1.5rem 0 0.5rem;
    border: 0;
    background: none;
  }
}

@media (min-width: 40rem) {
  .founder-capacity {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .founder-badge {
    width: min(100%, 22rem);
  }

  .founder__monthly span {
    display: inline;
    margin: 0 0 0 0.75rem;
  }
}

@media (min-width: 64rem) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .founder-stage__grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}