/* =====================================================================
   THE WAITLIST PAGES WITH THE DESIGN KIT
   The kit (design-system.css) fitted to the waitlist pages' own markup and layout: the announcement bar, the bar and
   its links, the buttons, the stats strip, the account picker, the footer and the information pages. Loaded on every
   page of the waitlist site, after styles.css and the kit; every rule goes through body.ds-root, which only those
   pages' bodies carry (a few first ask whether the kit's script runs, .ds-anim on the root), so nothing here reaches
   the launch site's pages, the admin or the terminal.
   ===================================================================== */

/* ---------- The page's width and rhythm ----------
   Wider than the site's other pages, so the product's screens and the sections' rows reach toward the screen's edges,
   with one gutter all the way down: 20px on a phone, 24px from 640px, 32px from 1000px, 48px from 1280px. Sections
   sit closer together (112px between two on a desktop, 72px on a phone), and their headings are larger; the hero's
   foot is shorter on the wider screens, its strip being its last line. */
body.ds-root {
  --page-max: 1480px;
  --section-y: clamp(36px, 4vw, 56px);
}
@media (min-width: 992px) { body.ds-root .hero { padding-bottom: 40px; } }
@media (min-width: 640px) { body.ds-root { --gutter: 24px; } }
@media (min-width: 1000px) { body.ds-root { --gutter: 32px; } }
@media (min-width: 1280px) { body.ds-root { --gutter: 48px; } }
body.ds-root .sec-head { margin-bottom: clamp(28px, 3.6vw, 44px); }
body.ds-root .sec-head .pill { margin-bottom: 16px; }
body.ds-root .sec-lede { margin-top: 14px; }
body.ds-root .section h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.02; }
/* The community card's words get the room for its heading on two lines; the closing panel sits tighter round its form. */
@media (min-width: 760px) { body.ds-root .dc-text { max-width: 700px; padding: clamp(28px, 4.4vw, 60px); } }
body.ds-root .final-inner { max-width: 780px; padding-block: clamp(44px, 6vw, 84px); }

/* ---------- Surfaces and accents ----------
   One step of light between the page, its panels and the wells inside them: the kit's card surface takes its raised
   shade, its hairlines are a little brighter and the lip along each top edge shows, while the wells keep the kit's
   inset, so each layer reads apart from the next. The steps' marks take the kit's brighter violet (dark numerals on
   the light face), the questions' toggles brighten, and buttons side by side stand the same height. */
body.ds-root {
  --ds-card: var(--ds-raised);
  --ds-line: rgba(255, 255, 255, 0.1);
  --ds-line-2: rgba(255, 255, 255, 0.15);
  --ds-lip: 0 1px 0 rgba(221, 216, 234, 0.07);
}

body.ds-root .ds-panel {
  box-shadow: inset var(--ds-lip), 0 30px 60px -36px rgba(0, 0, 0, 0.85);
}

body.ds-root .hw-mark {
  border-color: var(--ds-g2);
  background-color: var(--ds-green);
  color: var(--ds-ink);
  font-weight: 700;
  box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.16), 0 0 24px rgba(167, 139, 250, 0.3);
}

body.ds-root .hw-line::after {
  background: var(--ds-green);
}

body.ds-root .qa-icon {
  border-color: var(--ds-line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-white);
}

body.ds-root .faq-head .ds-btn-outline {
  margin-top: 24px;
}

body.ds-root .dc-actions {
  align-items: center;
}

/* The community's two buttons, one size and one shape: the Discord as the page's primary button (the hero form's fill,
   label and focus ring), X as its outline one. Pressed, the primary darkens to the kit's violet and loses its glow, as
   the support chat's buttons do (the link's tag outranks the kit's hover); on a phone both buttons take the row's
   width. */
body.ds-root .dc-actions :is(.ds-btn-form, .ds-btn-outline) {
  height: 51px;
  padding: 0 26px;
  font-size: 17px;
}

body.ds-root .dc-actions a.ds-btn-form:active {
  background: var(--ds-g1);
  box-shadow: none;
  transition-duration: 0.1s;
}

@media (max-width: 479px) {
  body.ds-root .dc-actions :is(.ds-btn-form, .ds-btn-outline) {
    flex: 1 1 100%;
  }
}

/* ---------- Headings split into words (data-ds-split) ----------
   The kit shows a heading's words once any block round it has come in; inside such a block (data-ds-reveal), the
   heading still waits for its own turn, so its words do not come in and go again. */
.ds-anim body.ds-root [data-ds-split]:not(.is-in) .ds-wi {
  translate: 0 110%;
}

/* ---------- Announcement bar (.ds-promo) ----------
   The kit's bar as the kit draws it, in the page's purple: its dark surface and line, its 13px capitals at 600 with
   its spacing, the offer in its gradient, the code on its dashed chip with its shine and its icon, then the divider and
   the countdown in white figures. The page's own parts stay (the code's "Copied", the launch date before the script
   counts, the clock's fixed width) and so do its heights (--promo-h), so the bar under it never moves; on a phone the
   offer and its code sit over the countdown, which the kit would hide. */
body.ds-root .ds-promo {
  background: var(--ds-bg-alt);
  border-bottom: 1px solid var(--ds-line);
}

body.ds-root .ds-promo__inner {
  gap: 12px;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ds-white);
}

/* The sentence, the chip and the countdown take the bar's type, as in the kit. */
body.ds-root .ds-promo__inner .promo-text,
body.ds-root .ds-promo__timer,
body.ds-root .ds-promo__timer :is(.promo-date, .promo-ended, .ds-n) {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

body.ds-root .ds-promo .ds-promo__chip {
  height: 26px;
  padding: 0 10px;
  border: 1px dashed rgba(167, 139, 250, 0.45);
  border-radius: 6px;
  background: rgba(167, 139, 250, 0.08);
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: inherit;
}

body.ds-root .ds-promo__chip .promo-code-ic {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: var(--ds-green);
}

/* "Copied" flashes in the code's place, in the same gradient (the kit's chip says COPIED). */
body.ds-root .ds-promo__chip .promo-code-done {
  color: transparent;
}

body.ds-root .ds-promo__divider {
  width: 1px;
  height: 16px;
  background: var(--ds-line-2);
}

/* The countdown: the kit's white tabular figures with their units close by; "Launch in" and the units lighter. It
   keeps one width whatever it says, so the row does not shift when the script swaps the date for the clock. */
body.ds-root .ds-promo__timer {
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

body.ds-root .ds-promo__timer[data-promo-when] {
  min-width: 17em;
}

body.ds-root .ds-promo__timer .promo-when-label {
  color: var(--ds-muted);
}

body.ds-root .ds-promo__timer .promo-clock {
  gap: 6px;
}

body.ds-root .ds-promo__timer .promo-cell {
  gap: 1px;
}

body.ds-root .ds-promo__timer .ds-u {
  margin: 0;
  font: inherit;
  color: var(--ds-faint);
}

@media (max-width: 639px) {
  body.ds-root .ds-promo__inner.promo-inner--offer {
    display: grid;
    column-gap: 10px;
    row-gap: 6px;
    padding-block: 0;
  }

  body.ds-root .ds-promo__timer[data-promo-when] {
    min-width: 0;
  }
}

/* A narrow phone: the bar's type a step smaller (the kit's own step, a little earlier), so the capitals and the chip
   stay on one row. */
@media (max-width: 399px) {
  body.ds-root .ds-promo__inner {
    font-size: 12px;
  }

  body.ds-root .ds-promo .ds-promo__chip {
    height: 24px;
    padding: 0 8px;
  }
}

@media (max-width: 339px) {
  body.ds-root .ds-promo__inner {
    font-size: 11px;
  }
}

/* ---------- The bar (.ds-nav) ----------
   The kit's nav as it draws it: plain links on the bar, no capsule round them or round each one. The bar is taller and
   as wide as the page; the logo, the links and the button share one centre line, the links in the middle of the page
   whatever the two ends weigh. A link in view of the pointer, or the page's own, has a short bar under its word; the
   keyboard's focus has the kit's ring. The bar stays the page's fixed header (the kit's own surface is sticky). */
@media (min-width: 960px) {
  body.ds-root {
    --bar-h: 88px;
  }

  body.ds-root .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 32px;
  }

  body.ds-root .header-inner > .wordmark {
    justify-self: start;
  }

  body.ds-root .header-inner > .header-end {
    justify-self: end;
  }

  body.ds-root .nav.ds-nav {
    position: static;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: clamp(28px, 3.4vw, 52px);
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /* The site's own capsule behind the links, which its stuck header would draw again, is not the kit's: none, at the
     top of the page or scrolled. */
  body.ds-root .site-header.is-stuck .nav.ds-nav {
    border-color: transparent;
    background: none;
    box-shadow: none;
  }

  body.ds-root .ds-nav .ds-nav__link,
  body.ds-root .site-header:not(.is-stuck) .ds-nav .ds-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0;
    border-radius: 4px;
    background: none;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--ds-white);
  }

  body.ds-root .ds-nav .ds-nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ds-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease-out;
  }

  body.ds-root .ds-nav .ds-nav__link:hover {
    background: none;
    color: var(--ds-white);
  }

  body.ds-root .ds-nav .ds-nav__link:hover::after,
  body.ds-root .ds-nav .ds-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  body.ds-root .ds-nav .ds-nav__link[aria-current="page"] {
    background: none;
    box-shadow: none;
  }

  body.ds-root .ds-nav .ds-nav__link:focus-visible {
    outline-offset: 6px;
  }

  body.ds-root .site-header .logo {
    height: 38px;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  body.ds-root .ds-nav .ds-nav__link,
  body.ds-root .site-header:not(.is-stuck) .ds-nav .ds-nav__link {
    font-size: 16px;
  }

  body.ds-root .header-inner {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ds-root .ds-nav .ds-nav__link::after {
    transition: none;
  }
}

body.ds-root .header-end {
  gap: 10px;
}

/* The bar's icons: the icon alone in white, a soft square behind it under the pointer, the kit's ring for the keyboard. */
body.ds-root .header-end .icon-link {
  border-color: transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
}

body.ds-root .header-end .icon-link:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ds-white);
}

body.ds-root .header-end .icon-link:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}

/* The nav button: the kit's button with the ordinary buttons' corners, a little larger; the header's own spacing keeps
   its ring clear. */
body.ds-root .header-cta.ds-btn-nav {
  flex: none;
  height: 46px;
  margin-left: 6px;
  padding: 0 22px;
  font-size: 16px;
}

/* Without the row of links the bar holds the logo, the button and the menu: the button comes down to the old small
   button's size on a phone, and on the narrowest phones the menu holds it instead. */
@media (max-width: 959px) {
  body.ds-root .header-end {
    gap: 8px;
  }

  body.ds-root .header-cta.ds-btn-nav {
    margin-left: 0;
  }
}

@media (max-width: 559px) {
  body.ds-root .header-cta.ds-btn-nav {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }
}

@media (max-width: 379px) {
  body.ds-root .header-cta.ds-btn-nav {
    display: none;
  }
}

body.ds-root .menu-cta.ds-btn {
  margin-top: 8px;
}

/* ---------- Buttons ----------
   The ordinary buttons take the controls' 10px corners in place of the kit's pills (its nav and outline buttons; the
   primary's glass frame has its own 8px). The kit's dark label sits on a light face, as the kit has it: its gradient
   runs through the lighter purples here, so the label reads at 7:1 or more from end to end (from the darker purple it
   fell to 4.7:1), and the form button's hover stays as light. The rolling label stays one line tall inside its mask;
   while the form is sending, the label holds still. */
body.ds-root {
  --ds-grad: linear-gradient(90deg, var(--ds-green), var(--ds-g2));
}

body.ds-root :is(.ds-btn-nav, .ds-btn-outline),
body.ds-root .ds-btn-outline::before {
  border-radius: 10px;
}

/* Hovered, the form button keeps its dark label, a link drawn as one too (the Discord's, the footer's), which the
   site's own link hover would make white on the light fill. */
body.ds-root .ds-btn-form:hover:not(:disabled, [aria-disabled="true"], .is-busy) {
  background: linear-gradient(90deg, var(--ds-hi), var(--ds-g2));
  color: var(--ds-ink);
}

body.ds-root :is(.ds-btn, .ds-btn-nav, .ds-btn-outline, .ds-btn-form) .ds-roll {
  flex: none;
}

body.ds-root :is(.ds-btn, .ds-btn-nav, .ds-btn-outline, .ds-btn-form).is-busy .ds-roll > span {
  transform: none;
}

/* The forms' submit button (.ds-btn-form) in the sign-up rows: full width under the field on a phone, beside it from
   560px up, the field's height. */
body.ds-root .field-row .ds-btn-form {
  flex: none;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
}

@media (min-width: 560px) {
  body.ds-root .field-row .ds-btn-form {
    width: auto;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
  }
}

body.ds-root .ds-btn-form:focus-visible {
  outline: 2px solid var(--ds-g2);
  outline-offset: 3px;
}

body.ds-root .ds-btn-form:disabled.is-busy {
  opacity: 0.85;
}

/* The secondary buttons sit on the page's own rows. */
body.ds-root .ds-btn-outline {
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  body.ds-root .ds-promo__chip,
  body.ds-root .ds-btn-outline,
  body.ds-root .ds-btn-nav {
    transition: none;
  }
}

/* ---------- Stats strip (.ds-stats) ----------
   The four facts every account shares, under the form and as wide as the page's content: one row, each fact as wide
   as its own words so every phrase keeps to one line, the row's room shared evenly around the kit's dividers. The
   figures, labels and icons grow with the screen, from a laptop's to a desktop's (their sizes at 1200px and 1440px).
   Each icon stands in the kit's own box, in the one colour they share, a size up from the kit's and drawn a little
   heavier, beside a larger and bolder figure and label. A small laptop has two rows of two; under the tablet's width
   the strip runs sideways on a loop and scrolls by hand too (waitlist-kit.js holds it while it is touched); without
   the script, or with less motion asked for, it stands still and scrolls by hand, a fact at a time. */
body.ds-root .hero-stats {
  --stat-gap: 16px;
  --hold-check: 250;
  --hold-busy: 900;
  margin-top: clamp(32px, 4.5vw, 56px);
  padding-block: 26px;
  border-top: 1px solid var(--ds-line-2);
  border-bottom: 1px solid var(--ds-line-2);
  text-align: left;
  -webkit-mask-image: none;
  mask-image: none;
}

body.ds-root .hero-stats .ds-stats__group {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--stat-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .hero-stats .ds-stats__group--clone,
body.ds-root .hero-stats .ds-stats__divider--end {
  display: none;
}

body.ds-root .hero-stats .ds-stat {
  justify-content: flex-start;
  gap: clamp(12px, 1.6667vw - 8px, 16px);
  min-width: 0;
}

body.ds-root .hero-stats .ds-stat__icon {
  --icon: clamp(48px, 3.3333vw + 8px, 56px);
  width: var(--icon);
  height: var(--icon);
  border-radius: clamp(12px, 0.8333vw + 2px, 14px);
  color: var(--ds-g2);
}

body.ds-root .hero-stats .ds-stat__icon svg {
  width: clamp(26px, 1.6667vw + 6px, 30px);
  height: clamp(26px, 1.6667vw + 6px, 30px);
  stroke-width: 2;
}

body.ds-root .hero-stats .ds-stat__text {
  gap: 3px;
  min-width: 0;
}

body.ds-root .hero-stats .ds-stat__num {
  font-size: clamp(24px, 1.6667vw + 4px, 28px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ds-white);
}

body.ds-root .hero-stats .ds-stat__label {
  font-size: clamp(15px, 0.8333vw + 5px, 17px);
  line-height: 1.35;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
  white-space: normal;
  text-wrap: balance;
}

body.ds-root .hero-stats .ds-stats__divider {
  height: 52px;
}

/* A small laptop: the four in two rows of two, every phrase on one line at a desktop's size, each pair lined up at
   its start, a divider between the two of each row. */
@media (min-width: 992px) and (max-width: 1199px) {
  body.ds-root .hero-stats .ds-stats__group {
    grid-template-columns: 1fr max-content 1fr auto 1fr max-content 1fr;
    gap: 20px 0;
  }

  body.ds-root .hero-stats .ds-stat:nth-child(4n + 1) {
    grid-column: 2;
  }

  body.ds-root .hero-stats .ds-stats__divider:nth-child(4n + 2) {
    grid-column: 4;
  }

  body.ds-root .hero-stats .ds-stat:nth-child(4n + 3) {
    grid-column: 6;
  }

  body.ds-root .hero-stats .ds-stats__divider:nth-child(4n) {
    display: none;
  }

  body.ds-root .hero-stats .ds-stat {
    gap: 14px;
  }

  body.ds-root .hero-stats .ds-stat__icon {
    --icon: 52px;
    border-radius: 13px;
  }

  body.ds-root .hero-stats .ds-stat__icon svg {
    width: 28px;
    height: 28px;
  }

  body.ds-root .hero-stats .ds-stat__num {
    font-size: 26px;
  }

  body.ds-root .hero-stats .ds-stat__label {
    font-size: 16px;
  }
}

/* Under the tablet's width: one row, each fact on one line, that scrolls sideways (its scrollbar hidden), faded where
   there is more to see: at its end while it stands still, at both ends, as the kit's strip is, while it runs. */
@media (max-width: 991px) {
  body.ds-root .hero-stats {
    --stat-gap: 24px;
    padding-block: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  body.ds-root .hero-stats::-webkit-scrollbar {
    display: none;
  }

  body.ds-root .hero-stats .ds-stats__track {
    width: max-content;
    animation: none;
  }

  body.ds-root .hero-stats .ds-stats__group {
    display: flex;
    flex: none;
    padding-right: var(--stat-gap);
  }

  body.ds-root .hero-stats .ds-stats__group--clone {
    display: none;
  }

  body.ds-root .hero-stats .ds-stats__divider--end {
    display: block;
  }

  body.ds-root .hero-stats .ds-stat {
    flex: none;
    justify-content: flex-start;
    gap: 13px;
  }

  body.ds-root .hero-stats .ds-stat__icon {
    --icon: 50px;
    border-radius: 12px;
  }

  body.ds-root .hero-stats .ds-stat__icon svg {
    width: 26px;
    height: 26px;
  }

  body.ds-root .hero-stats .ds-stat__num {
    font-size: 20px;
    line-height: 25px;
  }

  body.ds-root .hero-stats .ds-stat__label {
    font-size: 14.5px;
    line-height: 20px;
  }

  body.ds-root .hero-stats :is(.ds-stat__num, .ds-stat__label) {
    white-space: nowrap;
  }

  body.ds-root .hero-stats .ds-stats__divider {
    height: 44px;
  }

  /* Standing still: a fact at a time, from its start. */
  html:not(.ds-anim) body.ds-root .hero-stats {
    scroll-snap-type: x mandatory;
  }

  html:not(.ds-anim) body.ds-root .hero-stats .ds-stat {
    scroll-snap-align: start;
  }

  /* One set and no next one: no divider after its last fact, whose room stays, clear of the fade. */
  html:not(.ds-anim) body.ds-root .hero-stats .ds-stats__divider--end {
    visibility: hidden;
  }

  /* On the loop: the set and its two copies move one set's width at the kit's speed for the width (the script sets
     the time it takes), and stand where they are while held. */
  .ds-anim body.ds-root .hero-stats {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }

  .ds-anim body.ds-root .hero-stats .ds-stats__group--clone {
    display: flex;
  }

  .ds-anim body.ds-root .hero-stats .ds-stats__track {
    animation: ds-stats-x var(--stats-duration, 40s) linear infinite;
    will-change: transform;
  }

  .ds-anim body.ds-root .hero-stats.is-held .ds-stats__track {
    animation: none;
  }

  /* In the keyboard's focus (a stop while there is more to scroll to, waitlist-kit.js): the ring on its edges, outside
     what it clips, so no fact or icon in it covers the ring, and no fade over it. */
  body.ds-root .hero-stats:focus-visible {
    outline: 2px solid var(--ds-g2);
    outline-offset: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@keyframes ds-stats-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% / 3), 0, 0); }
}

@media (max-width: 767px) {
  body.ds-root .hero-stats .ds-stat {
    gap: 12px;
  }

  body.ds-root .hero-stats .ds-stat__icon {
    --icon: 48px;
  }

  body.ds-root .hero-stats .ds-stat__icon svg {
    width: 25px;
    height: 25px;
  }

  body.ds-root .hero-stats .ds-stat__num {
    font-size: 19px;
    line-height: 24px;
  }

  body.ds-root .hero-stats .ds-stat__label {
    font-size: 14px;
    line-height: 19px;
  }
}

/* ---------- The hero's coins (.ds-coins) ----------
   The owner's eight meme-coin icons (brand/ds/coins, each in the one lavender duotone), behind the hero's outer areas:
   four on each side of the wordmark, the claim and the form, a few cropped at the page's edges, none over the content.
   Each drifts slowly down a short path and fades at its ends, moving a little from side to side and turning gently
   about its centre as it goes, each on its own clock. Phones keep three, near the edges, on shorter paths without the
   sway; with less motion asked for, every coin stands still at the middle of its path. The layer takes no clicks, and the markup hides it
   from screen readers. Under it the hero's hexagons are quieter, and its lights fade out before the hero ends, so no
   edge shows where the accounts begin. */
body.ds-root .hero::after {
  opacity: 0.05;
}

body.ds-root .hero::before {
  opacity: 0.035;
}

body.ds-root .hero-inner::before {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 160px), transparent);
}

/* A phone's hero is taller than it is wide, so the plate's lit floor would fall as a bright line just above the
   strip: there the plate fades out before its floor, and the hero's own glow lights the strip. */
@media (max-width: 599px) {
  body.ds-root .hero-plate {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 72%);
  }
}

body.ds-root .ds-coins {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  pointer-events: none;
  opacity: 0.5;
  --drift: 12px;
}

body.ds-root .ds-coin {
  position: absolute;
  top: calc(var(--bar-h) + var(--promo-h) + var(--y));
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  rotate: var(--r);
  -webkit-user-select: none;
  user-select: none;
}

/* Where each one rests (--x from the page's left, --y under the header), its size, and its path and clocks. */
body.ds-root .ds-coin--shiba-cape { --x: -28px; --y: 64px; --s: 88px; --r: -8deg; --fall: 80px; --dur: 31s; --delay: -6s; --sway: 9s; --tilt: 5deg; }
body.ds-root .ds-coin--fight { --x: calc(50% - 580px); --y: 150px; --s: 60px; --r: 6deg; --fall: 60px; --dur: 26s; --delay: -17s; --sway: 8s; --tilt: 6deg; }
body.ds-root .ds-coin--penguin { --x: calc(50% - 470px); --y: 236px; --s: 72px; --r: -4deg; --fall: 68px; --dur: 29s; --delay: -11s; --sway: 10s; --tilt: 5deg; }
body.ds-root .ds-coin--portrait { --x: -40px; --y: 300px; --s: 100px; --r: 5deg; --fall: 64px; --dur: 34s; --delay: -23s; --sway: 11s; --tilt: 4deg; }
body.ds-root .ds-coin--baby-shiba { --x: calc(50% + 540px); --y: 56px; --s: 76px; --r: 7deg; --fall: 60px; --dur: 28s; --delay: -2s; --sway: 9s; --tilt: 6deg; }
body.ds-root .ds-coin--cat { --x: calc(50% + 510px); --y: 210px; --s: 58px; --r: -6deg; --fall: 56px; --dur: 25s; --delay: -14s; --sway: 7s; --tilt: 6deg; }
body.ds-root .ds-coin--pill { --x: calc(100% - 60px); --y: 250px; --s: 92px; --r: -12deg; --fall: 80px; --dur: 33s; --delay: -20s; --sway: 10s; --tilt: 4deg; }
body.ds-root .ds-coin--shiba-hat { --x: calc(50% + 420px); --y: 340px; --s: 66px; --r: 4deg; --fall: 60px; --dur: 27s; --delay: -9s; --sway: 8s; --tilt: 5deg; }

/* Laptops: the eight placed from the page's edges, the gaps beside the wordmark being narrower. */
@media (max-width: 1399px) {
  body.ds-root .ds-coin--shiba-cape { --x: -26px; --y: 52px; --s: 80px; --fall: 60px; }
  body.ds-root .ds-coin--fight { --x: 150px; --y: 182px; --s: 56px; --fall: 50px; }
  body.ds-root .ds-coin--portrait { --x: -36px; --y: 290px; --s: 92px; --fall: 60px; }
  body.ds-root .ds-coin--penguin { --x: 120px; --y: 332px; --s: 64px; --fall: 60px; }
  body.ds-root .ds-coin--baby-shiba { --x: calc(100% - 64px); --y: 44px; --s: 76px; --fall: 50px; }
  body.ds-root .ds-coin--cat { --x: calc(100% - 230px); --y: 187px; --s: 56px; --fall: 50px; }
  body.ds-root .ds-coin--pill { --x: calc(100% - 56px); --y: 236px; --s: 88px; --fall: 70px; }
  body.ds-root .ds-coin--shiba-hat { --x: calc(100% - 180px); --y: 312px; --s: 60px; --fall: 50px; }
}

/* Narrower desktops: seven, the penguin resting. */
@media (max-width: 1199px) {
  body.ds-root .ds-coins { --drift: 10px; }
  body.ds-root .ds-coin--penguin { display: none; }
  body.ds-root .ds-coin--shiba-cape { --x: -24px; --y: 44px; --s: 72px; --fall: 60px; }
  body.ds-root .ds-coin--fight { --x: 110px; --y: 182px; --s: 52px; --fall: 50px; }
  body.ds-root .ds-coin--portrait { --x: -36px; --y: 270px; --s: 84px; --fall: 60px; }
  body.ds-root .ds-coin--baby-shiba { --x: calc(100% - 56px); --y: 42px; --s: 64px; --fall: 50px; }
  body.ds-root .ds-coin--cat { --x: calc(100% - 168px); --y: 190px; --s: 52px; --fall: 50px; }
  body.ds-root .ds-coin--pill { --x: calc(100% - 48px); --y: 272px; --s: 80px; --fall: 60px; }
  body.ds-root .ds-coin--shiba-hat { --x: calc(100% - 150px); --y: 312px; --s: 56px; --fall: 50px; }
}

/* Tablets: four, two on each side. */
@media (max-width: 991px) {
  body.ds-root .ds-coins { --drift: 8px; }
  body.ds-root .ds-coin--fight,
  body.ds-root .ds-coin--cat,
  body.ds-root .ds-coin--shiba-hat { display: none; }
  body.ds-root .ds-coin--shiba-cape { --x: -22px; --y: 42px; --s: 56px; --fall: 40px; --tilt: 4deg; }
  body.ds-root .ds-coin--portrait { --x: -28px; --y: 262px; --s: 64px; --fall: 40px; }
  body.ds-root .ds-coin--baby-shiba { --x: calc(100% - 40px); --y: 40px; --s: 60px; --fall: 40px; --tilt: 4deg; }
  body.ds-root .ds-coin--pill { --x: calc(100% - 44px); --y: 252px; --s: 64px; --fall: 40px; }
}

/* Phones: three, cropped at the edges beside the wordmark and the consent, on short paths without the sway. The
   lowest is placed from the hero's foot, so the consent's wrapping never moves it onto the text. */
@media (max-width: 759px) {
  body.ds-root .ds-coins { opacity: 0.42; --drift: 0px; }
  body.ds-root .ds-coin { --fall: 14px; --tilt: 0deg; }
  body.ds-root .ds-coin--shiba-cape,
  body.ds-root .ds-coin--portrait { display: none; }
  body.ds-root .ds-coin--penguin { display: block; --x: -30px; --y: 20px; --s: 48px; }
  body.ds-root .ds-coin--pill { --x: max(100% - 20px, 50% + 166px); --y: 50px; --s: 48px; }
  body.ds-root .ds-coin--baby-shiba { top: auto; bottom: 155px; --x: calc(100% - 14px); --s: 44px; }
}

.ds-anim body.ds-root .ds-coin {
  animation: ds-coin-fall var(--dur) linear var(--delay) infinite, ds-coin-sway var(--sway) ease-in-out var(--delay) infinite alternate;
}

@keyframes ds-coin-fall {
  0% { translate: 0 calc(var(--fall) / -2); opacity: 0; }
  18%, 82% { opacity: 1; }
  100% { translate: 0 calc(var(--fall) / 2); opacity: 0; }
}

@keyframes ds-coin-sway {
  from { transform: translateX(calc(var(--drift) * -1)); rotate: calc(var(--r) - var(--tilt)); }
  to { transform: translateX(var(--drift)); rotate: calc(var(--r) + var(--tilt)); }
}

/* ---------- The account picker (.ds-pricing) ----------
   Four numbered steps: the programme, the account size, its rules, its price. */
body.ds-root .ds-acc {
  --ds-sticky-top: calc(var(--header-h) + 16px);
}

body.ds-root .ds-pricing {
  gap: 0;
  margin-top: 40px;
}

/* Every part the page or the script hides stays hidden, whatever display the kit gives it. */
body.ds-root .ds-pricing [hidden] {
  display: none !important;
}

/* A step's label: its number in a ring, then its name in small capitals; tight over its part, well clear of the last. */
body.ds-root .ds-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

body.ds-root .ds-step__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.1);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ds-g2);
  font-variant-numeric: tabular-nums;
}

body.ds-root .ds-pricing > .ds-step + * {
  margin-top: 0;
}

body.ds-root .ds-pricing > :not(.ds-step) + .ds-step {
  margin-top: 32px;
}

/* 1. The programme: the kit's tabs, then one line on what sets the chosen one apart. */
body.ds-root .ds-pricing__about {
  margin-top: 12px;
}

body.ds-root .ds-pricing__prog {
  max-width: 72ch;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-muted);
}

body.ds-root .ds-pricing__prog + .ds-pricing__prog {
  margin-top: 8px;
}

body.ds-root .ds-pricing__prog b {
  margin-right: 4px;
  font-weight: 600;
  color: var(--ds-white);
}

body.ds-root .is-live .ds-pricing__prog b {
  display: none;
}

/* 2. The sizes: the kit's tiles, four across, a row to swipe on a phone with the next tile showing at the edge. */
body.ds-root .ds-sizes {
  padding-top: 8px;
}

body.ds-root .ds-tile {
  text-align: left;
}

/* Each size over its own artwork (public/brand/acct-<size>.webp, 672 by 288): the file's full height at the tile's
   right, where its structure is, under a shade that is darkest under the figures and clears toward the structure. The
   note's strip lets the artwork through. Picked, the tile takes a violet ring, a violet cast and a glow; the best
   value keeps the kit's gradient edge. Without the image the tile is the kit's plain surface. */
body.ds-root .ds-tile[data-size="10k"] { --tile-art: url("/brand/acct-10k.webp"); }
body.ds-root .ds-tile[data-size="25k"] { --tile-art: url("/brand/acct-25k.webp"); }
body.ds-root .ds-tile[data-size="50k"] { --tile-art: url("/brand/acct-50k.webp"); }
body.ds-root .ds-tile[data-size="100k"] { --tile-art: url("/brand/acct-100k.webp"); }

body.ds-root .ds-tile[data-size] {
  --tile-shade: linear-gradient(100deg, rgba(11, 9, 20, 0.9) 0%, rgba(11, 9, 20, 0.66) 40%, rgba(11, 9, 20, 0.06) 100%);
  background: var(--tile-shade), var(--tile-art, none) right center / cover no-repeat, var(--ds-inset);
}

body.ds-root .ds-tile--popular[data-size]:not([aria-pressed="true"]) {
  background:
    var(--tile-shade) padding-box,
    var(--tile-art, none) right center / cover no-repeat padding-box,
    linear-gradient(var(--ds-inset), var(--ds-inset)) padding-box,
    linear-gradient(180deg, rgba(167, 139, 250, 0.6) 0%, rgba(167, 139, 250, 0.3) 34%, rgba(255, 255, 255, 0.08) 78%) border-box;
}

body.ds-root .ds-tile[data-size]:hover {
  --tile-shade: linear-gradient(100deg, rgba(11, 9, 20, 0.86) 0%, rgba(11, 9, 20, 0.56) 40%, rgba(11, 9, 20, 0) 100%);
  border-color: var(--ds-line-2);
}

body.ds-root .ds-tile--popular[data-size]:not([aria-pressed="true"]):hover {
  border-color: transparent;
}

body.ds-root .ds-tile[data-size][aria-pressed="true"] {
  --tile-shade: linear-gradient(100deg, rgba(30, 17, 62, 0.9) 0%, rgba(38, 21, 80, 0.62) 40%, rgba(80, 46, 156, 0.08) 100%);
  border-color: var(--ds-green);
  box-shadow: inset 0 0 0 1px var(--ds-green), inset 0 1px 0 rgba(196, 181, 253, 0.3), 0 18px 40px -24px rgba(139, 92, 246, 0.95);
}

body.ds-root .ds-tile[data-size] .ds-tile__note {
  border-top-color: rgba(255, 255, 255, 0.07);
  background: rgba(9, 7, 17, 0.62);
  color: rgba(255, 255, 255, 0.78);
}

body.ds-root .ds-tile[data-size][aria-pressed="true"] .ds-tile__note {
  border-top-color: rgba(196, 181, 253, 0.16);
  background: rgba(22, 12, 48, 0.6);
  color: var(--ds-white);
}

body.ds-root .ds-tile[data-size][aria-pressed="true"] .ds-tile__size > span {
  color: rgba(255, 255, 255, 0.82);
}

body.ds-root .ds-tile:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 3px;
}

body.ds-root .ds-tile__size b {
  font-weight: 500;
}

body.ds-root .ds-tile__size > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ds-muted-2);
}

/* The price note beside a tile's fee ("per month": the recurring charge where the price is), set as the size's label. */
body.ds-root .ds-tile__price > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ds-muted-2);
}

body.ds-root .ds-tile[data-size][aria-pressed="true"] .ds-tile__price > span {
  color: rgba(255, 255, 255, 0.82);
}

body.ds-root .ds-popular-tag {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.ds-root .ds-sizes {
    padding-top: 14px;
    padding-bottom: 4px;
  }

  body.ds-root .ds-tile__size {
    font-size: 24px;
    line-height: 28px;
  }

  body.ds-root .ds-tile__price b {
    font-size: 32px;
    line-height: 32px;
  }

  body.ds-root .ds-popular-tag {
    left: 16px;
    transform: none;
    border-radius: 999px;
    padding: 2px 10px;
    top: -10px;
  }

  body.ds-root .ds-popular-tag::before,
  body.ds-root .ds-popular-tag::after {
    display: none;
  }
}

/* 3 and 4. The panel: the rules beside the price on a wide screen, the price under the rules when they stack. */
body.ds-root .ds-pricing__panel {
  margin-top: 32px;
}

body.ds-root .ds-pricing__rules-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

body.ds-root .ds-pricing__rules-title .ds-step__n {
  width: 26px;
  height: 26px;
}

body.ds-root .ds-phase__when {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ds-muted-2);
}

body.ds-root .ds-phase__when b {
  font-weight: 600;
  color: var(--ds-white);
}

body.ds-root .ds-phase + .ds-phase {
  margin-top: 24px;
}

body.ds-root .is-live .ds-phase__when {
  display: none;
}

body.ds-root .is-live .ds-phase + .ds-phase {
  margin-top: 0;
}

/* The rules: the kit's table; its definitions may open past its edge, and a folded table ends on a clean line. */
body.ds-root .ds-rules {
  overflow: visible;
}

body.ds-root .ds-rule {
  min-height: 48px;
}

body.ds-root .ds-rule__l {
  display: grid;
  gap: 2px;
  justify-items: start;
}

body.ds-root .ds-rule__n {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--ds-faint);
}

body.ds-root .ds-rule__v {
  color: var(--ds-white);
}

body.ds-root .ds-rules.is-collapsible:not(.is-expanded) > .ds-rule:not(.ds-rule--more):has(+ .ds-rule--more) {
  border-bottom: 0;
  box-shadow: none;
}

body.ds-root .ds-rules.is-collapsible:not(.is-expanded) ~ .acc-range {
  display: none;
}

body.ds-root .ds-more [data-ds-more-count] {
  color: var(--ds-faint);
}

body.ds-root .ds-more:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 3px;
}

body.ds-root .ds-phase .acc-range {
  padding-top: 20px;
}

body.ds-root .ds-pricing__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-g2);
  text-decoration: none;
}

body.ds-root .ds-pricing__all:hover {
  color: var(--ds-white);
}

body.ds-root .ds-pricing__all .ic {
  width: 16px;
  height: 16px;
}

/* The price: the account's name and the code, the offer, the receipt, the way in. */
body.ds-root .ds-pricing__summary .ds-step {
  margin-bottom: -4px;
}

body.ds-root .ds-pricing__name {
  font-size: 24px;
}

body.ds-root .ds-code-badge.promo-code {
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px dashed rgba(167, 139, 250, 0.5);
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.08);
  box-shadow: none;
  color: var(--ds-white);
  font-size: 13px;
  letter-spacing: 0.04em;
}

body.ds-root .ds-code-badge.promo-code .promo-code-ic {
  color: var(--ds-g2);
}

body.ds-root .ds-pricing__offer {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-muted);
}

body.ds-root .ds-pricing__offer .ds-grad-text {
  font-weight: 700;
}

body.ds-root .ds-rrow {
  align-items: flex-start;
}

body.ds-root .ds-rrow--sub .ds-rrow__k {
  display: grid;
  gap: 2px;
  justify-items: start;
}

body.ds-root .ds-rrow__k small {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--ds-faint);
}

body.ds-root .ds-rrow--sub + .ds-rrow--sub {
  padding-top: 8px;
  border-top: 1px solid var(--ds-line);
}

body.ds-root .ds-rrow--total {
  align-items: baseline;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line-2);
}

body.ds-root .ds-pricing__summary .acc-cta {
  margin-top: 4px;
}

body.ds-root .ds-pricing__fine {
  margin: -8px 0 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--ds-faint);
}

/* The payment methods, centred under the button: the label over the logos, a size up from the cards', in one row that
   wraps from the middle on a phone (the cards, then the coins). */
body.ds-root .ds-pricing__pay {
  container: pay / inline-size;
  text-align: center;
}

body.ds-root .ds-pricing__pay .ds-group-title {
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--ds-muted);
}

body.ds-root .ds-pricing__pay .acc-pay-list {
  justify-content: center;
  gap: 10px;
  margin: 0;
}

body.ds-root .ds-pricing__pay :is(.acc-pay-card, .acc-pay-coin) {
  height: 34px;
}

body.ds-root .ds-pricing__pay .acc-pay-coin {
  gap: 7px;
  padding: 0 12px 0 10px;
  font-size: 13.5px;
}

body.ds-root .ds-pricing__pay .acc-pay-coin-mark {
  width: 18px;
  height: 18px;
}

/* Where the six do not fit one row (about 480px), the cards keep theirs and the coins take the next, so no row is
   left with a single logo; the break between them is the rows' gap. */
@container pay (max-width: 519px) {
  body.ds-root .ds-pricing__pay .acc-pay-list { row-gap: 0; }
  body.ds-root .ds-pricing__pay .acc-pay-list::after { content: ""; flex-basis: 100%; order: 1; height: 10px; }
  body.ds-root .ds-pricing__pay .acc-pay-coin { order: 2; }
}

/* The definitions: the kit's tooltip, opened by a tap as well as by hover and focus, put away by Escape. */
body.ds-root .ds-tip__term {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted rgba(196, 181, 253, 0.5);
  text-underline-offset: 4px;
  cursor: help;
}

body.ds-root .ds-tip__term:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 3px;
  border-radius: 4px;
}

body.ds-root .ds-tip__term .acc-i {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  color: var(--ds-g2);
}

body.ds-root .ds-tip__box {
  max-width: min(280px, calc(100vw - 2 * var(--gutter)));
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

body.ds-root .ds-tip--end .ds-tip__box {
  right: 0;
  left: auto;
}

body.ds-root .ds-tip.is-open .ds-tip__box {
  opacity: 1;
  visibility: visible;
  transform: none;
}

body.ds-root .ds-tip.is-dismissed .ds-tip__box {
  opacity: 0;
  visibility: hidden;
}

/* Stacked: the rules first and then the price, so the four steps read in order. */
@media (max-width: 991px) {
  body.ds-root .ds-pricing__summary {
    order: 0;
    border-bottom: 0;
    border-top: 1px solid var(--ds-line);
    border-radius: 0 0 15px 15px;
  }
}

@media (max-width: 767px) {
  body.ds-root .ds-pricing {
    margin-top: 28px;
  }

  body.ds-root .ds-pricing__panel {
    margin-top: 24px;
  }

  body.ds-root .ds-pricing__summary {
    border-radius: 0;
  }

  body.ds-root .ds-pricing__rules-top {
    flex-wrap: wrap;
  }

  body.ds-root .ds-pricing__name {
    font-size: 20px;
  }
}

/* On a phone a definition opens over its whole row, so it never runs past the screen's edge. */
@media (max-width: 767px) {
  body.ds-root .ds-tip {
    position: static;
  }

  body.ds-root :is(.ds-rule, .ds-rrow, .ds-pricing__head) {
    position: relative;
  }

  body.ds-root .ds-tip__box,
  body.ds-root .ds-tip--end .ds-tip__box {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ds-root .ds-tip__box {
    transition: none;
  }
}

/* ---------- Max loss (.ds-ml, the wide card of Why MemeTrader) ----------
   One example run of a Turbo account, drawn the way the target card draws its run: on the cards' faint grid, lit from
   above, the account's value in the same violet over its own fill, the max loss floor under it in rose. The levels,
   the $1,000 between a high and the floor under it, and the three rules' numbers are HTML, set where the drawing puts
   them (ML_MARKS in pages/sections/vignettes.ts, which the site's tests hold to these): the levels at 30%, 55% and 80%
   of the plot, the numbers at 3.5% 80%, 15% 73% and 55% 55%, the $1,000 beside 22% 53.5%. The drawing stretches to
   the plot, its lines kept at their width and its dots round. Under it the three rules the numbers stand for, side by
   side where the drawing is wide, one under another where it is not. Where the card stands its drawing over its words,
   the drawing comes first, as on every other card; on a phone the levels stand over their lines at the plot's right
   end, where the run is well above them, so the plot has the card's width. */
body.ds-root .feat--f .feat-vis { display: block; padding: 20px 24px 22px; container: ml / inline-size; }
body.ds-root .feat--f .vig-tag { top: 18px; right: 22px; bottom: auto; }
body.ds-root .ds-ml { --ml-h: 168px; --ml-value: var(--violet-mid); --ml-floor: #fb7185; --ml-floor-text: #fecdd3; width: 100%; }
body.ds-root .ds-ml__key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 12px;
  padding-right: 88px;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
}
body.ds-root .ds-ml__key span { display: inline-flex; align-items: center; gap: 8px; }
body.ds-root .ds-ml__key span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
body.ds-root .ds-ml__key-value::before { background: var(--ml-value); }
body.ds-root .ds-ml__key-floor::before { background: var(--ml-floor); }
body.ds-root .ds-ml__chart { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
body.ds-root .ds-ml__levels { position: relative; width: 4.2em; height: var(--ml-h); margin: 0; padding: 0; font-size: 12.5px; list-style: none; }
body.ds-root .ds-ml__levels li {
  position: absolute;
  right: 0;
  color: var(--ds-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 16px;
  transform: translateY(-50%);
  white-space: nowrap;
}
body.ds-root .ds-ml__levels li:nth-child(1) { top: 30%; }
body.ds-root .ds-ml__levels li:nth-child(2) { top: 55%; color: var(--ds-muted); }
body.ds-root .ds-ml__levels li:nth-child(3) { top: 80%; color: var(--ml-floor-text); }
body.ds-root .ds-ml__plot { position: relative; height: var(--ml-h); }
body.ds-root .ds-ml__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
body.ds-root .ds-ml__svg path { fill: none; vector-effect: non-scaling-stroke; }
body.ds-root .ds-ml__svg .ds-ml__grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
body.ds-root .ds-ml__svg .ds-ml__start { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 4 5; stroke-width: 1; }
body.ds-root .ds-ml__svg .ds-ml__zone { fill: url(#ds-ml-zone); }
body.ds-root .ds-ml__svg .ds-ml__room { fill: url(#ds-ml-room); }
body.ds-root .ds-ml__svg .ds-ml__locked { stroke: rgba(255, 255, 255, 0.36); stroke-dasharray: 2 4; stroke-width: 1.25; }
body.ds-root .ds-ml__svg .ds-ml__gap-line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
body.ds-root .ds-ml__svg .ds-ml__floor { stroke: var(--ml-floor); stroke-linejoin: round; stroke-width: 2; }
body.ds-root .ds-ml__svg .ds-ml__value { stroke: var(--ml-value); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
body.ds-root .ds-ml__svg .ds-ml__dot { stroke-linecap: round; stroke-width: 7; }
body.ds-root .ds-ml__svg .ds-ml__dot--gap { stroke: var(--ds-white); stroke-width: 5; }
body.ds-root .ds-ml__svg .ds-ml__dot--high { stroke: var(--ds-white); }
/* The run's last point as the target card marks it: white, ringed in the deep violet. */
body.ds-root .ds-ml__svg .ds-ml__dot--end { stroke: var(--violet); stroke-width: 15; }
body.ds-root .ds-ml__svg .ds-ml__dot--core { stroke: var(--ds-white); stroke-width: 8; }
body.ds-root .ds-ml__gap {
  position: absolute;
  top: 53.5%;
  left: calc(22% + 8px);
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(9, 7, 17, 0.84);
  color: var(--ds-white);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 18px;
  transform: translateY(-50%);
  white-space: nowrap;
}
body.ds-root .ds-ml__mark {
  position: absolute;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1.5px solid var(--ml-floor);
  border-radius: 50%;
  background: #1a0d16;
  box-shadow: 0 0 0 2px rgba(9, 7, 17, 0.72);
  color: var(--ml-floor-text);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
body.ds-root .ds-ml__mark--1 { top: 80%; left: 3.5%; }
body.ds-root .ds-ml__mark--2 { top: 73%; left: 15%; }
body.ds-root .ds-ml__mark--3 { top: 55%; left: 55%; }
body.ds-root .ds-ml__rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(196, 181, 253, 0.1);
  counter-reset: ml-rule;
  list-style: none;
}
body.ds-root .ds-ml__rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 10px;
  min-width: 0;
  counter-increment: ml-rule;
}
body.ds-root .ds-ml__rules li::before {
  content: counter(ml-rule);
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--ml-floor);
  border-radius: 50%;
  color: var(--ml-floor-text);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
body.ds-root .ds-ml__rules b { color: var(--ds-white); font-size: 14px; font-weight: 600; line-height: 20px; }
body.ds-root .ds-ml__rules span { color: var(--ds-muted); font-size: 13px; line-height: 18px; }
/* Where the drawing is narrower, each rule is a row: its number, its name, then what it says, the names in one
   column. */
@container ml (max-width: 719px) {
  body.ds-root .ds-ml__rules { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 0; }
  body.ds-root .ds-ml__rules li { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; column-gap: 12px; }
  body.ds-root .ds-ml__rules li::before { grid-row: auto; align-self: center; margin-top: 0; }
  body.ds-root .ds-ml__rules b { white-space: nowrap; }
}
/* On a phone's card each rule keeps its number and name on one line, what it says under the name. */
@container ml (max-width: 419px) {
  body.ds-root .ds-ml__rules { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; }
  body.ds-root .ds-ml__rules li { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
  body.ds-root .ds-ml__rules li::before { grid-row: 1 / span 2; align-self: start; margin-top: 1px; }
  body.ds-root .ds-ml__rules b { white-space: normal; }
  body.ds-root .ds-ml__rules span { font-size: 12.5px; line-height: 17px; }
}
@media (max-width: 899px) {
  body.ds-root .feat--f .feat-vis { order: -1; }
}
/* In the phone's row of cards it is one card among the others: its drawing, its title and what it says, without the
   label over the title the title already says. */
@media (max-width: 759px) {
  body.ds-root .feat--f .feat-text .pill { display: none; }
}
@media (max-width: 599px) {
  body.ds-root .feat--f .feat-vis { padding: 14px 14px 16px; }
  body.ds-root .feat--f .vig-tag { top: 12px; right: 12px; }
  body.ds-root .ds-ml { --ml-h: 140px; }
  body.ds-root .ds-ml__key { gap: 2px 14px; margin-bottom: 10px; padding-right: 76px; font-size: 12.5px; }
  body.ds-root .ds-ml__chart { grid-template-columns: minmax(0, 1fr); }
  body.ds-root .ds-ml__levels { z-index: 1; grid-area: 1 / 1; width: auto; font-size: 11.5px; pointer-events: none; }
  body.ds-root .ds-ml__levels li { right: 0; text-shadow: 0 1px 2px rgba(9, 7, 17, 0.9); transform: translateY(calc(-100% - 3px)); }
  body.ds-root .ds-ml__plot { grid-area: 1 / 1; }
  body.ds-root .ds-ml__gap { left: calc(22% + 7px); padding: 0 5px; font-size: 11px; line-height: 17px; }
}

/* ---------- Why MemeTrader's cards on a phone (.bento[data-ds-swipe]) ----------
   Under the tablet's width the six cards are one row the visitor swipes at their own pace: a card in view with the
   start of the next one beside it, every card one width, each stopping at the page's edge, one at a time. The row
   runs to the screen's edges, its scrollbar hidden; the dots under it (waitlist-kit.js adds them) say which card is in
   view. With a keyboard, the row takes the focus and its arrow keys move it, a card at a time. Each card keeps its own
   height: waitlist-kit.js gives the row the height of the card in view (.is-sized), and between two cards while it
   moves, so the tall max loss card leaves no room under the others; without it, every card takes the tallest one's
   height, its drawing given the room. From the tablet's width up, the cards are the grid again. */
body.ds-root .bento-dots { display: none; }
@media (max-width: 759px) {
  body.ds-root .bento[data-ds-swipe] {
    position: relative;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px);
    gap: 12px;
    margin: -6px calc(var(--gutter) * -1) 0;
    padding: 6px var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  body.ds-root .bento[data-ds-swipe]::-webkit-scrollbar { display: none; }
  body.ds-root .bento[data-ds-swipe]:focus-visible { outline: 2px solid var(--ds-g2); outline-offset: -2px; }
  body.ds-root .bento[data-ds-swipe] > .feat { scroll-snap-align: start; scroll-snap-stop: always; }
  body.ds-root .bento[data-ds-swipe] > .feat:hover { transform: none; }
  body.ds-root .bento[data-ds-swipe]:not(.is-sized) > .feat > .feat-vis { flex: 1 0 auto; }
  body.ds-root .bento[data-ds-swipe].is-sized { align-items: start; }
  body.ds-root .bento-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  body.ds-root .bento-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(221, 216, 234, 0.24); transition: width 200ms ease-out, background-color 200ms ease-out; }
  body.ds-root .bento-dots i.is-on { width: 20px; background: var(--ds-g2); }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  body.ds-root .bento-dots i { transition: none; }
}

/* ---------- Payout certificates (.ds-marquee, .ds-cert) ----------
   The kit's endless row across the page's full width, its edges fading. Each card is a dark certificate: the
   generated light on its right, its words on the quiet left. The card is its own container and its type is set in
   its width (cqi), so every card size is the same card. */
body.ds-root .ds-certs__row {
  --edge: max(var(--gutter, 20px), calc((100% - var(--page-max, 1240px)) / 2 + var(--gutter, 20px)));
  /* Read by waitlist-kit.js, in milliseconds: how often a held row looks again whether it is still in use, and how
     long after the last scroll or press it still is. */
  --hold-check: 250;
  --hold-busy: 900;
  margin-top: clamp(28px, 3.4vw, 44px);
  overscroll-behavior-x: contain;
}
body.ds-root .ds-certs__row .ds-marquee__list { margin: 0; padding: 8px 0; list-style: none; }
/* Scrolled by hand (reduced motion, or no script): the first card lines up with the page and each one snaps there. */
body.ds-root .ds-certs__row:not(.is-looping) { scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); }
body.ds-root .ds-certs__row:not(.is-looping) .ds-marquee__list { padding-inline: var(--edge); }
body.ds-root .ds-certs__row:not(.is-looping) .ds-marquee__list > * { scroll-snap-align: start; }
/* Moving, the row still scrolls by hand, its bar hidden: under the pointer, in the keyboard's focus or while it is
   scrolled, the cards stand still where they are and scroll; let go, they move on from there (waitlist-kit.js). A
   click's focus does not hold it, the keyboard's does. */
body.ds-root .ds-certs__row.is-looping { overflow-x: auto; scroll-behavior: auto; scrollbar-width: none; }
body.ds-root .ds-certs__row.is-looping::-webkit-scrollbar { display: none; }
body.ds-root .ds-certs__row.is-looping.is-held .ds-marquee__list { animation: none; }
body.ds-root .ds-certs__row.ds-marquee--pause:focus-within:not(:hover, :focus-visible) .ds-marquee__list { animation-play-state: running; }
body.ds-root .ds-certs__row:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -2px; }

body.ds-root .ds-cert {
  position: relative;
  container-type: inline-size;
  width: 440px;
  border: 1px solid var(--ds-line-2);
  border-radius: 16px;
  background:
    linear-gradient(90deg, var(--ds-card) 0%, rgba(24, 21, 36, 0.9) 40%, rgba(24, 21, 36, 0.35) 74%, rgba(24, 21, 36, 0.12) 100%),
    url("/brand/ds/cert-bg.webp") right center / auto 100% no-repeat,
    var(--ds-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 32px -18px rgba(0, 0, 0, 0.7);
  color: var(--ds-white);
  text-align: left;
}
body.ds-root .ds-cert__in { display: flex; flex-direction: column; padding: 16px 18px; padding: max(16px, 5.2cqi) max(18px, 5.6cqi); }
body.ds-root .ds-cert p { margin: 0; }
body.ds-root .ds-cert__logo { display: block; align-self: flex-start; width: auto; height: 16px; height: max(16px, 5cqi); }
body.ds-root .ds-cert__label {
  margin-top: 14px;
  margin-top: max(14px, 4.6cqi);
  color: var(--ds-muted);
  font-size: 10px;
  font-size: max(10px, 2.4cqi);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.ds-root .ds-cert__amount {
  margin-top: 2px;
  margin-top: max(2px, 0.8cqi);
  background: linear-gradient(180deg, var(--ds-white) 35%, var(--ds-g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-size: max(30px, 10.5cqi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
body.ds-root .ds-cert__for { margin-top: 4px; margin-top: max(4px, 1.2cqi); color: var(--ds-muted); font-size: 11.5px; font-size: max(11.5px, 2.9cqi); line-height: 1.4; }
body.ds-root .ds-cert__sigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  gap: max(14px, 4.4cqi);
  margin-top: 16px;
  margin-top: max(16px, 5cqi);
}
/* The two drawings are one lettering at one scale (each one's height is its viewBox's, in the card's width), and each
   stands on the names' rule by its own baseline: the Ganchev drawing reaches 0.338 of its height below its baseline,
   the Maltese drawing 0.061 (sig-*.svg). The names and the titles under them share one size, one weight and one line. */
body.ds-root .ds-cert__sig { display: grid; grid-template-rows: 30.4px auto auto; grid-template-rows: 10.2cqi auto auto; }
body.ds-root .ds-cert__sig img { display: block; align-self: end; width: auto; max-width: none; }
body.ds-root .ds-cert__sig--ganchev img { height: 28px; height: 9.4cqi; margin-bottom: 2.4px; margin-bottom: 0.8cqi; }
body.ds-root .ds-cert__sig--maltese img { height: 19.2px; height: 6.44cqi; margin-bottom: 10.7px; margin-bottom: 3.58cqi; }
body.ds-root .ds-cert__name {
  padding-top: 5px;
  padding-top: max(5px, 1.4cqi);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11.5px;
  font-size: max(11px, 2.9cqi);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
body.ds-root .ds-cert__role { margin-top: 1px; margin-top: max(1px, 0.3cqi); color: var(--ds-faint); font-size: 10px; font-size: max(10px, 2.4cqi); letter-spacing: 0.04em; }

@media (max-width: 991px) {
  body.ds-root .ds-cert { width: 380px; }
}
@media (max-width: 767px) {
  body.ds-root .ds-cert { width: min(300px, calc(100vw - 72px)); }
}

/* ---------- Platforms and charts (.ds-logos) ----------
   The platforms the accounts run on, by their own logos: one row without boxes, moving sideways on the kit's endless
   row (its edges fade, the pointer holds it). Standing still (reduced motion, or before the script runs) the three
   are centred, and wrap on a phone. Each logo is its own shape drawn in the buttons' violet (its file, cut to the
   shape alone and kept sharp, is the mask of the buttons' gradient), and its height gives the three one visual size:
   the area they draw, not their files' boxes. */
body.ds-root .ds-logos { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
body.ds-root .ds-logos__label {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
body.ds-root .ds-logos__row { margin-top: 20px; }
body.ds-root .ds-logos__row .ds-marquee__list { align-items: center; margin: 0; padding: 8px 0; list-style: none; }
body.ds-root .ds-logos__row .ds-marquee__list > * { margin-right: clamp(64px, 8vw, 120px); }
body.ds-root .ds-logos__item { display: flex; align-items: center; height: 48px; }
body.ds-root .ds-logos__mark {
  display: block;
  flex: none;
  height: var(--logo-h);
  aspect-ratio: var(--logo-ratio);
  background: var(--ds-grad);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body.ds-root .ds-logos__mark--ours {
  --logo-h: 30px;
  --logo-ratio: 663 / 105;
  -webkit-mask-image: url("/brand/ds/logos/memetrader.png");
  mask-image: url("/brand/ds/logos/memetrader.png");
}
body.ds-root .ds-logos__mark--tv {
  --logo-h: 29px;
  --logo-ratio: 1168 / 168;
  -webkit-mask-image: url("/brand/ds/logos/tradingview.png");
  mask-image: url("/brand/ds/logos/tradingview.png");
}
body.ds-root .ds-logos__mark--rix {
  --logo-h: 40px;
  --logo-ratio: 479 / 130;
  -webkit-mask-image: url("/brand/ds/logos/rixtrader.png");
  mask-image: url("/brand/ds/logos/rixtrader.png");
}
body.ds-root .ds-logos__note { margin: 12px 0 0; color: var(--ds-faint); font-size: 12px; line-height: 1.5; }
body.ds-root .ds-logos__row:not(.is-looping) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.ds-root .ds-logos__row:not(.is-looping) .ds-marquee__list { flex-wrap: wrap; justify-content: center; gap: 16px 64px; width: auto; }
body.ds-root .ds-logos__row:not(.is-looping) .ds-marquee__list > * { margin-right: 0; }
@media (max-width: 767px) {
  body.ds-root .ds-logos__row .ds-marquee__list > * { margin-right: 52px; }
  body.ds-root .ds-logos__row:not(.is-looping) .ds-marquee__list { gap: 14px 40px; }
  body.ds-root .ds-logos__item { height: 40px; }
  body.ds-root .ds-logos__mark--ours { --logo-h: 24px; }
  body.ds-root .ds-logos__mark--tv { --logo-h: 23px; }
  body.ds-root .ds-logos__mark--rix { --logo-h: 32px; }
}

/* ---------- Footer (.ds-footer) ----------
   The rows of the owner's briefs of 2026-10-25 and round 11, in order: the logo, the line that says what the firm
   is, and one row with the support address and the way back to the hero's form (waitlist-kit.js scrolls there and
   puts the keyboard's focus in its field), centred, the address drawn as the button's quiet partner; the one row of
   links; the wordmark at poster size; the legal row, the policies with a thin divider between two on a line (never
   one left at a line's end where they wrap: waitlist-kit.js marks each that starts a line) and the community icons
   level with them; the copyright under them, in grey; the small print, last. On a phone every row is centred and
   wraps in place, in the same order. */
body.ds-root .site-footer.ds-footer {
  padding: clamp(32px, 3.4vw, 48px) 0 36px;
}

body.ds-root .ds-footer__brand {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

body.ds-root .ds-footer__logo {
  display: block;
  border-radius: 8px;
}

body.ds-root .ds-footer__logo .logo {
  display: block;
  width: auto;
  height: clamp(32px, 3vw, 40px);
}

body.ds-root .ds-footer__about {
  max-width: 42em;
  margin: 0;
  color: var(--ds-muted);
  font-size: 16px;
  line-height: 24px;
  text-wrap: balance;
}

body.ds-root .ds-footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 6px;
}

body.ds-root .ds-footer__email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 0 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--ds-line-2);
  color: var(--ds-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease-out, box-shadow 140ms ease-out;
}

body.ds-root .ds-footer__email .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ds-g2);
}

body.ds-root .ds-footer__email:hover {
  background: rgba(167, 139, 250, 0.1);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}

body.ds-root :is(.ds-footer__logo, .ds-footer__email):focus-visible {
  outline: 2px solid var(--ds-g2);
  outline-offset: 3px;
}

/* The page's primary button, as in the hero's form. */
body.ds-root .ds-footer__cta {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
}

body.ds-root .ds-footer__nav {
  margin-top: clamp(30px, 3.4vw, 44px);
}

body.ds-root .ds-footer__nav ul,
body.ds-root .ds-footer__policies {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .ds-footer__nav ul {
  justify-content: center;
  gap: 6px clamp(28px, 4.4vw, 64px);
}

body.ds-root .ds-footer__nav a,
body.ds-root .ds-footer__policies a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ds-white);
  font-family: var(--ds-font);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  transition: color 140ms ease-out;
}

body.ds-root .ds-footer__nav a {
  font-size: 17px;
  line-height: 24px;
}

body.ds-root .ds-footer__policies a {
  font-size: 15px;
  line-height: 22px;
}

body.ds-root .ds-footer__nav a:hover,
body.ds-root .ds-footer__policies a:hover {
  color: var(--ds-g2);
  text-decoration-line: underline;
}

body.ds-root .ds-footer__nav a:focus-visible,
body.ds-root .ds-footer__policies a:focus-visible {
  outline: 2px solid var(--ds-g2);
  outline-offset: 3px;
}

body.ds-root .ds-footer .footer-word {
  margin-top: clamp(28px, 3.6vw, 48px);
}

body.ds-root .ds-footer__bottom {
  display: block;
  margin-top: clamp(28px, 3.6vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--ds-line);
}

body.ds-root .ds-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

body.ds-root .ds-footer__policies {
  --policy-gap: 33px;
  flex: 0 1 auto;
  gap: 2px var(--policy-gap);
}

body.ds-root .ds-footer__policies li {
  position: relative;
}

/* The divider, in the middle of the gap before a policy that does not start its line. */
body.ds-root .ds-footer__policies.is-lined li:not(.is-line-start)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--policy-gap) / -2);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
}

body.ds-root .ds-footer__copy {
  margin: 12px 0 0;
  color: var(--ds-faint);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

body.ds-root .ds-footer__social {
  display: flex;
  gap: 8px;
}

body.ds-root .ds-footer__social .icon-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  color: var(--ds-white);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--ds-line-2);
}

body.ds-root .ds-footer__social .icon-link:hover {
  background: rgba(167, 139, 250, 0.14);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4);
}

body.ds-root .ds-footer__social .icon-link:focus-visible {
  outline: 2px solid var(--ds-g2);
  outline-offset: 3px;
}

body.ds-root .ds-footer__social svg {
  width: 18px;
  height: 18px;
}

body.ds-root .ds-footer .risk.ds-footer__legal {
  max-width: none;
  margin: 20px 0 0;
  padding-top: 0;
  border-top: 0;
  font-size: 13px;
  line-height: 21px;
  text-align: left;
  color: var(--ds-faint);
}

body.ds-root .ds-footer .risk.ds-footer__legal + .ds-footer__legal {
  margin-top: 10px;
}

@media (max-width: 899px) {
  body.ds-root .ds-footer__bottom {
    text-align: center;
  }

  body.ds-root .ds-footer__row {
    flex-direction: column;
    gap: 16px;
  }

  body.ds-root .ds-footer__policies {
    --policy-gap: 29px;
    justify-content: center;
    row-gap: 4px;
  }

  body.ds-root .ds-footer__copy {
    margin-top: 16px;
  }

  body.ds-root .ds-footer .risk.ds-footer__legal {
    text-align: center;
  }
}

@media (max-width: 599px) {
  /* The address and the button, one over the other at one width. */
  body.ds-root .ds-footer__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 340px);
  }

  body.ds-root .ds-footer__nav ul {
    gap: 4px 24px;
  }

  body.ds-root .ds-footer__nav a {
    font-size: 16px;
  }

  body.ds-root .ds-footer .risk.ds-footer__legal {
    text-align: left;
  }
}

/* ---------- The support widget (support.js, .sp) ----------
   On the waitlist pages, the widget in the kit's surfaces, lines and violet: the launcher and its main buttons in the
   kit's violet face with dark words, the panel on the lifted surface, the fields in the dark well, and one focus ring.
   The launcher stands on the page's gutter, in line with the header's button and the footer's icons, and the page's
   foot leaves it room (below). The panel's header is flat: the owner's mark on its own, the title, and a close button
   drawn as the site's other icon buttons. What the widget does and its connection are support.js's, and on the launch
   site's pages the widget looks as it did. */
body.ds-root .sp {
  right: var(--gutter);
  bottom: calc(min(var(--gutter), 32px) + var(--sp-offset, 0px));
}

body.ds-root .sp-fab {
  border: 0;
  background: var(--ds-grad);
  color: var(--ds-ink);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.8);
}

body.ds-root .sp-fab:hover {
  box-shadow: 0 0 40px rgba(167, 139, 250, 0.35);
}

body.ds-root .sp-fab:focus-visible {
  outline: 2px solid var(--ds-white);
  outline-offset: 4px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.8);
}

body.ds-root .sp-panel {
  border: 1px solid var(--ds-line-2);
  border-radius: 16px;
  background: var(--ds-raised);
  box-shadow: 0 32px 72px -28px rgba(0, 0, 0, 0.9);
}

/* The panel's room above the launcher, as support.css works it out, with the launcher's own distance from the foot. */
@media (min-width: 600px) {
  body.ds-root .sp-panel {
    max-height: min(660px, calc(100dvh - 56px - 14px - 2 * min(var(--gutter), 32px) - var(--sp-offset, 0px)));
  }

  body.ds-root .sp-panel:is([data-view='thread'], [data-view='loading']) {
    height: min(660px, calc(100dvh - 56px - 14px - 2 * min(var(--gutter), 32px) - var(--sp-offset, 0px)));
  }
}

body.ds-root .sp-head {
  gap: 12px;
  padding: 12px 16px;
  border-bottom-color: var(--ds-line);
  background: none;
  box-shadow: none;
}

body.ds-root .sp-avatar--row {
  box-shadow: inset 0 0 0 1px var(--ds-line-2);
}

body.ds-root .sp-title {
  color: var(--ds-white);
  font-family: var(--ds-font);
  font-size: 16px;
  font-weight: 700;
}

body.ds-root .sp-status {
  color: var(--ds-muted);
}

/* The close and new-message buttons, as the site's icon buttons: a hairline square, the icon in the body's grey. */
body.ds-root .sp-tools {
  gap: 8px;
}

body.ds-root .sp-tool {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: var(--ds-body);
}

body.ds-root .sp-tool:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-white);
}

body.ds-root .sp-tool .sp-ic svg {
  width: 18px;
  height: 18px;
}

body.ds-root .sp-intro-title {
  color: var(--ds-white);
  font-family: var(--ds-font);
  font-size: 19px;
  font-weight: 700;
}

body.ds-root .sp-lede {
  color: var(--ds-body);
}

body.ds-root .sp-note {
  color: var(--ds-muted);
}

body.ds-root .sp-inline,
body.ds-root .sp-inline-btn,
body.ds-root .sp-retry {
  color: var(--ds-g2);
}

body.ds-root .sp-inline:hover {
  color: var(--ds-white);
}

/* The help pages: rows on the raised surface, each a white line with its violet icon. */
body.ds-root .sp-links {
  border-color: var(--ds-line-2);
  border-radius: 12px;
  background: var(--ds-pop);
}

body.ds-root .sp-link {
  color: var(--ds-white);
  font-family: var(--ds-font);
  font-weight: 600;
}

body.ds-root .sp-link + .sp-link {
  border-top-color: var(--ds-line);
}

body.ds-root .sp-link:hover {
  background: rgba(167, 139, 250, 0.1);
  color: var(--ds-white);
}

body.ds-root .sp-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ds-g2);
}

body.ds-root .sp-link-ic {
  color: var(--ds-g2);
}

body.ds-root .sp-link-go {
  color: var(--ds-muted);
}

body.ds-root .sp-link:hover .sp-link-go {
  color: var(--ds-g2);
}

/* The main buttons (the Discord, starting a conversation): the kit's form button. The second (trying again): a line. */
body.ds-root .sp a.sp-discord,
body.ds-root .sp button.sp-go {
  border: 0;
  border-radius: 10px;
  background: var(--ds-grad);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-weight: 600;
  box-shadow: none;
}

body.ds-root .sp a.sp-discord {
  font-size: 15px;
}

body.ds-root .sp a.sp-discord:hover,
body.ds-root .sp button.sp-go:hover:not([disabled], [aria-disabled="true"]) {
  background: linear-gradient(90deg, var(--ds-g1), var(--ds-hi));
  color: var(--ds-ink);
  box-shadow: 0 0 32px rgba(167, 139, 250, 0.3);
}

body.ds-root .sp a.sp-discord:active,
body.ds-root .sp button.sp-go:active:not([disabled], [aria-disabled="true"]) {
  background: var(--ds-g1);
  box-shadow: none;
}

body.ds-root .sp button.sp-go:is([disabled], [aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-muted);
  box-shadow: inset 0 0 0 1px var(--ds-line-2);
}

body.ds-root .sp button.sp-again {
  border: 1px solid var(--ds-line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--ds-white);
  font-family: var(--ds-font);
}

body.ds-root .sp button.sp-again:hover {
  border-color: var(--ds-g2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-white);
}

body.ds-root .sp-back {
  border-radius: 8px;
  color: var(--ds-body);
}

body.ds-root .sp-back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-white);
}

/* The fields: the kit's dark well, its line, and the violet line in focus. */
body.ds-root .sp-input {
  border-color: var(--ds-line-2);
  border-radius: 10px;
  background: var(--ds-inset);
  font-family: var(--ds-font);
}

body.ds-root .sp-input:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

body.ds-root .sp-input:focus {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}

body.ds-root .sp-as {
  border-color: var(--ds-line-2);
  border-radius: 10px;
  background: var(--ds-inset);
  color: var(--ds-muted);
}

body.ds-root .sp-foot {
  border-top-color: var(--ds-line-2);
  background: var(--ds-raised);
}

body.ds-root .sp-box {
  border-color: var(--ds-line-2);
  border-radius: 12px;
  background: var(--ds-inset);
}

body.ds-root .sp-box:focus-within {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}

body.ds-root .sp-text {
  font-family: var(--ds-font);
}

body.ds-root .sp-send {
  border-radius: 8px;
  background: var(--ds-grad);
  color: var(--ds-ink);
}

body.ds-root .sp-send:hover:not([disabled]) {
  background: linear-gradient(90deg, var(--ds-g1), var(--ds-hi));
}

body.ds-root .sp-send[disabled] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-faint);
}

/* The conversation: the visitor's words on the kit's violet face in dark type, the team's on the raised surface. */
body.ds-root .sp-bubble {
  font-family: var(--ds-font);
}

body.ds-root .sp-row--me .sp-bubble {
  border-radius: 14px 14px 4px 14px;
  background: var(--ds-grad);
  color: var(--ds-ink);
}

body.ds-root .sp-row--staff .sp-bubble {
  border-color: var(--ds-line-2);
  border-radius: 14px 14px 14px 4px;
  background: var(--ds-pop);
  color: var(--ds-body);
}

body.ds-root .sp-row--me.is-follow .sp-bubble {
  border-top-right-radius: 4px;
}

body.ds-root .sp-row--staff.is-follow .sp-bubble {
  border-top-left-radius: 4px;
}

body.ds-root .sp-row.is-failed .sp-bubble {
  border: 1px solid rgba(252, 165, 165, 0.4);
  background: rgba(239, 68, 68, 0.14);
  color: var(--ds-body);
}

/* One focus ring for every control in the widget. */
body.ds-root .sp :is(.sp-tool, .sp-back, .sp-send, .sp-banner-btn, .sp-inline-btn, .sp-retry, .sp-inline):focus-visible,
body.ds-root .sp :is(a.sp-discord, button.sp-go, button.sp-again):focus-visible {
  outline: 2px solid var(--ds-g2);
  outline-offset: 2px;
  box-shadow: none;
}

body.ds-root .sp :is(.sp-banner-btn, .sp-inline-btn, .sp-retry, .sp-inline):focus-visible {
  border-radius: 4px;
}

/* A phone shows the panel over the whole screen, edge to edge, as support.css draws it; the launcher keeps clear of
   the phone's own bar at the foot. */
@media (max-width: 599px) {
  body.ds-root .sp {
    bottom: calc(var(--gutter) + var(--sp-offset, 0px) + env(safe-area-inset-bottom));
  }

  body.ds-root .sp-panel {
    border: 0;
    border-radius: 0;
  }
}

/* The launcher's room at the page's foot: on the wider screens the small print's lines end before it (both sides
   alike where the print is centred); on a phone the page runs on below the print for it. */
@media (min-width: 900px) {
  .has-sp body.ds-root .ds-footer .ds-footer__legal {
    padding-right: calc(56px + 24px);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .has-sp body.ds-root .ds-footer .ds-footer__legal {
    padding-inline: calc(56px + 24px);
  }
}

@media (max-width: 599px) {
  .has-sp body.ds-root .site-footer.ds-footer {
    padding-bottom: calc(var(--gutter) + 52px + 16px + env(safe-area-inset-bottom));
  }
}

/* A footer link or icon the keyboard moves to is scrolled clear above the launcher, not left under it. */
.has-sp body.ds-root .ds-footer :is(a, button) {
  scroll-margin-bottom: calc(56px + 2 * min(var(--gutter), 32px) + var(--sp-offset, 0px) + env(safe-area-inset-bottom));
}

/* Forced colours: the launcher keeps a line round it, as support.css gives it. */
@media (forced-colors: active) {
  body.ds-root .sp-fab {
    border: 1px solid CanvasText;
  }
}

/* ---- the information pages ---- */
/* How it works, the rules, careers, the affiliates, the privacy note and the policies, with the kit: each opens on its
   words alone (.page-head, site/inner.ts pageHead), under the kit's bar, and its parts take the kit's surfaces and
   lines, flat, with no light behind them. The home page keeps its own. */

/* The bar is the kit's height from 960px up (88px, as above), so the room these pages keep under it, and where the
   scroll stops for an anchor (styles.css html), are measured from that height and not the site's 68px. */
body.ds-root:not(.home) {
  --header-h: calc(var(--bar-h) + var(--promo-h));
}

@media (min-width: 960px) {
  html:has(> body.ds-root:not(.home)) {
    --bar-h: 88px;
  }
}

/* The opening: the pill, the title, its one line and what is not settled yet, the page's sections close under it. */
body.ds-root .page-head {
  padding-top: calc(var(--header-h) + clamp(32px, 4.4vw, 64px));
}

body.ds-root .page-head .pill {
  margin-bottom: 16px;
}

body.ds-root .page-head h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.042em;
}

body.ds-root .page-head-lede {
  max-width: 640px;
  margin-top: 20px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ds-body);
  text-wrap: pretty;
}

body.ds-root .page-head-note {
  max-width: 640px;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ds-muted);
  text-wrap: pretty;
}

body.ds-root .page-head-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

body.ds-root .page-head + .section {
  padding-top: clamp(32px, 4vw, 56px);
}

/* The buttons side by side, one height (the opening's, careers' way in); on a phone each takes the row. */
body.ds-root :is(.page-head-cta, .door-cta) :is(.ds-btn-form, .ds-btn-outline) {
  height: 48px;
  padding: 0 24px;
}

@media (max-width: 479px) {
  body.ds-root :is(.page-head-cta, .door-cta) :is(.ds-btn-form, .ds-btn-outline) {
    flex: 1 1 100%;
  }
}

/* The headings inside a part at the part's own size: the sections' headings (above) would make each one a section's. */
body.ds-root .section .tstep-title {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
}

body.ds-root .section .door h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.04;
}

body.ds-root .section .aff-apply-box h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.04;
}

/* And the sections' own headings (the questions' too) a step under the page's title, which leads here as the hero
   does on the home page; the closing panel's keeps the home page's size. */
body.ds-root:not(.home) .section :is(.sec-head, .faq-head) h2 {
  font-size: clamp(32px, 4.2vw, 56px);
}

/* The wells the icons sit in (the facts, how it works' steps, the rules' groups, careers' values, the affiliates'
   cards): the kit's inset, its brighter line and its violet. */
body.ds-root :is(.fact-icon, .tstep-node, .rgroup-icon, .value-icon, .aff-icon) {
  border-color: var(--ds-line-2);
  background: var(--ds-inset);
  color: var(--ds-green);
  box-shadow: inset var(--ds-lip);
}

/* The panels (the prices, the affiliates' cards and steps, careers' way in, the affiliates' form): the kit's raised
   surface at its 16px corners, its line brighter along the top edge, as .ds-panel draws it. */
body.ds-root :is(.pp-col, .aff-card, .aff-step, .door, .aff-apply-box) {
  border-color: var(--ds-line);
  border-top-color: var(--ds-line-2);
  border-radius: 16px;
  background: var(--ds-card);
  box-shadow: inset var(--ds-lip);
}

body.ds-root :is(.door, .aff-apply-box) {
  box-shadow: inset var(--ds-lip), 0 30px 60px -36px rgba(0, 0, 0, 0.85);
}

/* The lines between things in the kit's hairline: the facts, the words, the roles. */
body.ds-root :is(.facts, .def, .roles, .role),
body.ds-root .fact + .fact {
  border-color: var(--ds-line);
}

/* How it works: the track between the steps a plain line, each step's well parted from it by a ring of the page's
   ground (styles.css .tstep-node), and the drawings on the grid alone, at the panels' corners. */
body.ds-root .tsteps::before {
  background: var(--ds-line-2);
}

body.ds-root .tstep-node {
  box-shadow: inset var(--ds-lip), 0 0 0 6px var(--bg);
}

body.ds-root .tstep-vis {
  border-color: var(--ds-line);
  border-radius: 16px;
  background-color: var(--ds-inset);
  background-image: var(--grid-lines);
  background-size: 28px 28px, 28px 28px;
}

/* From 1200px a step takes the page's width: its words on the left at their measure, its drawing or its prices on
   the right, from the step's top. The rows the words do not fill take no room, and the last takes what the drawing
   needs past the words, so the words keep their own spacing. */
@media (min-width: 1200px) {
  body.ds-root .tstep-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(8, auto) 1fr;
    column-gap: clamp(40px, 4vw, 64px);
    max-width: none;
  }

  body.ds-root .tstep-body > * {
    grid-column: 1;
  }

  body.ds-root .tstep-body > :is(.tstep-vis, .pp) {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    margin-top: 0;
  }
}

body.ds-root .rule::before {
  background: var(--ds-green);
}

body.ds-root .role-state {
  border-color: var(--ds-line-2);
  background: var(--ds-inset);
  color: var(--ds-muted);
}

/* The affiliates: the four cards beside the drawing of the dashboard they describe from 1100px, the drawing under
   them where they take the width; the drawing flat on its grid at the panels' corners, its bars in the kit's violet. */
body.ds-root .aff-get {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 1100px) {
  body.ds-root .aff-get {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }

  body.ds-root .aff-get .aff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.ds-root .aff-vis {
  border-color: var(--ds-line-2);
  border-radius: 16px;
  background-color: var(--ds-inset);
  background-image: var(--grid-lines);
  background-size: 28px 28px, 28px 28px;
  box-shadow: inset var(--ds-lip);
}

body.ds-root .aff-bar {
  background: var(--ds-green);
}

body.ds-root .aff-step-n {
  background: var(--ds-green);
  color: var(--ds-ink);
}

/* Made for: each platform's mark before its name, in its brand's colours (the envelope in the name's); whose marks
   they are on the line under them. */
body.ds-root .aff-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--ds-line-2);
  background: var(--ds-inset);
}

body.ds-root .aff-glyph {
  flex: none;
  width: 20px;
  height: 20px;
}

body.ds-root .aff-who-note {
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-faint);
}

/* The privacy note and the policies: the note's measure and type (styles.css .prose), the way back clear of the last
   paragraph, and a policy's "Information needed" in the draft notice's amber (styles.css .terms-draft), its heading
   the box's own. */
body.ds-root .policy .pill {
  margin-bottom: 18px;
}

body.ds-root .policy-back {
  margin-top: 48px;
}

body.ds-root .info-needed {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px dashed rgba(255, 201, 71, 0.4);
  border-radius: 12px;
  background: rgba(255, 201, 71, 0.06);
}

body.ds-root .prose .info-needed h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

body.ds-root .prose .info-needed :is(p, ul) {
  color: var(--ds-body);
}

body.ds-root .prose .info-needed p {
  margin-top: 6px;
}

body.ds-root .prose .info-needed ul {
  margin-top: 8px;
}

/* The rules' tables, each a kit card: its hairline, brighter along the top edge, on the raised surface with the lip,
   at 16px corners and with no lift. The names that stay in view as the figures scroll sit on the card's surface, and
   take the row's tint as a colour of their own, as styles.css .rules has them do. */
body.ds-root .compare {
  border-color: var(--ds-line);
  border-top-color: var(--ds-line-2);
  border-radius: 16px;
  background: var(--ds-card);
  box-shadow: inset var(--ds-lip);
}

body.ds-root .rules thead th:first-child,
body.ds-root .rules tbody th {
  background: var(--ds-card);
}

body.ds-root .rules tbody tr:hover > th {
  background: color-mix(in srgb, var(--ds-card), #fff 3.5%);
}

/* The footer's wordmark at poster size is only drawn: its raised dot reaches up over the row of links, so a press
   there goes through to the link under it (Careers, on a desktop). */
body.ds-root .ds-footer .footer-word {
  pointer-events: none;
}

/* A page's last sign-up is where the footer's button goes (chrome.ts kitFooter): the form, whose field is gone once the
   sign-up is done. The form lands where its field would (styles.css .field). */
body.ds-root:not(.home) .final .signup {
  scroll-margin-top: max(calc(var(--header-h) + 24px), 40vh);
}

/* How it works and the rules, explained with figures (pages/sections/ruleVisuals.ts): each step of how it works opens
   on one sentence, then its key figures as small cards, a few short points and the table or the drawing it is about;
   the rules page sets each rule as a card, its drawing or its table over its words where the card is narrow and beside
   them where a wide card has the room. A drawing of one possible course says "Example" in a corner, as the home page's
   drawings do; a figure of the plan does not. The drawings stretch to their boxes, their labels in HTML at the points
   the drawings leave them. */
body.ds-root .tstep-body p.tstep-lead {
  margin-top: 12px;
  color: var(--ds-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

body.ds-root:not(.home) .vig-tag {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 2px 8px;
  border: 1px solid var(--ds-line-2);
  border-radius: 6px;
  background: rgba(7, 5, 15, 0.72);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

/* A drawing keyed along its top has its tag in the top corner, its key clear of it. */
body.ds-root:not(.home) :is(.rv-stack, .rv-card__fig--top) .vig-tag {
  top: 14px;
  right: 14px;
  bottom: auto;
}

body.ds-root:not(.home) :is(.rv-stack, .rv-card__fig--top) .rv-key {
  padding-right: 84px;
}

/* The max loss drawing in its card, boxed as the home page boxes it. */
body.ds-root .rv-card__fig.rv-card__fig--ml {
  display: block;
  padding: 20px 24px 22px;
  container: ml / inline-size;
}

body.ds-root:not(.home) .rv-card__fig--ml .vig-tag {
  top: 18px;
  right: 22px;
  bottom: auto;
}

/* The run of days over the payout's steps, one under the other in the step's drawing. */
body.ds-root .tstep-vis.rv-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
}

body.ds-root .rv-stack .timeline {
  align-self: center;
}

/* Key figures: a label over its value, a note under a value that needs one. */
body.ds-root .rv-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
}

body.ds-root .rv-fig {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-top-color: var(--ds-line-2);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: inset var(--ds-lip);
}

body.ds-root .rv-fig dt {
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

body.ds-root .rv-fig dd {
  margin: 0;
  color: var(--ds-white);
  font-size: 20px;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

body.ds-root .rv-fig dd.rv-fig__note {
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

@media (max-width: 379px) {
  body.ds-root .rv-figs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The small tables: a row for each size, the figures right-aligned in the kit's tabular numbers. A table wider than
   its box scrolls inside it. */
body.ds-root .rv-tablebox {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-top-color: var(--ds-line-2);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: inset var(--ds-lip);
}

body.ds-root .rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

body.ds-root .rv-table :is(th, td) {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-line);
  text-align: right;
  white-space: nowrap;
}

body.ds-root .rv-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

body.ds-root .rv-table :is(th, td):first-child {
  text-align: left;
}

body.ds-root .rv-table thead th {
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 600;
  vertical-align: bottom;
  white-space: normal;
}

body.ds-root .rv-table tbody th {
  color: var(--ds-body);
  font-weight: 600;
}

body.ds-root .rv-table td {
  color: var(--ds-white);
  font-weight: 500;
}

body.ds-root .rv-table strong {
  color: var(--ds-white);
  font-weight: 650;
}

/* A reset beside a new evaluation: a table for each programme under its name, the bar the reset's part of the new
   evaluation's fee, left out where the table is too narrow for it. */
body.ds-root .rv-reset {
  display: grid;
  gap: 14px;
  width: 100%;
  container: rvreset / inline-size;
}

body.ds-root .rv-reset .rv-tablebox {
  margin-top: 0;
}

body.ds-root .rv-table--reset caption {
  padding: 12px 14px 0;
  color: var(--ds-white);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  text-align: left;
}

body.ds-root .rv-table .rv-bar-cell {
  width: 40%;
}

body.ds-root .rv-table.rv-table--reset td:last-child {
  color: var(--ds-muted);
}

@container rvreset (max-width: 359px) {
  body.ds-root .rv-table .rv-bar-cell {
    display: none;
  }

  body.ds-root .rv-table.rv-table--reset :is(th, td) {
    padding-inline: 10px;
  }
}

/* A bar of a figure out of a larger one, drawn only (its figures are written beside it); a tick where it marks one. */
body.ds-root .rv-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
}

body.ds-root .rv-bar svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.ds-root .rv-bar__track {
  fill: rgba(255, 255, 255, 0.08);
}

body.ds-root .rv-bar__fill {
  fill: var(--ds-green);
}

body.ds-root .rv-bar__mark {
  fill: none;
  stroke: var(--ds-white);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* What a funded account trades, and what it never does. */
body.ds-root .rv-trade {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  text-align: left;
}

body.ds-root .rv-trade p {
  margin: 0;
  color: var(--ds-body);
  font-size: 14.5px;
  line-height: 1.55;
}

body.ds-root .rv-trade p.rv-trade__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-white);
  font-size: 15px;
  font-weight: 650;
  line-height: 22px;
}

body.ds-root .rv-trade p.rv-trade__head--never {
  margin-top: 8px;
}

body.ds-root .rv-trade__head .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--up-text);
}

body.ds-root .rv-trade__head--never .ic {
  color: #fb7185;
}

body.ds-root .rv-trade p.rv-trade__foot {
  color: var(--ds-faint);
  font-size: 13px;
}

body.ds-root .rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .rv-chips li {
  padding: 4px 12px;
  border: 1px solid var(--ds-line-2);
  border-radius: 999px;
  background: var(--ds-card);
  color: var(--ds-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

body.ds-root .rv-ticks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .rv-ticks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--ds-body);
  font-size: 14.5px;
  line-height: 20px;
}

body.ds-root .rv-ticks .ic {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--up-text);
}

body.ds-root .rv-ticks--never .ic {
  color: #fb7185;
}

/* The rules as cards: one column, two from 900px, a wide card across both; from 1100px a wide card's words and its
   drawing side by side. */
body.ds-root .rv-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .rv-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--ds-line);
  border-top-color: var(--ds-line-2);
  border-radius: 16px;
  background: var(--ds-card);
  box-shadow: inset var(--ds-lip);
}

body.ds-root .rv-card__fig {
  position: relative;
  order: -1;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 28px 18px;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background-color: var(--ds-inset);
  background-image: var(--grid-lines);
  background-size: 28px 28px, 28px 28px;
}

body.ds-root .rv-card__text {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

body.ds-root .rv-card__text h3 {
  margin: 0;
  color: var(--ds-white);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.ds-root .rv-card__text > p {
  margin: 0;
  color: var(--ds-body);
  font-size: 15px;
  line-height: 1.6;
}

body.ds-root .rv-card__text strong {
  color: var(--ds-white);
  font-weight: 600;
}

body.ds-root .rv-card__text > p.rv-card__for {
  color: var(--ds-faint);
  font-size: 13px;
  line-height: 1.5;
}

body.ds-root .rv-card .ds-rule {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.ds-root .rv-card .rv-tablebox {
  margin-top: 0;
}

@media (min-width: 900px) {
  body.ds-root .rv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  body.ds-root .rv-card--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  body.ds-root .rv-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px;
    padding: 24px;
  }

  body.ds-root .rv-card--wide .rv-card__fig {
    order: 0;
  }
}

@media (max-width: 599px) {
  body.ds-root .rv-card {
    padding: 16px;
  }

  body.ds-root .rv-card__fig {
    padding: 24px 14px;
  }

  body.ds-root .rv-card__fig.rv-card__fig--ml {
    padding: 14px 14px 16px;
  }

  body.ds-root:not(.home) .rv-card__fig--ml .vig-tag {
    top: 12px;
    right: 12px;
  }
}

/* One figure for each size, side by side under what it is: two to a row on a phone, all in a row from 480px. */
body.ds-root .rv-sizes {
  display: grid;
  gap: 8px;
}

body.ds-root p.rv-sizes__head {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

body.ds-root .rv-sizes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

body.ds-root .rv-sizes__list > div {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  background: var(--ds-inset);
}

@media (min-width: 480px) {
  body.ds-root .rv-sizes__list > div {
    flex-basis: 0;
  }
}

body.ds-root .rv-sizes__list dt {
  color: var(--ds-faint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 16px;
}

body.ds-root .rv-sizes__list dd {
  margin: 0;
  color: var(--ds-white);
  font-size: 16px;
  font-weight: 650;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

/* A drawing's key: a swatch before each name, in the colour the drawing draws it in. */
body.ds-root p.rv-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 12px;
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

body.ds-root .rv-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.ds-root .rv-key span::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

body.ds-root .rv-key .rv-key__value::before {
  background: var(--violet-mid);
}

body.ds-root .rv-key .rv-key__open::before {
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.5);
  border-radius: 0;
}

body.ds-root .rv-key .rv-key__floor::before {
  background: #fb7185;
}

body.ds-root .rv-key :is(.rv-key__green, .rv-key__up, .rv-key__down)::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

body.ds-root .rv-key .rv-key__green::before {
  border: 1px solid rgba(34, 197, 94, 0.7);
  background: rgba(34, 197, 94, 0.35);
}

body.ds-root .rv-key .rv-key__up::before {
  background: rgba(255, 255, 255, 0.22);
}

body.ds-root .rv-key .rv-key__down::before {
  background: rgba(251, 113, 133, 0.55);
}

/* A day's loss limit: two UTC days, the limit set again at 00:00 UTC under the day's opening equity. */
body.ds-root .rv-day {
  --rv-day-h: 180px;
  width: 100%;
}

body.ds-root .rv-day__plot {
  position: relative;
  height: var(--rv-day-h);
  margin-bottom: 26px;
}

body.ds-root .rv-day__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.ds-root .rv-day__svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

body.ds-root .rv-day__svg .rv-day__zone {
  fill: url(#rv-day-zone);
  stroke: none;
}

body.ds-root .rv-day__svg .rv-day__split {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-dasharray: 3 5;
  stroke-width: 1;
}

body.ds-root .rv-day__svg .rv-day__open {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-dasharray: 4 5;
  stroke-width: 1;
}

body.ds-root .rv-day__svg .rv-day__gap {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
}

body.ds-root .rv-day__svg .rv-day__floor {
  stroke: #fb7185;
  stroke-linejoin: round;
  stroke-width: 2;
}

body.ds-root .rv-day__svg .rv-day__value {
  stroke: var(--violet-mid);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

body.ds-root .rv-day__d {
  position: absolute;
  top: 6px;
  color: var(--ds-faint);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

body.ds-root .rv-day__d--1 {
  left: 8px;
}

body.ds-root .rv-day__d--2 {
  left: calc(50% + 8px);
}

body.ds-root .rv-day__gap-tag {
  position: absolute;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(9, 7, 17, 0.84);
  color: var(--ds-white);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 18px;
  transform: translateY(-50%);
  white-space: nowrap;
}

body.ds-root .rv-day__gap-tag--1 {
  top: 70%;
  left: calc(1.4% + 8px);
}

body.ds-root .rv-day__gap-tag--2 {
  top: 60%;
  left: calc(51.4% + 8px);
}

body.ds-root .rv-day__utc {
  position: absolute;
  top: 100%;
  left: 50%;
  color: var(--ds-faint);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  transform: translate(-50%, 6px);
  white-space: nowrap;
}

@media (max-width: 599px) {
  body.ds-root .rv-day {
    --rv-day-h: 150px;
  }
}

/* The payout gate: a run of days over the line a green day closes above, each day's number under its bar, and how
   far the run takes each programme towards its gate. */
body.ds-root .rv-gate {
  width: 100%;
  container: rvgate / inline-size;
}

body.ds-root .rv-gate__plot {
  position: relative;
  height: 132px;
}

body.ds-root .rv-gate__svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100% - 52px);
  height: 100%;
  overflow: visible;
}

body.ds-root .rv-gate__svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

body.ds-root .rv-gate__svg .rv-gate__base {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}

body.ds-root .rv-gate__svg .rv-gate__line {
  stroke: rgba(134, 239, 172, 0.6);
  stroke-dasharray: 4 5;
  stroke-width: 1.25;
}

body.ds-root .rv-gate__bar--green {
  fill: rgba(34, 197, 94, 0.35);
  stroke: rgba(34, 197, 94, 0.7);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body.ds-root .rv-gate__bar--up {
  fill: rgba(255, 255, 255, 0.16);
}

body.ds-root .rv-gate__bar--down {
  fill: rgba(251, 113, 133, 0.45);
}

body.ds-root .rv-gate__pct {
  position: absolute;
  top: 45%;
  right: 0;
  color: var(--up-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 16px;
  transform: translateY(-50%);
}

body.ds-root .rv-gate__n {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 8px 0 0;
  padding: 0 52px 0 0;
  color: var(--ds-faint);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  list-style: none;
  text-align: center;
}

body.ds-root .rv-gate__tracks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
}

body.ds-root .rv-track {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}

body.ds-root p.rv-track__name {
  margin: 0;
  color: var(--ds-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

body.ds-root .rv-track__name span {
  display: block;
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 500;
}

body.ds-root .rv-track__boxes {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .rv-track__boxes li {
  flex: 0 1 22px;
  height: 12px;
  border: 1px solid var(--ds-line-2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}

body.ds-root .rv-track__boxes li.is-on {
  border-color: rgba(34, 197, 94, 0.7);
  background: rgba(34, 197, 94, 0.35);
}

body.ds-root p.rv-track__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

body.ds-root .rv-track.is-met p.rv-track__state {
  color: var(--up-text);
}

body.ds-root .rv-track__state .ic {
  width: 14px;
  height: 14px;
}

@container rvgate (max-width: 479px) {
  body.ds-root .rv-gate__n span {
    display: none;
  }

  body.ds-root .rv-track {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  body.ds-root p.rv-track__name {
    grid-column: 1 / -1;
  }

  body.ds-root .rv-track__name span {
    display: inline;
    margin-left: 8px;
  }
}

/* The payout caps: each programme's, on one scale, the minimum payout ticked on every bar and before its figure. */
body.ds-root .rv-caps {
  display: grid;
  gap: 18px;
  width: 100%;
  container: rvcaps / inline-size;
  text-align: left;
}

body.ds-root p.rv-caps__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 10px;
  color: var(--ds-white);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
}

body.ds-root .rv-caps__head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 500;
}

body.ds-root .rv-caps__head span::before {
  content: "";
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: var(--ds-white);
}

body.ds-root .rv-caps__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ds-root .rv-caps__list li {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr) 4.5em;
  align-items: center;
  gap: 12px;
  color: var(--ds-body);
  font-size: 13px;
  line-height: 18px;
}

body.ds-root .rv-caps__list b {
  color: var(--ds-white);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

@container rvcaps (max-width: 399px) {
  body.ds-root .rv-caps__list li {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  body.ds-root .rv-caps__list .rv-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* The programmes side by side, rule by rule: the words wrap, a rule they share is one cell across them. */
body.ds-root .rv-tablebox--compare {
  margin-top: 0;
}

body.ds-root .rv-table.rv-compare :is(th, td) {
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

body.ds-root .rv-table.rv-compare thead th {
  color: var(--ds-white);
  font-size: 15px;
  font-weight: 650;
  vertical-align: bottom;
}

body.ds-root .rv-table.rv-compare tbody th {
  width: 22%;
  color: var(--ds-muted);
}

body.ds-root .rv-table.rv-compare td {
  width: 39%;
}

body.ds-root .rv-compare__note {
  display: block;
  margin-top: 2px;
  color: var(--ds-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 17px;
}

body.ds-root .rv-table.rv-compare .rv-compare__same {
  text-align: center;
}

@media (max-width: 599px) {
  body.ds-root .rv-table :is(th, td) {
    padding: 9px 10px;
  }

  body.ds-root .rv-table.rv-compare :is(th, td) {
    padding: 10px;
    font-size: 13px;
  }

  body.ds-root .rv-table.rv-compare thead th {
    font-size: 14px;
  }
}

/* ---------- The information pages' finer details (the detail pass of 2026-10-26) ----------
   Small additions that take no room and move nothing: the drawings' panels lit along their top edge as the panels
   round them are, the affiliates' five steps joined through the gaps between them, the kit's lavender on a
   question's mark under the pointer, a violet light behind the closing panel's words, and the policies' contour
   lines in the margin a wide screen leaves beside them. Each layer is a shadow or a pseudo-element under the
   content, with no pointer events; the home page keeps its own look, and only the shared hover reaches it. */

/* The drawings' panels (how it works' .tstep-vis, the rules' .rv-card__fig): the kit's lip along the top edge and
   the line brighter there, as .ds-panel, .rv-card and .aff-vis draw theirs. */
body.ds-root :is(.tstep-vis, .rv-card__fig) {
  border-top-color: var(--ds-line-2);
  box-shadow: inset var(--ds-lip);
}

/* The affiliates' five steps: a hairline from each step to the next through the 12px gap between them (styles.css
   .aff-steps), in line with their numbers. Stacked, it drops from one card to the next under the numbers; on one row
   from 1100px it crosses the gap at their height. */
body.ds-root .aff-step {
  position: relative;
}

body.ds-root .aff-step + .aff-step::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 38px;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--ds-green) 45%, transparent);
  pointer-events: none;
}

@media (min-width: 1100px) {
  body.ds-root .aff-step + .aff-step::before {
    top: 38px;
    right: calc(100% + 1px);
    bottom: auto;
    left: auto;
    width: 12px;
    height: 1px;
  }
}

/* A question under the pointer: its mark takes a little of the kit's lavender behind the plus, on the border
   styles.css already brightens, with the transition it already has. */
body.ds-root .qa-q:hover .qa-icon {
  border-color: color-mix(in srgb, var(--ds-green) 40%, transparent);
  background: color-mix(in srgb, var(--ds-green) 12%, transparent);
}

/* The closing panel on the information pages: a soft violet light behind its words, over the scene and under them,
   and the panel's own light on the page beneath it. */
body.ds-root:not(.home) .final-panel {
  box-shadow: 0 0 80px -20px rgba(139, 92, 246, 0.18), 0 24px 72px -32px rgba(139, 92, 246, 0.28);
}

body.ds-root:not(.home) .final-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 55%, rgba(139, 92, 246, 0.16), transparent 70%);
}

/* The privacy note and the policies from 1200px: the contour lines (brand/contours.svg, as the home page's questions
   have them) in the margin left of the words, under them and faded out before the column, past the left edge where
   the margin is narrower than they are (nothing scrolls that way). */
@media (min-width: 1200px) {
  body.ds-root .prose {
    position: relative;
    isolation: isolate;
  }

  body.ds-root .prose::before {
    content: '';
    position: absolute;
    top: var(--header-h);
    right: 100%;
    z-index: -1;
    width: 440px;
    height: 560px;
    background: url(/brand/contours.svg) 100% 50% / 720px 560px no-repeat;
    opacity: 0.09;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 55% 45%, #000 15%, transparent 100%);
    mask-image: radial-gradient(ellipse 55% 50% at 55% 45%, #000 15%, transparent 100%);
  }
}