/*
  The public site's one stylesheet (the memetrader.io brand, in its terminal palette).

  It dresses BOTH the static pages in this directory and the pages the site service renders (services/site/src/html.ts:
  the gate's password form and the answers to a sign-up posted without JavaScript), which link this exact file from
  SITE_DOMAIN. So every class html.ts uses is styled here, and services/site/test/edge.test.ts holds us to that.

  Nothing here is fetched from another company: the three fonts are served from this origin (/fonts), which is what the
  privacy note promises ("no web fonts from elsewhere") and what the edge's Content-Security-Policy allows.

  One system. Type: Geist for everything a person reads, set tight at headline size; the brand's rounded display face
  only for the wordmark and the account sizes on the cards; Nunito for the hero's one line under the wordmark.
  Colour: a near-black page, near-neutral surfaces, and violet used where it means something -- the accent, the
  selected thing, the second line of a headline. Surfaces: most sections sit on the page itself; a panel is used where
  a thing is a thing (an account, a rule set, a screen). Motion: sections rise in once; hover lifts are small; nothing
  moves on its own but the featured card's edge, and the launch reward card when it turns over.
*/

/* ---- fonts ------------------------------------------------------------------------------------------------------ */

/* All three are variable fonts served from this origin, latin subset only. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/fonts/baloo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ----------------------------------------------------------------------------------------------------- */

:root {
  --violet: #7C3AED;
  --violet-dark: #6D28D9;
  --violet-light: #C4B5FD;
  --violet-mid: #A78BFA;
  --white: #FFFFFF;
  --offwhite: #F3F0FA;
  --gold: #FFC947;
  --ink: #120E1C;
  --up: #22C55E;
  --up-text: #86EFAC;
  --down: #EF4444;

  /* The page is the hero plate's own black; the surfaces step up from it with only a trace of violet. */
  --bg: #07050F;
  --surface-0: #0C0A15;
  --surface-1: #141120;
  --surface-2: #211B33;
  --border: #2C2148;

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.13);
  --hairline-lit: rgba(255, 255, 255, 0.12);

  --text: #F3F0FA;
  --muted: #ADA8BF;
  --faint: #8D87A3;

  --body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Baloo 2', 'Geist', sans-serif;
  --round: 'Nunito', 'Geist', sans-serif;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Elevation: lit top edge + contact line + dark ambient with negative spread. Only the accent glows. */
  --lift-1: inset 0 1px 0 var(--hairline-lit), 0 1px 1px rgba(0, 0, 0, 0.5), 0 12px 24px -12px rgba(0, 0, 0, 0.6);
  --lift-2: inset 0 1px 0 var(--hairline-lit), 0 1px 1px rgba(0, 0, 0, 0.5), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --lift-3: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.75);
  --well: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.05);
  --ring-focus: 0 0 0 1px var(--violet), 0 0 0 4px rgba(124, 58, 237, 0.45);
  /* The faint grid the small interfaces are drawn on. */
  --grid-lines: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  --gutter: 20px;
  --page-max: 1240px;
  --section-y: clamp(64px, 7.5vw, 104px);
  --bar-h: 68px;
  --promo-h: 40px;
  --header-h: calc(var(--bar-h) + var(--promo-h));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- base ------------------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--white);
  font-family: var(--body);
  text-wrap: balance;
}

/* A section's claim: Geist, tight, and the second line in the accent's gradient. */
h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.042em;
}

h3 {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: var(--violet-light);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 160ms ease-out;
}

a:hover {
  color: var(--white);
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

/* The second line of a claim, in the accent. Each heading carries at most one. */
.grad {
  display: block;
  background: linear-gradient(90deg, #D8CCFE 0%, #A78BFA 55%, #8B5CF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The line icons: one 24px set, stroked in the colour of the text around them. */
.ic {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic--check {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  color: var(--violet-light);
}

.ic--inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -3px;
}

/* The brand glyphs (X, Instagram, Discord): filled, not stroked. */
.brand-ic {
  flex: none;
  width: 18px;
  height: 18px;
}

/* ---- layout ----------------------------------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The service's own pages (html.ts): one card, centred. */
.page--narrow {
  max-width: 592px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-block: 48px;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 88px);
}

/* A section's head: the pill, the claim, the lede. */
.sec-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

.sec-head .pill {
  margin-bottom: 20px;
}

.sec-lede {
  max-width: 600px;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.sec-head--center .sec-lede {
  margin-inline: auto;
}

/* The small label above a claim, as a pill. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 181, 253, 0.24);
  background: rgba(124, 58, 237, 0.1);
  color: #DDD3FE;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}

.pill--soft {
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

/* The small caps over a dialog's or a card's title. */
.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.9);
}

.text-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--violet-light);
  text-decoration: none;
}

.text-link:hover {
  color: var(--white);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 16px;
}

/* Sections rise in as they scroll into view. Only under html.js (waitlist.js sets it): with no script, everything is
   simply there. A from-only keyframe, so once it has run nothing holds a transform against a hover. */
.js .reveal {
  opacity: 0;
}

.js .reveal.is-in {
  opacity: 1;
  animation: rise 800ms var(--ease) backwards;
}

.js .stagger.reveal {
  opacity: 1;
  animation: none;
}

.js .stagger.reveal > * {
  opacity: 0;
}

.js .stagger.reveal.is-in > * {
  opacity: 1;
  animation: rise 700ms var(--ease) backwards;
}

.js .stagger.reveal.is-in > :nth-child(2) {
  animation-delay: 80ms;
}

.js .stagger.reveal.is-in > :nth-child(3) {
  animation-delay: 160ms;
}

.js .stagger.reveal.is-in > :nth-child(4) {
  animation-delay: 240ms;
}

.js .stagger.reveal.is-in > :nth-child(5) {
  animation-delay: 320ms;
}

.js .stagger.reveal.is-in > :nth-child(6) {
  animation-delay: 400ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ---- the header: the promo bar, then the bar with the wordmark, the links and the way in ----------------------- */

/* Over the page rather than in it, so the hero's plate runs up behind it. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  transition: background-color 240ms ease-out, box-shadow 240ms ease-out;
}

/* waitlist.js sets this once the page has scrolled past the top: the bar frosts over what passes under it. */
.site-header.is-stuck {
  background: rgba(7, 5, 15, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}

.promo {
  height: var(--promo-h);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.26), rgba(124, 58, 237, 0.1) 50%, rgba(124, 58, 237, 0.26));
  border-bottom: 1px solid rgba(196, 181, 253, 0.14);
}

.promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
}

.promo-text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--offwhite);
}

.promo-long,
.promo-short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-short {
  display: none;
}

.promo-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 201, 71, 0.18);
}

.promo-btn {
  flex: none;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease-out, transform 200ms var(--ease);
}

.promo-btn:hover {
  background: var(--offwhite);
  color: var(--ink);
  transform: translateY(-1px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--bar-h);
}

/* The logotype is the one place the display face goes under 40px: it is the logo. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.wordmark:hover {
  color: var(--white);
}

/* The brand's 3D mark, cut out on transparency: it carries its own light, so nothing is drawn around it. */
.mark {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.45));
}

.masthead {
  padding-block: 8px;
}

.nav {
  display: none;
  gap: 2px;
}

.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.site-header:not(.is-stuck) .nav-link {
  color: var(--offwhite);
}

.header-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}

.icon-link:hover {
  color: var(--white);
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.05);
}

.header-end .icon-link {
  display: none;
}

/* The phone's menu: a button that waitlist.js shows, opening a sheet under the bar. Without the script the links
   are in the footer. */
.menu-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  cursor: pointer;
}

.menu-toggle .ic {
  width: 20px;
  height: 20px;
}

.menu-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-close {
  display: block;
}

.menu {
  position: absolute;
  inset: 100% 0 auto;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--hairline);
  background: rgba(7, 5, 15, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.menu[hidden] {
  display: none;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 28px;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
}

.menu-arrow {
  width: 18px;
  height: 18px;
  color: var(--faint);
}

.menu-social {
  display: flex;
  gap: 10px;
  margin: 22px 0;
}

.menu-cta {
  width: 100%;
}

body.has-menu {
  overflow: hidden;
}

/* ---- buttons: one pill, four voices ------------------------------------------------------------------------------ */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--violet);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.4), 0 6px 14px -4px rgba(0, 0, 0, 0.5), 0 10px 28px -8px rgba(124, 58, 237, 0.6);
  transition: background-color 160ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms var(--ease);
}

.button:hover {
  background: var(--violet);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 2px rgba(0, 0, 0, 0.4), 0 10px 20px -6px rgba(0, 0, 0, 0.55), 0 16px 40px -10px rgba(124, 58, 237, 0.75);
}

.button:active {
  background: var(--violet-dark);
  transform: translateY(0) scale(0.985);
  transition-duration: 70ms;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.4);
}

.button:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

.button[disabled],
.button[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--muted);
  cursor: default;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* In the bar: no glow at rest. */
.button--sm {
  min-height: 38px;
  padding: 0 18px;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.4);
}

.button--sm:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(124, 58, 237, 0.6);
}

.button--lg {
  min-height: 60px;
  padding: 0 34px;
  font-size: 17px;
}

.button--light {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(26, 16, 37, 0.12), 0 1px 1px rgba(0, 0, 0, 0.35), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
}

.button--light:hover {
  background: var(--offwhite);
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(26, 16, 37, 0.12), 0 2px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -8px rgba(0, 0, 0, 0.7);
}

.button--light:active {
  background: #EDE6FA;
  box-shadow: inset 0 2px 4px rgba(26, 16, 37, 0.18), 0 1px 1px rgba(0, 0, 0, 0.35);
}

.button--frost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.button--frost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* The quiet way back (html.ts uses it). */
.button--quiet {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  color: var(--offwhite);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button--quiet:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--offwhite);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* ---- the hero --------------------------------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(24px, 4vw, 48px)) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  overflow-x: clip;
}

/* The lit void, sized to cover and dissolved into the page colour along its lower half. */
.hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* The wordmark at poster size, its breakout dot drawn in gold above the last "r". */
.hero-word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(44px, 13.3vw, 150px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 0 90px rgba(196, 181, 253, 0.22);
}

.hero-title {
  margin-top: 20px;
  font-family: var(--round);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--offwhite);
}

.hero-sub {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: #CBC1E8;
  text-wrap: pretty;
}
/* ---- the mobile app, under the sign-up: after launch a quiet note (.hero-mobile); on the waitlist homepage the line
   and the two stores' official badges (.hero-stores) ------------------------------------------------------------- */

/* The badges are the stores' own, unaltered, at the 40px they ask for and with their clear space between them. No app
   is listed yet, so they are pictures, not links. One row on a wide screen; on a phone the line sits above them. */
.hero-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 18px auto 0;
}

.hero-stores-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
}

.hero-stores-soon .ic {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.hero-stores-badges {
  display: flex;
  gap: 12px;
}

.hero-stores-badges img {
  display: block;
  width: auto;
  height: 40px;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.025);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
}

.hero-mobile .ic {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

/* With the countdown on, the reward line and the store badges share one row on wide screens (on phones they stack, as
   without it), and the facts strip sits a little closer: a laptop's first screen still ends on the facts strip. */
.signup.is-done + .hero-notes .hero-reward {
  display: none;
}

@media (min-width: 900px) {
  .hero-notes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 12px;
  }

  .hero-notes .hero-reward,
  .hero-notes .hero-stores {
    margin: 0;
  }

  .hero--countdown .lc {
    margin-top: 20px;
  }

  /* 18px, not 26: the badges' row stands 8px taller than the note it replaced. */
  .hero--countdown .facts--hero {
    margin-top: 18px;
  }
}

/* ---- the launch countdown (the site configuration's; off until a launch date is set) ---------------------------- */

/* Plain and calm, with nothing drawn around it: one quiet line (the heading and the moment), then the clock -- big
   white numbers, a small label under each. It stays short, so a laptop's first screen still ends on the facts strip. */
.lc {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
}

.lc [hidden] {
  display: none;
}

.lc-line {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

.lc-title {
  color: #CBC1E8;
}

.lc-sep {
  margin: 0 2px;
  color: var(--faint);
}

/* Every cell as wide as the widest, so the numbers sit evenly however long their labels are. */
.lc-clock {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: clamp(22px, 3vw, 36px);
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
}

.lc-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.lc-num {
  font-size: clamp(40px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.lc-unit {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--faint);
}

.lc-body {
  max-width: 560px;
  margin: 14px auto 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}

.lc-ended {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--offwhite);
}

/* Phones: the heading on one line and the moment under it, rather than broken wherever the width runs out. */
@media (max-width: 599px) {
  .lc-sep {
    display: none;
  }

  .lc-when {
    display: block;
  }
}

/* ---- the facts every account shares: a strip under the hero, and on the how-it-works page --------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.facts--hero {
  margin-top: clamp(40px, 6vw, 72px);
}

.fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 12px;
  text-align: left;
}

.fact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--violet-light);
}

.fact-icon .ic {
  width: 22px;
  height: 22px;
}

.fact-text {
  min-width: 0;
}

.fact-value {
  display: block;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
}

.fact-label {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* ---- the accounts: tabs, cards, and the rules of the selected one ----------------------------------------------- */

.accounts-sec {
  background: radial-gradient(60% 420px at 50% 0%, rgba(124, 58, 237, 0.14), transparent 70%);
}

.accounts-sec .sec-head {
  margin-bottom: 36px;
}

/* The card that is open in the rules below wears the accent's ring (the script makes cards selectable). */
.js .account-card {
  cursor: pointer;
}

.account.is-selected .account-card {
  border-color: rgba(196, 181, 253, 0.65);
  box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.4), var(--lift-3), 0 30px 80px -30px rgba(124, 58, 237, 0.6);
}

/* Every rule of the selected account beside what it costs: one panel, two halves. */
.config {
  margin-top: 40px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--lift-2);
}

.config-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hairline);
}

.config-h {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--white);
}

.phase {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(7, 5, 15, 0.6);
}

.phase[hidden] {
  display: none;
}

.phase-btn {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.phase-btn:hover {
  color: var(--white);
}

.phase-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
}

.config-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.config-panel[hidden] {
  display: none;
}

.config-rules {
  padding: 6px 24px 18px;
}

.rules-list {
  margin: 0;
}

/* Without the script both lists show, one under the other; with it, only the phase the switch names. */
.rules-list + .rules-list {
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline-strong);
}

.config.is-live .rules-list + .rules-list {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.config.is-live[data-phase="evaluation"] [data-phase-list="funded"],
.config.is-live[data-phase="funded"] [data-phase-list="evaluation"] {
  display: none;
}

.rl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.rl:last-child {
  border-bottom: 0;
}

.rl dt {
  font-size: 15px;
  font-weight: 500;
  color: var(--offwhite);
}

.rl-note {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--faint);
}

.rl dd {
  flex: none;
  max-width: 52%;
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.config-sum {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
}

.sum-prog {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-light);
}

.sum-size {
  margin-top: 8px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
}

.sum-size span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.included {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.included li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--offwhite);
}

.sum-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.sum-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}

.sum-line--muted {
  color: var(--muted);
}

.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.sum-total span {
  font-size: 15px;
  font-weight: 600;
  color: var(--offwhite);
}

.sum-total strong {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
}

.sum-cta {
  width: 100%;
  margin-top: 18px;
}

.sum-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
}

.firm-terms {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--faint);
}

/* == home: accounts == */
/*
  The accounts on the home page (sections/accounts.ts): the programme switch, the open programme's description and its
  sizes as one row of choices, and the selected account's panel -- its name, the evaluation's rules beside the funded
  account's, then its two fees, the call to action and how it is paid for (beside the rules on a wide screen, under them
  on a narrow one). Every rule here is under .acc, a class only that section carries, so no other page changes. Its
  surfaces, lines and accent are the home page's controls' own (the --hc-* properties body.home sets in "home:
  components"), and its button is the page's primary .button. The rules above for the account cards, the carousel, the
  old switch, the phase toggle and the summary match nothing on the page any more.

  A choice (a programme, a size) shows that it is chosen three ways, never by colour alone: a violet border, a tinted
  fill, and a ring that fills with a tick. With the script (waitlist.js) the two programmes share one place and so do
  the eight panels: each place is as tall as the tallest thing that can show in it, so nothing moves when another
  shows, and what shows fades in over what goes. A visitor who asked for less motion gets the change at once.
*/

.acc {
  /* The tinted fill of a chosen programme or size, the price's corner of the panel, and a definition's surface. */
  --acc-chosen: #1E1338;
  --acc-well: #0D0A18;
  --acc-tip: #1B1530;
}

/* The programme switch: two tabs in a well. The open one is raised: a violet border, a tinted fill, a filled ring. */
.acc .acc-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 440px);
  margin: 0 auto 22px;
  padding: 4px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.acc .acc-switch[hidden] {
  display: none;
}

.acc .acc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 56px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.acc .acc-tab:hover {
  background: var(--hc-raised);
  color: var(--white);
}

.acc .acc-tab[aria-selected="true"] {
  border-color: var(--violet);
  background: var(--acc-chosen);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Each programme's own pattern, inside its tab: Turbo's stepped chevrons (public/brand/acc-turbo.svg), Classic's
   calendar of day cells (acc-classic.svg), one stroke and one colour, told apart by shape. Faint, and only in the room
   between the words and the ring (a layer from 100px in to 40px short of the right edge, faded at both ends), so
   neither is ever drawn over; on a tab too narrow for that room there is none. A little clearer on the open tab. The
   tab keeps its size: the pattern is a layer of its own. */
.acc .acc-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.acc .acc-tab::before {
  content: '';
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
  left: 100px;
  z-index: -1;
  background-position: right center;
  background-repeat: repeat;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 75%, transparent);
  transition: opacity 160ms ease-out;
}

.acc .acc-tab--turbo::before {
  background-image: url(/brand/acc-turbo.svg);
  background-size: 16px 24px;
}

.acc .acc-tab--classic::before {
  background-image: url(/brand/acc-classic.svg);
  background-size: 14px 14px;
}

.acc .acc-tab:hover::before {
  opacity: 0.18;
}

.acc .acc-tab[aria-selected="true"]::before {
  opacity: 0.26;
}

.acc .acc-tab:focus-visible,
.acc .acc-size:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

/* The programmes' marks: one pair on the line icons' grid and stroke, a bolt and a calendar day. */
.acc .acc-mark {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acc .acc-tab .acc-mark {
  color: var(--faint);
  transition: color 160ms ease-out;
}

.acc .acc-tab[aria-selected="true"] .acc-mark {
  color: var(--violet-light);
}

.acc .acc-tab-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.1;
}

.acc .acc-tab-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.acc .acc-tab-note {
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--faint);
}

.acc .acc-tab[aria-selected="true"] .acc-tab-note {
  color: var(--muted);
}

/* The ring every choice carries: empty, or filled with a tick once it is the one chosen. */
.acc .acc-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--hc-outline);
  border-radius: 50%;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.acc .acc-check-ic {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--white);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.acc [aria-selected="true"] .acc-check,
.acc [aria-checked="true"] .acc-check {
  border-color: var(--violet);
  background: var(--violet);
}

.acc [aria-selected="true"] .acc-check-ic,
.acc [aria-checked="true"] .acc-check-ic {
  opacity: 1;
  transform: none;
}

/* The open programme: what it is built for, its tagline, and the three rules that set it apart. */
.acc .acc-prog-head {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.acc .acc-prog-name {
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* With the switch up, the tab names the programme; the heading stays for a screen reader. */
.acc .acc-programs.is-tabbed .acc-prog-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.acc .acc-kicker {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--violet-light);
}

.acc .acc-tagline {
  max-width: 600px;
  margin: 8px auto 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Its max loss, its daily loss limit and its payout gate: a row each on a phone, three cells side by side above. */
.acc .acc-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 18px 0 0;
  border-top: 1px solid var(--hc-line);
  text-align: left;
}

.acc .acc-facts {
  grid-template-columns: max-content minmax(0, 1fr);
}

.acc .acc-fact {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--hc-line);
}

.acc .acc-fact dt {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--faint);
}

.acc .acc-fact dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--offwhite);
  text-wrap: pretty;
}

.acc .acc-nobr {
  white-space: nowrap;
}

/* Without the script the programmes stand one under the other. */
.acc .acc-programs:not(.is-tabbed) .acc-prog + .acc-prog {
  margin-top: 40px;
}

/* With it they share one place, as tall as the taller, with the sizes at the same height in both: only the open one
   is seen, and it fades in over the other. */
.acc .acc-programs.is-tabbed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.acc .acc-programs.is-tabbed > .acc-switch {
  grid-row: 1;
}

.acc .acc-programs.is-tabbed > .acc-prog {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  grid-column: 1;
}

.acc .acc-programs.is-tabbed > .acc-prog[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
}

/* The fades, once the script has set the section up (is-ready). A programme's words are not the other's, so the one
   going goes at once and the one coming fades in; two panels share their rows, so one fades into the other and only
   the figures seem to change. */
.acc .acc-programs.is-ready > .acc-prog {
  transition: opacity 200ms ease-out, visibility 0s;
}

.acc .acc-programs.is-ready > .acc-prog[hidden] {
  transition: none;
}

.acc .acc-config.is-ready > .config-panel {
  transition: opacity 160ms ease-out, visibility 0s;
}

.acc .acc-config.is-ready > .config-panel[hidden] {
  transition: opacity 100ms ease-in, visibility 0s linear 100ms;
}

/* The shorter programme's three rules take up what its description is short of, so no gap opens under them. */
.acc .acc-programs.is-tabbed .acc-prog-head {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.acc .acc-programs.is-tabbed .acc-facts {
  flex: 1 0 auto;
}

.acc .acc-fact {
  align-items: center;
}

/* The sizes: one row of equal choices (two by two on a phone), each the size over its evaluation's price, with the
   ring at its corner. */
.acc .acc-pick {
  width: 100%;
  max-width: 760px;
  margin: 28px auto 0;
}

.acc .acc-pick[hidden] {
  display: none;
}

.acc .acc-label {
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}

.acc .acc-sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

.acc .acc-size-cell {
  position: relative;
  min-width: 0;
}

.acc .acc-size {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 84px;
  padding: 18px 12px 14px 15px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 12px;
  background: var(--hc-surface);
  color: var(--white);
  font-family: var(--body);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.acc .acc-size:hover {
  border-color: var(--hc-outline);
  background: var(--hc-raised);
}

.acc .acc-size[aria-checked="true"] {
  border-color: var(--violet);
  background: var(--acc-chosen);
  box-shadow: inset 0 0 0 1px var(--violet), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.acc .acc-size-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.acc .acc-size-amount {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.acc .acc-size-price {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.acc .acc-size[aria-checked="true"] .acc-size-price {
  color: var(--offwhite);
}

/* Each size over its own quiet artwork (public/brand/acct-<size>.webp), under a dark overlay that keeps the figures at
   strong contrast; the overlay lifts a little on hover and takes a violet cast once the size is chosen. Without the
   image the card is the plain surface below it. One 672px file per size: a card is at most 181px wide from 640px up
   and about 290px below, so the one file is sharp on a 2x screen and a 3x phone alike, and a 2x set would only cost
   the download. */
.acc .acc-size--10k { --acc-art: url("/brand/acct-10k.webp"); }
.acc .acc-size--25k { --acc-art: url("/brand/acct-25k.webp"); }
.acc .acc-size--50k { --acc-art: url("/brand/acct-50k.webp"); }
.acc .acc-size--100k { --acc-art: url("/brand/acct-100k.webp"); }

/* The artwork keeps its structure in its right third and its left quiet, so the overlay is darkest under the figures and
   thins toward the structure. */
.acc .acc-size[class*="acc-size--"] {
  min-height: 96px;
  background-color: var(--hc-surface);
  background-image: linear-gradient(100deg, rgba(10, 7, 20, 0.86) 0%, rgba(10, 7, 20, 0.62) 46%, rgba(10, 7, 20, 0.24) 100%), var(--acc-art, none);
  background-position: center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

.acc .acc-size[class*="acc-size--"]:hover {
  background-image: linear-gradient(100deg, rgba(10, 7, 20, 0.8) 0%, rgba(10, 7, 20, 0.52) 46%, rgba(10, 7, 20, 0.14) 100%), var(--acc-art, none);
}

.acc .acc-size[class*="acc-size--"][aria-checked="true"] {
  border-color: var(--violet);
  background-image: linear-gradient(100deg, rgba(26, 14, 54, 0.88) 0%, rgba(34, 17, 70, 0.6) 46%, rgba(56, 28, 112, 0.26) 100%), var(--acc-art, none);
  box-shadow: inset 0 0 0 1px var(--violet), 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 30px -20px rgba(124, 58, 237, 0.9);
}

/* The account with the lowest fee for each $1K in its programme says so on its top edge, the same on every size. */
.acc .acc-tag {
  position: absolute;
  top: 0;
  left: 12px;
  padding: 2px 9px;
  border: 1px solid rgba(196, 181, 253, 0.35);
  border-radius: var(--radius-pill);
  background: #221840;
  color: var(--violet-light);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  transform: translateY(-50%);
}

/*
  A definition: its term underlined with dots and marked with the sign, and the definition over the term, shown on
  hover (where there is one), on keyboard focus, or open after a tap or a click (is-open, from the script); Escape
  hides it (is-dismissed) until the pointer or the focus comes back. The pointer can move from the term onto it.
*/
.acc .acc-tipwrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  vertical-align: bottom;
}

.acc .acc-term {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: underline dotted rgba(196, 181, 253, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: help;
}

/* A target at least 24px tall, without making the line any taller (and, at the end of a line, no wider than it). */
.acc .acc-term::after {
  content: '';
  position: absolute;
  inset: -5px -4px;
}

.acc .acc-tipwrap--end .acc-term::after {
  right: 0;
}

.acc .acc-term:hover {
  text-decoration-color: var(--violet-light);
}

.acc .acc-term:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

.acc .acc-i {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--violet-light);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acc .acc-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -10px;
  z-index: 30;
  width: max-content;
  max-width: min(18rem, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--hc-outline);
  border-radius: 8px;
  background: var(--acc-tip);
  color: var(--offwhite);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  translate: 0 3px;
  transition: opacity 120ms ease-out, translate 120ms ease-out, visibility 0s linear 120ms;
}

/* Across the gap to its term, so the pointer can move onto it without it closing. */
.acc .acc-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 12px;
}

.acc .acc-tipwrap--end > .acc-tip {
  right: -10px;
  left: auto;
}

/* Best value's definition, over its size: against the size's outer edge, so it stays on the screen. */
.acc .acc-tip--size {
  bottom: calc(100% + 14px);
  left: 0;
  max-width: min(15rem, calc(100vw - 48px));
}

.acc .acc-size-cell:nth-child(even) > .acc-tip--size {
  right: 0;
  left: auto;
}

@media (hover: hover) {
  .acc .acc-tipwrap:not(.is-dismissed):hover > .acc-tip {
    visibility: visible;
    opacity: 1;
    translate: none;
    transition-delay: 0s;
  }

  /* A rule of its own: a browser without :has() drops only this one. */
  .acc .acc-size-cell--best:not(.is-dismissed):has(.acc-tag:hover) > .acc-tip {
    visibility: visible;
    opacity: 1;
    translate: none;
    transition-delay: 0s;
  }
}

.acc .acc-tipwrap:not(.is-dismissed) > .acc-term:focus-visible + .acc-tip,
.acc .acc-size-cell--best:not(.is-dismissed) > .acc-size:focus-visible + .acc-tip,
.acc .acc-tipwrap.is-open > .acc-tip {
  visibility: visible;
  opacity: 1;
  translate: none;
  transition-delay: 0s;
}

/* A panel or a programme that is not shown keeps its definitions closed. */
.acc .config-panel[hidden] .acc-tip,
.acc .acc-prog[hidden] .acc-tip {
  visibility: hidden;
}

/* The selected account: one panel; with the script, the eight in one place, as tall as the tallest. */
.acc .acc-config {
  margin-top: 32px;
  border: 1px solid var(--hc-line);
  border-radius: 20px;
  background: var(--hc-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 40px -28px rgba(0, 0, 0, 0.8);
}

.acc .config-panel {
  display: flex;
  flex-direction: column;
}

.acc .config-panel[hidden] {
  display: none;
}

.acc .acc-config.is-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.acc .acc-config.is-live > .config-panel {
  grid-area: 1 / 1;
}

.acc .acc-config.is-live > .config-panel[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
}

.acc .acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hc-line);
}

.acc .acc-head-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.acc .acc-name {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* The programme's mark beside the account's name, so the panel says which programme it is by shape as well. */
.acc .acc-name .acc-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -3px;
  color: var(--violet-light);
}

.acc .acc-name-note {
  font-size: 14px;
  color: var(--muted);
}

.acc .acc-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.acc .acc-all:hover {
  text-decoration: underline;
}

.acc .acc-all-ic {
  width: 16px;
  height: 16px;
}

.acc .acc-body {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

/* The evaluation's rules and the funded account's: each a labelled group, its heading with when it applies, then a
   rule and its value on a line. */
.acc .acc-group {
  padding: 18px 20px 6px;
}

.acc .acc-group + .acc-group {
  border-top: 1px solid var(--hc-line);
}

.acc .acc-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.acc .acc-group-h {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--violet-light);
}

.acc .acc-group-when {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--faint);
}

.acc .acc-list {
  margin: 10px 0 0;
}

.acc .acc-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hc-line);
}

.acc .acc-row dt {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--offwhite);
}

.acc .acc-val {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-align: right;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.acc .acc-note {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--faint);
}

/* The payout currencies' marks, at the size of the words they stand beside. */
.acc .acc-coin {
  white-space: nowrap;
}

.acc .acc-coin-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* What it costs: the evaluation fee, large, the activation fee directly under it with when it is charged, the button,
   and what it can be paid with. */
.acc .acc-buy {
  padding: 22px 20px 24px;
  border-top: 1px solid var(--hc-line);
  border-radius: 0 0 19px 19px;
  background: var(--acc-well);
}

.acc .acc-fees {
  margin: 0;
}

/* Each fee: its label and figure (or chip) on a grid of two columns, what it means under them. */
.acc .acc-fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
}

/* The label's line is as tall as the "Best value" chip on every account, so the price sits at one height in all. */
.acc .acc-fee--eval {
  grid-template-rows: minmax(24px, auto) auto auto;
  grid-template-areas: 'label tag' 'value value' 'note note';
  align-items: center;
}

.acc .acc-fee--eval dt {
  grid-area: label;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

.acc .acc-fee-tag {
  grid-area: tag;
  margin: 0;
}

.acc .acc-fee--eval .acc-fee-val {
  grid-area: value;
  margin: 8px 0 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.acc .acc-fee--eval .acc-fee-note {
  grid-area: note;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* "Best value" beside the fee's label, a small chip whose definition opens over it. */
.acc .acc-tipwrap--chip .acc-term {
  min-height: 24px;
  padding: 0 8px 0 9px;
  border: 1px solid rgba(196, 181, 253, 0.35);
  border-radius: var(--radius-pill);
  background: #221840;
  color: var(--violet-light);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.acc .acc-tipwrap--chip .acc-term:hover {
  border-color: rgba(196, 181, 253, 0.6);
}

.acc .acc-tipwrap--chip .acc-i {
  width: 14px;
  height: 14px;
}

.acc .acc-fee--act {
  align-items: baseline;
  column-gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hc-line);
}

.acc .acc-fee--act dt {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}

.acc .acc-fee--act .acc-fee-val {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.acc .acc-fee--act .acc-fee-note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.acc .acc-cta {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
}

/* The launch offer by the price, over the button, in one compact row: "50% off your first account" and the code, the
   promo bar's own button ("promo"), sized for a line of text. No countdown and no reduced price here. */
.acc .acc-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--offwhite);
}

.acc .acc-promo-text {
  min-width: 0;
}

/* The code sits at the row's end, a little tighter than in a line of text, so the row stays one line. */
.acc .acc-promo .promo-code--inline {
  margin: 0;
  padding: 0 5px 0 7px;
  gap: 5px;
}

/* The summary opens on the account chosen: the programme and the size. */
.acc .acc-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hc-line);
}

.acc .acc-sum-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.acc .acc-sum-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.acc .acc-promo + .acc-cta {
  margin-top: 12px;
}

.acc .acc-buy-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--faint);
}

/* What the evaluation can be paid with: the card networks' and the wallets' own marks, each a card of one height, then
   the two coins, each its mark and its name on a card of the same height and edge; the row wraps where it must. */
.acc .acc-pay {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hc-line);
}

.acc .acc-pay-label {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--faint);
}

.acc .acc-pay-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.acc .acc-pay-list > li {
  display: flex;
}

.acc .acc-pay-card {
  width: auto;
  height: 30px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 6px;
  background: #120E20;
}

.acc .acc-pay-coin {
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 6px;
  background: #120E20;
  color: var(--offwhite);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.acc .acc-pay-coin-mark {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Past the smallest phones the tabs breathe a little more. */
@media (min-width: 400px) {
  .acc .acc-tab {
    gap: 10px;
    padding: 8px 12px;
  }
}

/* From 640px the four sizes fit one row with room for the largest beside its ring; the three rules sit side by side. */
@media (min-width: 640px) {
  .acc .acc-sizes {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 12px;
  }

  .acc .acc-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--hc-line);
    text-align: center;
  }

  .acc .acc-fact {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 4px;
    padding: 12px 16px;
    border-bottom: 0;
  }

  .acc .acc-tagline {
    font-size: 16px;
  }

  .acc .acc-fact + .acc-fact {
    border-left: 1px solid var(--hc-line);
  }
}

/* Two columns of rules; what it costs runs under both, the fees on the left and the button with how to pay on the
   right. */
@media (min-width: 760px) {
  .acc .acc-head {
    padding: 20px 28px;
  }

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

  .acc .acc-group {
    padding: 20px 28px 8px;
  }

  .acc .acc-group + .acc-group {
    border-top: 0;
    border-left: 1px solid var(--hc-line);
  }

  .acc .acc-buy {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: 'sum sum' 'fees promo' 'fees cta' 'fees note' 'fees pay';
    align-items: start;
    column-gap: 48px;
    padding: 24px 28px;
  }

  .acc .acc-sum {
    grid-area: sum;
  }

  .acc .acc-fees {
    grid-area: fees;
  }

  .acc .acc-promo {
    grid-area: promo;
    margin-top: 0;
  }

  .acc .acc-cta {
    grid-area: cta;
    margin-top: 0;
  }

  .acc .acc-buy-note {
    grid-area: note;
  }

  .acc .acc-pay {
    grid-area: pay;
  }
}

/* Wide: the evaluation, the funded account, and what it costs, side by side. */
@media (min-width: 1100px) {
  .acc .acc-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 324px;
  }

  .acc .acc-buy {
    grid-column: auto;
    display: block;
    padding: 24px;
    border-top: 0;
    border-left: 1px solid var(--hc-line);
    border-radius: 0 0 19px 0;
  }

  .acc .acc-cta {
    margin-top: 24px;
  }
}

/* Less motion: a choice, a programme or a panel changes at once, and a definition appears without moving. */
@media (prefers-reduced-motion: reduce) {
  .acc .acc-tab,
  .acc .acc-tab .acc-mark,
  .acc .acc-size,
  .acc .acc-check,
  .acc .acc-check-ic,
  .acc .acc-tip,
  .acc .acc-tab::before,
  .acc .acc-programs.is-ready > .acc-prog,
  .acc .acc-programs.is-ready > .acc-prog[hidden],
  .acc .acc-config.is-ready > .config-panel,
  .acc .acc-config.is-ready > .config-panel[hidden] {
    transition: none;
  }

  .acc .acc-tip {
    translate: none;
  }
}

/* In forced colours a fill is painted over, so the open tab and the checked size are marked by an outline, and the
   chosen one's ring by the system's highlight. */
@media (forced-colors: active) {
  .acc .acc-tab[aria-selected="true"],
  .acc .acc-size[aria-checked="true"] {
    outline: 2px solid CanvasText;
    outline-offset: -4px;
  }

  .acc .acc-check {
    border-color: CanvasText;
  }

  .acc [aria-selected="true"] .acc-check,
  .acc [aria-checked="true"] .acc-check {
    border-color: Highlight;
    background: Highlight;
  }

  .acc .acc-check-ic {
    stroke: HighlightText;
  }

  /* A pattern is decoration a system palette has no place for. */
  .acc .acc-tab::before {
    display: none;
  }
}
/* == end home: accounts == */

/* ---- how it works, in three: icons in wells, joined by a dotted line --------------------------------------------- */

.steps3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step3 {
  position: relative;
  text-align: center;
}

.step3-icon {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  border: 1px solid rgba(196, 181, 253, 0.24);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.04));
  color: var(--violet-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px -20px rgba(124, 58, 237, 0.6);
}

.step3-icon .ic {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}

.step3-n {
  margin-top: 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.step3-title {
  margin-top: 8px;
  font-size: 23px;
}

.step3-copy {
  max-width: 34ch;
  margin: 10px auto 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.how-more {
  margin-top: 52px;
  text-align: center;
}

/* ---- why the firm: a bento of small interfaces, each drawn from the plan for one account ------------------------ */

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}

.feat:hover {
  border-color: rgba(196, 181, 253, 0.26);
  transform: translateY(-3px);
}

/* The interface sits on a faint grid, lit from above. */
.feat-vis {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 236px;
  padding: 28px 24px;
  border-bottom: 1px solid var(--hairline);
  background-image: radial-gradient(80% 100% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 70%), var(--grid-lines);
  background-size: auto, 28px 28px, 28px 28px;
}

.feat-text {
  padding: 22px 24px 26px;
}

.feat-title {
  font-size: 20px;
}

.feat-copy {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.feat--f .pill {
  margin-bottom: 16px;
}

.feat--f .feat-title {
  font-size: clamp(22px, 2.4vw, 28px);
}

/* The drawings: strokes and labels in the system's colours. */
.vig {
  width: 100%;
  height: auto;
  overflow: visible;
}

.vig--target {
  max-width: 560px;
}

.vg-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.vg-target {
  fill: none;
  stroke: var(--violet-light);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.vg-line {
  fill: none;
  stroke: var(--violet-mid);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vg-dot {
  fill: var(--white);
  stroke: var(--violet);
  stroke-width: 3;
}

.vg-label {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
}

.vg-label--soft {
  fill: var(--faint);
}

.cd-up {
  fill: rgba(34, 197, 94, 0.85);
  stroke: rgba(34, 197, 94, 0.85);
  stroke-width: 1.5;
}

.cd-dn {
  fill: rgba(239, 68, 68, 0.8);
  stroke: rgba(239, 68, 68, 0.8);
  stroke-width: 1.5;
}

.vg-floor {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
}

.vg-dot--floor {
  fill: var(--gold);
  stroke: rgba(255, 201, 71, 0.3);
  stroke-width: 6;
}

.vg-label--floor {
  fill: #FFDB8A;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.chip .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.chip--ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: var(--up-text);
}

.vig-chip {
  position: absolute;
  top: 18px;
  right: 18px;
}

/* The activation, as a receipt. */
.receipt {
  width: 100%;
  max-width: 330px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--hairline-strong);
  background: rgba(7, 5, 15, 0.72);
  box-shadow: var(--lift-2);
  font-variant-numeric: tabular-nums;
}

.rc {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--hairline-strong);
  font-size: 14px;
  color: var(--offwhite);
}

.rc:last-child {
  border-bottom: 0;
}

.rc span:last-child {
  font-weight: 650;
}

.rc--soft {
  color: var(--muted);
}

.rc--up span:last-child {
  color: var(--up-text);
}

/* The payout gate, as days ticked off. */
.days {
  width: 100%;
  max-width: 360px;
}

.days-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
  color: var(--up-text);
  font-size: 12px;
  font-weight: 600;
}

.day .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.days-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--offwhite);
}

/* A payout, as three steps. */
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.35), rgba(34, 197, 94, 0.6));
}

.tl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tl-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(196, 181, 253, 0.4);
  background: var(--surface-1);
  color: var(--violet-light);
}

.tl-dot .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.tl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.tl--done .tl-dot {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.15);
  color: var(--up-text);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08);
}

.tl--done .tl-label {
  color: var(--up-text);
}

/* The split, as two bars. */
.split {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
}

.split-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.split-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* The split's bar (vignettes.ts splitBar): an SVG whose rects take the catalog's shares as attributes, so the drawn
   proportion is the catalog's whatever the shares are. Its fills are the rects' own: the trader's share in the brand's
   violet gradient, the firm's a faint white. */
.split-svg {
  display: block;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--hairline-strong);
}

.split-svg-you {
  fill: var(--white);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 650;
}

.split-svg-firm {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
}

/* ---- the platform: three real screens, chosen by tab or by swipe --------------------------------------------------- */

.platform {
  overflow-x: clip;
}

.platform-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 48px;
  align-items: end;
}

.platform-top .sec-head {
  margin-bottom: 24px;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--offwhite);
}

.pf {
  position: relative;
  isolation: isolate;
  margin-top: 16px;
}

/* A pool of light under the screen. */
.pf::before {
  content: '';
  position: absolute;
  inset: 25% 12% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.4), transparent);
  filter: blur(40px);
}

.pf-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
}

.pf-tabs[hidden] {
  display: none;
}

.pf-tab {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.pf-tab:hover {
  color: var(--white);
}

.pf-tab[aria-selected="true"] {
  background: var(--white);
  color: var(--ink);
}

.pf-track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pf-track::-webkit-scrollbar {
  display: none;
}

.pf-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.pf-fig {
  margin: 0;
  perspective: 2200px;
}

/* The screen leans back a little at rest and comes upright under the pointer. */
.pf-frame {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0B0914;
  /* Falls straight down and no wider than the frame: the track that swipes would cut a wider one at its edges. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.5), 0 36px 60px -36px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 100%;
  transform: rotateX(5deg);
  transition: transform 700ms var(--ease);
}

.pf-fig:hover .pf-frame {
  transform: none;
}

.pf-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  background: #110D1D;
}

.pf-lights {
  display: flex;
  gap: 6px;
}

.pf-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.pf-url {
  padding: 3px 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

.pf-img {
  display: block;
  width: 100%;
  height: auto;
}

.pf-cap {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.pf-cap strong {
  margin-right: 6px;
  font-weight: 650;
  color: var(--white);
}

/* ---- the platforms: each one's own logo on a stage lit in its own colour ---------------------------------------- */

.pfm {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--hairline);
}

.pfm-head {
  margin-bottom: 24px;
}

.pfm-kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.pfm-title {
  margin-top: 8px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.pfm-title .grad {
  display: inline;
}

.pfm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--lift-1);
}

.pfm-card--ours {
  border-color: rgba(196, 181, 253, 0.22);
}

/* The logo's stage: a dark well, lit from below in the platform's own colour. */
.pfm-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 32px 20px;
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(70% 110% at 50% 115%, var(--pfm-glow), transparent 72%), var(--grid-lines), #0B0914;
  background-size: auto, 24px 24px, auto;
}

.pfm-card--ours .pfm-stage {
  --pfm-glow: rgba(124, 58, 237, 0.5);
}

.pfm-card--tradingview .pfm-stage {
  --pfm-glow: rgba(255, 255, 255, 0.12);
}

.pfm-card--rixtrader .pfm-stage {
  --pfm-glow: rgba(21, 101, 192, 0.42);
}

/* Our mark beside the wordmark, set as the hero sets it (the gold dot over the last r). */
.pfm-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pfm-mark {
  width: 46px;
  height: 46px;
  flex: none;
}

.pfm-word {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}

.pfm-logo-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Sized so the two wordmarks read at the same weight: TradingView's is long and light, RixTrader's tall and heavy. */
.pfm-logo-img--tv {
  width: 196px;
}

.pfm-logo-img--rix {
  width: 172px;
}

.pfm-body {
  padding: 18px 20px 20px;
}

.pfm-kind {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.pfm-copy {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.pfm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 18px;
}

.pfm-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.pfm-mobile .ic {
  width: 16px;
  height: 16px;
  color: var(--violet-light);
}

.pfm-note {
  max-width: 62ch;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--faint);
}

/* Tablets: our terminal across the top, TradingView and RixTrader side by side under it. */
@media (min-width: 600px) {
  .pfm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pfm-card--ours {
    grid-column: 1 / -1;
  }
}

/* Wide screens: the three side by side. */
@media (min-width: 1000px) {
  .pfm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pfm-card--ours {
    grid-column: auto;
  }
}

@media (max-width: 379px) {
  .pfm-word {
    font-size: 26px;
  }

  .pfm-mark {
    width: 40px;
    height: 40px;
  }
}

/* ---- questions: the claim on one side, the answers on the other ------------------------------------------------ */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.faq-head {
  align-self: start;
}

.faq-head .pill {
  margin-bottom: 20px;
}

.faq-head .button {
  margin-top: 28px;
}

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

.qa {
  border-bottom: 1px solid var(--hairline-strong);
}

.qa-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--white);
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease-out;
}

.qa-q::-webkit-details-marker {
  display: none;
}

.qa-q:hover {
  color: var(--violet-light);
}

.qa-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--muted);
  transition: transform 350ms var(--ease), background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.qa-icon .ic {
  width: 18px;
  height: 18px;
}

.qa[open] .qa-icon {
  transform: rotate(45deg);
  border-color: transparent;
  background: var(--white);
  color: var(--ink);
}

.qa-a {
  padding: 0 56px 24px 0;
}

.qa-a p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* Where the browser can animate an open <details>, the answer slides open instead of appearing. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .qa::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 350ms var(--ease), content-visibility 350ms allow-discrete;
  }

  .qa[open]::details-content {
    block-size: auto;
  }
}

/* ---- the community: one panel, the scene behind the invitation --------------------------------------------------- */

.dc-panel {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #06050C;
}

.dc-panel picture {
  display: contents;
}

.dc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

/* The scene dissolves into the panel where the words are. */
.dc-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6, 5, 12, 0.96) 0%, rgba(6, 5, 12, 0.8) 38%, rgba(6, 5, 12, 0) 72%);
}

.dc-text {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: clamp(32px, 5vw, 64px);
}

.dc-text .pill {
  margin-bottom: 20px;
}

.dc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---- the last sign-up: the desk behind the claim ------------------------------------------------------------------ */

.final-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(196, 181, 253, 0.18);
  background: #06050C;
  text-align: center;
}

.final-panel picture {
  display: contents;
}

.final-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.final-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 95% at 50% 45%, rgba(6, 5, 12, 0.5), rgba(6, 5, 12, 0.94));
}

.final-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) 20px;
}

.final h2 {
  font-size: clamp(36px, 5vw, 64px);
}

.final-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.final-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  color: var(--offwhite);
}

.signup--final,
.signup--how,
.signup--rules,
.signup--affiliates-final {
  margin-top: 32px;
}

/* ---- the inner pages: a hero with its picture, then the page's own layout ---------------------------------------- */

.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(32px, 5vw, 64px);
  overflow-x: clip;
  background: radial-gradient(50% 60% at 15% 0%, rgba(124, 58, 237, 0.18), transparent 70%);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.page-hero-text .pill {
  margin-bottom: 22px;
}

.page-hero h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.page-hero-lede {
  max-width: 560px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.page-hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--lift-3), 0 40px 100px -40px rgba(124, 58, 237, 0.5);
}

.page-hero-media picture {
  display: contents;
}

.page-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* How it works: a timeline, one node per step, the drawings inline. */
.tsteps {
  position: relative;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.tsteps::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.45), rgba(196, 181, 253, 0.04));
}

.tstep {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 56px;
}

.tstep:last-child {
  padding-bottom: 0;
}

.tstep-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  background: #120E20;
  color: var(--violet-light);
  box-shadow: 0 0 0 6px var(--bg);
}

.tstep-node .ic {
  width: 24px;
  height: 24px;
}

.tstep-body {
  max-width: 780px;
  padding-top: 4px;
}

.tstep-n {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.tstep-title {
  margin-top: 6px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.tstep-body p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.tstep-body strong {
  font-weight: 600;
  color: var(--white);
}

.tstep-vis {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 24px;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background-image: radial-gradient(80% 100% at 50% 0%, rgba(124, 58, 237, 0.14), transparent 70%), var(--grid-lines);
  background-size: auto, 28px 28px, 28px 28px;
}

/* The prices of both programmes, side by side. */
.pp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.pp-col {
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}

.pp-name {
  font-size: 18px;
  font-weight: 650;
  color: var(--white);
}

.pp-name span {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--faint);
}

.pp-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pp-list li {
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

.pp-list strong {
  font-weight: 650;
  color: var(--white);
}

.pp-list span {
  font-weight: 600;
  color: var(--offwhite);
}

.pp-list .pp-was {
  font-size: 13.5px;
  font-weight: 500;
  text-align: right;
  color: var(--faint);
}

/* The rules: the words as a list, the rules in three columns, the tables. */
.defs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 56px;
  margin: 0;
}

.def {
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.def dt {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--white);
}

.def dd {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.rgroups,
.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rgroup-icon,
.value-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  border: 1px solid rgba(196, 181, 253, 0.24);
  background: rgba(124, 58, 237, 0.1);
  color: var(--violet-light);
}

.rgroup-icon .ic,
.value-icon .ic {
  width: 24px;
  height: 24px;
}

.rgroup h3,
.value h3 {
  margin-top: 18px;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.rule {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-light);
}

.tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.value p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Careers: the roles as rows, then the one way in. */
.roles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-strong);
}

.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline-strong);
}

.role-main h3 {
  font-size: 20px;
}

.role-main p {
  max-width: 62ch;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.role-team {
  font-size: 14px;
  color: var(--faint);
}

.role-state {
  justify-self: start;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 181, 253, 0.28);
  background: rgba(124, 58, 237, 0.1);
  color: var(--violet-light);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.door {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(196, 181, 253, 0.2);
  background: radial-gradient(90% 140% at 0% 0%, rgba(124, 58, 237, 0.25), transparent 60%), var(--surface-1);
}

.door h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.door-text p {
  max-width: 56ch;
  margin-top: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.door-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- the flow between sections ---------------------------------------------------------------------------------- */

/* The sections that sit on the page itself are parted by a hairline of light, not by a box. */
.how::before,
.feats::before,
.platform::before,
.faq-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 88%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.22), transparent);
}

/* The two panels at the foot of the page stand closer together than two sections would. */
.discord {
  padding-bottom: clamp(16px, 2vw, 24px);
}

.final {
  padding-top: clamp(16px, 2vw, 24px);
}

.vig--maxloss {
  max-width: 940px;
}

/* The footer's columns never push their grid wider than it is. */
.footer-brand,
.footer-col {
  min-width: 0;
}

.footer-inner {
  position: relative;
}

/* ---- the footer: the wordmark, the links, the small print ------------------------------------------------------- */

.site-footer {
  position: relative;
  padding: 72px 0 32px;
  overflow-x: clip;
  border-top: 1px solid var(--hairline);
  background: radial-gradient(60% 60% at 50% 100%, rgba(124, 58, 237, 0.2), transparent 70%), #05040B;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.wordmark.wordmark--footer {
  font-size: 22px;
}

.footer-blurb {
  max-width: 380px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.footer-head {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A configured label may be one long word (an email address, say): it wraps inside its column rather than run past it. */
.footer-links a {
  display: inline-block;
  max-width: 100%;
  padding-block: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--offwhite);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* The wordmark again, at poster size and nearly not there: the page signs off. */
.footer-word {
  margin: 64px 0 0;
  font-family: var(--display);
  font-size: clamp(40px, 14vw, 184px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.risk {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.65;
  color: var(--faint);
}

.footer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--faint);
}

.footer-join {
  font-weight: 600;
  color: var(--violet-light);
  text-decoration: none;
}

/* The support address under the description: on every page, a mailto link a thumb can hit, never wider than a phone. */
.footer-contact {
  margin: 12px 0 0;
}

.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--offwhite);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-mail .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--violet-light);
}

.footer-mail:hover {
  color: var(--white);
}

.footer-mail:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact + .footer-social {
  margin-top: 14px;
}

/* A second or third paragraph of small print sits under the first, inside the same rule. */
.risk.footer-note {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* The copyright line and the legal links, which every footer carries whatever the configuration says. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  margin: 0;
}

.footer-legal a {
  padding-block: 6px;
  color: var(--muted);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A footer configured without small print still rules off its last line. */
.footer-end.footer-end--ruled {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

/* Four link columns: two to a row until the footer is wide enough for all four side by side. */
@media (min-width: 600px) {
  .footer-cols.footer-cols--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .footer-cols.footer-cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- the hero's breakout dot, wherever the wordmark is drawn ------------------------------------------------------- */

.hero-dot {
  position: relative;
}

.hero-dot::after {
  content: '';
  position: absolute;
  top: 0.3em;
  right: 0.02em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0.03em 0.12em rgba(255, 201, 71, 0.5), 0 0 0.35em rgba(255, 201, 71, 0.25);
}

.footer-word .hero-dot::after {
  opacity: 0.5;
}

/* Forced colours drop the gradient and would set the words solid at poster size: it is decoration, so it goes. */
@media (forced-colors: active) {
  .footer-word {
    display: none;
  }
}

/* ---- the sign-up: a well, and from 560px up one capsule with the button riding inside it ---------------------- */

.signup {
  max-width: 600px;
  margin: 28px auto 0;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(7, 5, 15, 0.55);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--well);
  scroll-margin-top: max(calc(var(--header-h) + 24px), 40vh);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}

.field::placeholder {
  color: var(--faint);
}

.field:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* The transparent outline is not decoration: in forced colours the border and the shadow are dropped or recoloured,
   and this is what the browser repaints as a visible ring. Never outline: none here. */
.field:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--violet);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), var(--ring-focus);
}

.field[aria-invalid="true"] {
  border-color: var(--down);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.field-row .button {
  width: 100%;
  min-height: 54px;
}

/* The honeypot: out of sight for a person, still there for the script that fills it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* Announced when it fills, so it is rendered at all times: never display:none while it is empty. */
.status:empty {
  margin-top: 0;
}

.status--ok {
  color: var(--up);
}

.status--error {
  color: var(--down);
}

/* Once the address is in, the field has nothing left to do. */
.signup.is-done .field-label,
.signup.is-done .field-row,
.signup.is-done .consent {
  display: none;
}

.signup.is-done .status {
  margin: 0 auto;
  max-width: 480px;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: var(--white);
}

.consent {
  max-width: 600px;
  margin: 14px auto 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}

.consent a {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.consent a:hover {
  color: var(--white);
}

/* ---- the card recipe: tiles, steps, floats, the service card ---------------------------------------------------- */

.card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--lift-2);
  transition: border-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
/* ---- the programme switch: a well with a violet thumb that slides to the open programme ---- */

/* Without waitlist.js the switch stays hidden and both programmes are on the page, one under the other. */
.program-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 460px);
  margin: 0 auto 24px;
  padding: 6px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 5, 15, 0.55);
  box-shadow: var(--well);
}

.program-tabs[hidden] {
  display: none;
}

.program-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}

.program-tab:hover {
  color: var(--white);
}

.program-tab:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

.program-tab[aria-selected="true"] {
  background: var(--violet);
  color: var(--white);
}

.program-tab-art {
  width: 36px;
  height: 36px;
  flex: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  transition: transform 400ms var(--ease);
}

.program-tab:hover .program-tab-art {
  transform: rotate(-10deg) scale(1.12);
}

.program-tab[aria-selected="true"] .program-tab-art {
  transform: rotate(8deg) scale(1.14);
}

.program-tab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}

.program-tab-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.program-tab-note {
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.8;
}

/* Full strength on the thumb: at 0.8 the small line falls under 4.5:1 on violet. */
.program-tab[aria-selected="true"] .program-tab-note {
  opacity: 1;
}

/* Where :has() is known, the selected tab goes clear and one thumb slides under whichever is open. */
@supports selector(:has(*)) {
  .program-tabs::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc(50% - 6px);
    border-radius: var(--radius-pill);
    background: var(--violet);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 10px 28px -8px rgba(124, 58, 237, 0.7);
    transition: translate 450ms var(--ease);
  }

  .program-tabs:has(.program-tab:last-child[aria-selected="true"])::before {
    translate: 100% 0;
  }

  .program-tab[aria-selected="true"] {
    background: transparent;
  }
}

/* In forced colours the thumb is painted over, so the open tab is marked by an outline and its name underlined. */
@media (forced-colors: active) {
  .program-tab[aria-selected="true"] {
    outline: 2px solid CanvasText;
    outline-offset: -4px;
  }

  .program-tab[aria-selected="true"] .program-tab-name {
    text-decoration: underline;
  }
}

/* Stacked without the switch, the second programme stands clear of the first. With it, nothing is stacked. */
.programs:not(.is-tabbed) .program + .program {
  margin-top: 80px;
}

.program[hidden] {
  display: none;
}

.program-head {
  max-width: 640px;
  margin: 0 auto 20px;
  text-align: center;
}

.program-name {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* With the switch up, the tab names the programme; the heading stays for a screen reader. */
.programs.is-tabbed .program-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.program-kicker {
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
}

.programs.is-tabbed .program-kicker {
  margin-top: 0;
}

.program-tagline {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- the account cards: lean toward the pointer, lift, and carry a light across them ---- */

/* Room above the row for the marks riding over the cards' corners, and between stacked rows for the same reason. */
.accounts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 18px;
  margin: 0;
  padding: 44px 0 0;
  list-style: none;
}

/* The cell is the frame the pointer is measured in and the thing that is hovered: it never moves, so neither
   measurement nor hover can flicker as the card inside leans and lifts. */
.account {
  display: flex;
  perspective: 1100px;
}

/*
 * waitlist.js writes only where the pointer is over the cell -- --px and --py, -1 at its left or top edge, 1 at its
 * right or bottom -- and this rule decides what that means: how far the card leans (--tilt). The lean follows quickly
 * while the pointer is on the card and settles slowly once it leaves; the lift is its own property and pace.
 */
.account-card {
  --px: 0;
  --py: 0;
  --tilt: 8deg;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--lift-2);
  transform-style: preserve-3d;
  transform: rotateX(calc(-1 * var(--py) * var(--tilt))) rotateY(calc(var(--px) * var(--tilt)));
  transition: transform 700ms var(--ease), translate 400ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.account:hover .account-card {
  translate: 0 -8px;
  border-color: rgba(196, 181, 253, 0.34);
  box-shadow: var(--lift-3), 0 30px 80px -24px rgba(124, 58, 237, 0.5);
  transition: transform 120ms ease-out, translate 400ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

/* The light the pointer carries across the card. */
.account-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at calc(50% + var(--px) * 50%) calc(50% + var(--py) * 50%), rgba(196, 181, 253, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.account:hover .account-card::before {
  opacity: 1;
}

/* The programme's mark rides over the card's corner, nearer the eye than the card, and comes closer under the pointer. */
.account-art {
  position: absolute;
  top: -30px;
  right: 12px;
  width: 92px;
  height: 92px;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.55));
  transform: translateZ(40px) rotate(10deg);
  transition: transform 500ms var(--ease);
}

.account:hover .account-art {
  transform: translateZ(80px) rotate(-6deg) scale(1.12);
}

.account-badge {
  position: absolute;
  top: -13px;
  left: 22px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--violet);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -6px rgba(124, 58, 237, 0.85);
  transform: translateZ(30px);
}

.account-size {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  transform: translateZ(26px);
}

.account-program {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
}

.account-amount {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--white);
}

.account-price {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  transform: translateZ(18px);
}

/* The one account that is also the best value per dollar says so beside its price, in the eyebrow badge's dress. */
.account-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(196, 181, 253, 0.32);
  background: rgba(124, 58, 237, 0.14);
  color: var(--violet-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  translate: 0 -3px;
}

.account-once {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.account-terms {
  margin: 18px 0 0;
  border-top: 1px solid var(--hairline);
}

.account-term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.35;
}

.account-term dt {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--muted);
}

.account-term dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.account-activation {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.account-activation strong {
  font-weight: 800;
  color: var(--white);
}

/* The account most people pick: a slow light runs round its edge. Where @property is unknown the angle stays at its
   fallback and the edge is a still gradient. */
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.account--featured .account-card {
  border-color: transparent;
  box-shadow: var(--lift-3), 0 30px 90px -30px rgba(124, 58, 237, 0.65);
}

.account--featured .account-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), rgba(196, 181, 253, 0.2), var(--violet-light) 12%, var(--violet) 22%, rgba(196, 181, 253, 0.2) 34%, rgba(196, 181, 253, 0.2) 62%, var(--gold) 74%, rgba(196, 181, 253, 0.2) 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 6s linear infinite;
}

@keyframes spin {
  from {
    --spin: 0deg;
  }
  to {
    --spin: 360deg;
  }
}

/* ---- carousels: a snapping row and two buttons ------------------------------------------------------------------ */

.carousel {
  position: relative;
}

[data-carousel-track] {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

[data-carousel-track]::-webkit-scrollbar {
  display: none;
}

.carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 200ms var(--ease), opacity 160ms ease-out;
}

.carousel-btn svg {
  width: 18px;
  height: 18px;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(196, 181, 253, 0.5);
  transform: translateY(-1px);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* The account cards scroll where they do not all fit; on a wide screen the row is a grid and the buttons go. */
.accounts {
  overflow-x: auto;
  padding-bottom: 8px;
}

.account {
  scroll-snap-align: start;
}

/* ---- the account breakdown: a dialog with every number for one account ----------------------------------------- */

.sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out, transform 200ms var(--ease);
}

.sheet-close svg {
  width: 16px;
  height: 16px;
}

.sheet-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}

.account-more {
  margin-top: 12px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--violet-light);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease-out;
}

.account-more:hover {
  color: var(--white);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
}

.sheet[hidden] {
  display: none;
}

body.has-sheet {
  overflow: hidden;
}

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 5, 15, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.sheet-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(124, 58, 237, 0.3), transparent 60%), var(--surface-1);
  box-shadow: var(--lift-3), 0 0 120px -20px rgba(124, 58, 237, 0.6);
  animation: spin-in 400ms var(--ease) both;
}

.sheet-title {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sheet-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 18px;
}

.sheet-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(7, 5, 15, 0.55);
  box-shadow: var(--well);
}

.sheet-pill {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.sheet-pill:hover {
  color: var(--white);
}

.sheet-pill[aria-pressed="true"] {
  background: var(--violet);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px -6px rgba(124, 58, 237, 0.7);
}

.sheet-panel[hidden] {
  display: none;
}

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
}

.sheet-size {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 60px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--white);
}

.sheet-pricebox {
  text-align: right;
}

.sheet-price {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.sheet-then {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.sheet-tagline {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

.sheet-terms {
  margin: 18px 0 0;
  border-top: 1px solid var(--hairline);
}

.sheet-term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.4;
}

.sheet-term dt {
  font-weight: 600;
  color: var(--muted);
}

.sheet-note {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
}

.sheet-term dd {
  flex: none;
  max-width: 55%;
  margin: 0;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ---- the rules, account by account: a fold under the cards ---- */

.compare {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--lift-1);
  overflow: hidden;
}

.compare-toggle {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 18px 56px 18px 22px;
  list-style: none;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}

.compare-toggle::-webkit-details-marker {
  display: none;
}

.compare-toggle:hover {
  background: rgba(255, 255, 255, 0.035);
}

.compare-toggle:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: -4px;
}

.compare-toggle::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  translate: 0 -70%;
  rotate: 45deg;
  transition: rotate 300ms var(--ease), translate 300ms var(--ease), border-color 160ms ease-out;
}

.compare-toggle:hover::after {
  border-color: var(--violet-light);
}

.compare[open] > .compare-toggle {
  border-bottom: 1px solid var(--hairline);
}

.compare[open] > .compare-toggle::after {
  rotate: 225deg;
  translate: 0 -30%;
}

.compare-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
}

.compare-hint {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--faint);
}

/* Said only where the table is wider than the screen. */
.compare-swipe {
  display: none;
  padding: 10px 22px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
}

.rules-wrap {
  overflow-x: auto;
}

.rules-wrap:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: -3px;
}

.rules {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.rules th,
.rules td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  vertical-align: baseline;
}

.rules thead th {
  padding-top: 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
}

.rules tbody th {
  width: 34%;
  font-weight: 700;
  text-align: left;
  color: var(--offwhite);
}

/* The rule names stay in view while the figures scroll beside them on a narrow screen. */
.rules thead th:first-child,
.rules tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-1);
}

.rules td {
  font-weight: 700;
  color: var(--muted);
}

.rules .rules-hot {
  background: rgba(124, 58, 237, 0.12);
  color: var(--white);
}

.rules thead .rules-hot {
  color: var(--violet-light);
}

.rules tbody tr:last-child > * {
  border-bottom: 0;
}

.rules tbody tr {
  transition: background-color 160ms ease-out;
}

.rules tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* The sticky name cell is opaque, so it takes the row's tint as a colour of its own. */
.rules tbody tr:hover > th {
  background: #221A37;
}

.rules-note {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
}

.rules-then {
  margin-left: 4px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

/* ---- the card the service's own pages live in ------------------------------------------------------------------- */

.card {
  padding: 40px;
}

.card h1 {
  font-family: var(--body);
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.card .signup {
  margin-top: 28px;
}

/* The way back, a step below the words. */
.card p:last-child > .button {
  margin-top: 24px;
}

.lede {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

.notice {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
}

.notice--error {
  color: var(--down);
}

.fine {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--faint);
}

/* ---- the privacy note ------------------------------------------------------------------------------------------- */

.prose {
  max-width: 720px;
  padding-block: calc(var(--header-h) + 48px) 96px;
}

.prose h1 {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;
}

.prose h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.prose p {
  margin-top: 16px;
  font-weight: 500;
  color: var(--muted);
}

.prose ul {
  margin: 16px 0 0;
  padding-left: 24px;
  font-weight: 500;
  color: var(--muted);
}

.prose li {
  margin-top: 8px;
}

.prose strong {
  font-weight: 700;
  color: var(--white);
}

.prose code {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(196, 181, 253, 0.16);
  color: var(--violet-light);
  font-size: 0.9em;
  /* A hash or a command line (the /kit page) breaks where it must rather than widen the page past a phone's screen. */
  overflow-wrap: anywhere;
}

.prose .button {
  margin-top: 48px;
}

.updated {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--faint);
}



/* A status line focused by the script so it is read out, not reached by a key: no ring around a sentence. */
.signup .status:focus {
  outline: none;
}

/* ---- the announcement bar's tones, and a page without one ------------------------------------------------------- */

/* The brand tone is the bar's own violet (the .promo rule); neutral and highlight replace it. */
.promo--brand {
  border-bottom-color: rgba(196, 181, 253, 0.14);
}

.promo--neutral {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: var(--hairline);
}

.promo--highlight {
  background: linear-gradient(90deg, rgba(255, 201, 71, 0.16), rgba(124, 58, 237, 0.16) 55%, rgba(124, 58, 237, 0.24));
  border-bottom-color: rgba(255, 201, 71, 0.22);
}

.promo[hidden] {
  display: none;
}

/* No announcement (none configured, or outside its dates): the header is the bar alone. */
.no-promo {
  --promo-h: 0px;
}

/* ---- the header after launch: a way to sign in beside the call to action --------------------------------------- */

.header-login {
  display: none;
}

/* ---- the hero: the reward under the sign-up, and the launch site's buttons -------------------------------------- */

.hero-reward {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin: 14px auto 0;
  font-size: 14px;
  font-weight: 500;
  color: #CBC1E8;
}

.hero-reward .ic {
  width: 17px;
  height: 17px;
  color: var(--gold);
}

.signup.is-done + .hero-reward,
.hero-reward[hidden] {
  display: none;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 650;
  color: #DDD3FE;
  text-decoration: none;
}

.hero-more .ic {
  width: 16px;
  height: 16px;
}

.hero-more:hover {
  color: var(--white);
}

/* After launch the mobile note takes a line of its own under "how it works", centred, as it does under the sign-up. */
.hero--launch .hero-mobile {
  display: flex;
  width: fit-content;
  margin-top: 20px;
}

/* ---- the accounts: the name in the rules bar, the launch site's buy button, and the controls the script wires ---- */

.config-name {
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(124, 58, 237, 0.12);
  color: #DDD3FE;
  font-size: 13px;
  font-weight: 650;
  vertical-align: middle;
}

.config-name:empty {
  display: none;
}

.account-buy {
  margin-top: 14px;
  width: 100%;
}

.account-more[hidden],
.carousel-nav[hidden] {
  display: none;
}

/* ---- how it works after launch: five steps --------------------------------------------------------------------- */

.steps3--five .step3-copy {
  max-width: 28ch;
}

/* ---- the rules at a glance (launch): two programmes side by side ------------------------------------------------ */

.glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.glance-col {
  padding: 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent 45%), var(--surface-1);
  box-shadow: var(--lift-1);
}

.glance-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.glance-head img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(124, 58, 237, 0.4));
}

.glance-name {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--white);
}

.glance-kicker {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-light);
}

.glance-rules {
  margin: 4px 0 0;
}

.glance-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
}

.glance-row:last-child {
  border-bottom: 0;
}

.glance-row dt {
  color: var(--muted);
}

.glance-row dd {
  margin: 0;
  max-width: 60%;
  font-weight: 600;
  text-align: right;
  color: var(--white);
}

.glance-more {
  margin-top: 28px;
  text-align: center;
}

/* ---- the last call to action after launch: two buttons ---------------------------------------------------------- */

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* ---- the community after launch: where help is ----------------------------------------------------------------- */

.dc-help {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--muted);
}

.dc-help li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dc-help .ic {
  width: 17px;
  height: 17px;
  color: var(--violet-light);
}

.dc-help a {
  color: var(--offwhite);
}

/* ---- the affiliates page ----------------------------------------------------------------------------------------- */

.aff-hero .page-hero-media {
  align-self: center;
  overflow: visible;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

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

.aff-faq {
  display: grid;
  align-content: start;
}

.aff-faq-head {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.aff-vis {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xl);
  background-image: var(--grid-lines), radial-gradient(90% 70% at 100% 0%, rgba(124, 58, 237, 0.28), transparent 60%);
  background-size: 28px 28px, auto;
  background-color: var(--surface-1);
  box-shadow: var(--lift-3), 0 40px 100px -40px rgba(124, 58, 237, 0.6);
}

.aff-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid rgba(196, 181, 253, 0.25);
  border-radius: 16px;
  background: rgba(7, 5, 15, 0.6);
}

.aff-link-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.aff-link-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  color: var(--white);
}

.aff-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(34, 197, 94, 0.12);
  color: var(--up-text);
  font-size: 12px;
  font-weight: 650;
}

.aff-link-copy .ic {
  width: 14px;
  height: 14px;
}

.aff-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.aff-stat {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.aff-bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #7C3AED, #A78BFA);
}

.aff-bar--a {
  width: 100%;
}

.aff-bar--b {
  width: 62%;
}

.aff-bar--c {
  width: 34%;
}

.aff-feed {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.aff-feed p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aff-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--up);
}

.aff-dot--violet {
  background: var(--violet-light);
}

.aff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aff-card {
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.aff-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 13px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--violet-light);
}

.aff-card h3 {
  font-size: 18px;
}

.aff-card p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.aff-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
}

.aff-who-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.aff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aff-chips li {
  padding: 7px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  font-weight: 550;
  color: var(--offwhite);
}

.aff-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aff-step {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.aff-step-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--white);
  font-weight: 700;
}

.aff-step h3 {
  font-size: 17px;
}

.aff-step p {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

.aff-apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.aff-apply-box {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: var(--radius-xl);
  background: radial-gradient(90% 70% at 0% 0%, rgba(124, 58, 237, 0.2), transparent 60%), var(--surface-1);
  box-shadow: var(--lift-2);
}

.aff-apply-box h2 {
  font-size: clamp(26px, 3.4vw, 36px);
}

.aff-apply-box .sec-lede {
  margin-bottom: 24px;
}

.signup--aff {
  margin-top: 0;
}

/* ---- the terms placeholder (launch) ------------------------------------------------------------------------------ */

.terms .pill {
  margin-bottom: 18px;
}

.terms-draft {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px dashed rgba(255, 201, 71, 0.4);
  border-radius: 16px;
  background: rgba(255, 201, 71, 0.06);
  color: var(--offwhite);
}

/* ---- the preview's chip (preview builds only) -------------------------------------------------------------------- */

.preview-chip {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border: 1px dashed rgba(196, 181, 253, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(12, 10, 21, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  color: var(--muted);
}

.preview-chip-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #DDD3FE;
}

.preview-chip a {
  font-weight: 650;
  color: var(--white);
}

@media (max-width: 599px) {
  .preview-chip {
    gap: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .preview-chip > span:not(.preview-chip-tag) {
    display: none;
  }
}

/* ---- without the script ------------------------------------------------------------------------------------------- */

/* The header frosts only when the script sees it scrolled; without the script it is frosted from the start, so
   nothing under it shows through. And the platform's screens stack instead of hiding in a row nobody can scroll. */
@media (scripting: none) {
  .site-header {
    background: rgba(7, 5, 15, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }

  .pf-track {
    flex-direction: column;
    overflow: visible;
  }
}

/* ---- wider screens ---------------------------------------------------------------------------------------------- */

@media (min-width: 560px) {
  /* The row becomes the well; the field goes bare inside it and the button rides on its right. */
  .field-row {
    flex-direction: row;
    gap: 0;
    padding: 5px 5px 5px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 5, 15, 0.55);
    box-shadow: var(--well);
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
  }

  .field-row:focus-within {
    border-color: var(--violet);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), var(--ring-focus);
  }

  .field,
  .field:hover {
    min-height: 48px;
    padding: 0 18px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .field:focus {
    outline: 2px solid transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .field-row .button {
    width: auto;
    min-height: 48px;
    padding: 0 26px;
  }

}

@media (min-width: 600px) {
  .header-end .icon-link {
    display: grid;
  }

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

@media (min-width: 700px) {
  .pp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .feat--a,
  .feat--f {
    grid-column: span 6;
  }

  .feat--b,
  .feat--c,
  .feat--d,
  .feat--e {
    grid-column: span 3;
  }
}

@media (min-width: 800px) {
  .defs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role {
    grid-template-columns: minmax(0, 1fr) 130px 210px;
    align-items: center;
  }

  .role-state {
    justify-self: end;
  }
}

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

  .fact {
    padding: 22px 20px;
  }

  .fact + .fact {
    border-left: 1px solid var(--hairline);
  }

  .steps3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }

  /* A dotted line from each step's icon to the next. */
  .step3:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    left: calc(50% + 58px);
    right: calc(-50% + 10px);
    border-top: 2px dotted rgba(196, 181, 253, 0.35);
  }

  .config-panel {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .config-rules {
    padding: 6px 32px 18px;
  }

  .config-sum {
    padding: 28px 32px;
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .feat--f {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  }

  .feat--f .feat-vis {
    order: 2;
    border-bottom: 0;
    border-left: 1px solid var(--hairline);
  }

  .feat--f .feat-text {
    align-self: center;
    padding: 36px;
  }

  .platform-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  }

  .faq-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr);
    gap: 72px;
  }

  .faq-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }

  .page-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
  }

  .rgroups,
  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }

  .door {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 960px) {
  .nav {
    display: flex;
  }

  .menu {
    display: none;
  }
}

@media (min-width: 1000px) {
  :root {
    --gutter: 32px;
  }

  .card {
    padding: 48px;
  }
}

@media (min-width: 1100px) {
  .accounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 18px;
  }

  .account--featured .account-card {
    translate: 0 -10px;
  }

  .account--featured:hover .account-card {
    translate: 0 -18px;
  }

  .accounts + .carousel-nav {
    display: none;
  }

  .feat--a {
    grid-column: span 4;
  }

  .feat--b,
  .feat--c,
  .feat--d,
  .feat--e {
    grid-column: span 2;
  }
}

/* ---- narrower screens ------------------------------------------------------------------------------------------- */

/* The account cards become a row that swipes, where all four do not fit. */
@media (max-width: 1099px) {
  .accounts {
    display: flex;
    gap: 16px;
    padding-top: 44px;
  }

  .account {
    flex: 0 0 min(320px, 86%);
  }
}

@media (max-width: 959px) {
  .menu-toggle:not([hidden]) {
    display: grid;
  }
}

/* Under three columns the steps read down a line: the icon on the left, the words beside it. */
@media (max-width: 899px) {
  /* The promo's long sentence needs the width of a laptop; under it the bar says the short one. */
  .promo-long {
    display: none;
  }

  .promo-short {
    display: inline;
  }

  .steps3 {
    gap: 30px;
  }

  .step3 {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px;
    text-align: left;
  }

  .step3-icon {
    grid-row: span 3;
    align-self: start;
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .step3-icon .ic {
    width: 24px;
    height: 24px;
  }

  .step3:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 66px;
    bottom: -22px;
    left: 27px;
    border-left: 2px dotted rgba(196, 181, 253, 0.3);
  }

  .step3-n {
    margin-top: 2px;
  }

  .step3-title {
    margin-top: 4px;
    font-size: 20px;
  }

  .step3-copy {
    max-width: none;
    margin: 6px 0 0;
  }
}

@media (max-width: 759px) {
  /* On a phone the scene is a band above the words, not the ground under them. */
  .dc-panel {
    min-height: 0;
    align-items: stretch;
  }

  .dc-img {
    position: relative;
    height: 220px;
    object-position: 68% 50%;
  }

  .dc-panel::after {
    background: linear-gradient(180deg, rgba(6, 5, 12, 0) 90px, #06050C 230px);
  }

  .dc-text {
    padding: 0 24px 32px;
  }

  .qa-a {
    padding-right: 0;
  }

  .tsteps::before {
    left: 21px;
  }

  .tstep {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
  }

  .tstep-node {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .tstep-node .ic {
    width: 20px;
    height: 20px;
  }

  .tstep-vis {
    padding: 24px 16px;
  }

  .vig-chip {
    top: 12px;
    right: 12px;
  }

  .feat-vis {
    min-height: 200px;
  }
}

@media (max-width: 599px) {
  .account-amount {
    font-size: 48px;
  }

  .program-tab {
    min-height: 52px;
    gap: 8px;
    padding: 0 10px;
  }

  .program-tab-art {
    width: 30px;
    height: 30px;
  }

  /* Two account columns fit beside a narrower name column, and the page says the rest is a swipe away. */
  .rules {
    min-width: 560px;
  }

  .rules thead th:first-child,
  .rules tbody th {
    width: 118px;
    min-width: 118px;
  }

  .rules-note {
    display: none;
  }

  .fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 8px;
  }

  .fact + .fact:nth-child(even) {
    border-left: 1px solid var(--hairline);
    padding-left: 16px;
  }

  .fact:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }

  .rl dd {
    max-width: 48%;
  }

  .sum-size {
    font-size: 38px;
  }

  .sheet-pricebox {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    text-align: left;
  }

  .sheet-then {
    margin-top: 0;
  }

  /* One column of points, centred as a block so the ticks line up. */
  .final-points {
    display: grid;
    justify-content: center;
    justify-items: start;
  }
}

@media (max-width: 559px) {
  .button--sm {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .header-inner {
    gap: 10px;
  }

  .wordmark {
    font-size: 18px;
  }

  .mark {
    width: 28px;
    height: 28px;
  }

  .page-hero-cta .button,
  .dc-actions .button,
  .door-cta .button {
    flex: 1 1 100%;
  }

  .pf-tab {
    padding: 0 14px;
    font-size: 14px;
  }
}

@media (max-width: 379px) {
  .header-end .button--sm {
    display: none;
  }
}

/* ---- the new pieces, by width: the launch header, the glance, the five steps, the affiliates page --------------- */

@media (min-width: 700px) {
  .header-login {
    display: inline-flex;
  }
}

@media (min-width: 760px) {
  .glance-grid,
  .aff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .aff-apply-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }

  .steps3--five .step3::after {
    display: none;
  }

  .vig--maxloss .vg-label {
    font-size: 16px;
  }
}

@media (min-width: 1100px) {
  /* Four cards in a row need no scroller, and the art over each card's corner must not be clipped by one. */
  .accounts {
    overflow: visible;
  }

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

  .aff-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .aff-step {
    flex-direction: column;
  }

  .steps3--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }

  .steps3--five .step3:not(:last-child)::after {
    display: block;
    right: calc(-50% + 34px);
  }
}

@media (max-width: 599px) {
  .vig--target .vg-label {
    font-size: 22px;
  }

  .vig--maxloss .vg-label {
    font-size: 24px;
  }

  .hero-ctas .button,
  .final-actions .button {
    flex: 1 1 100%;
  }
}

@media (max-width: 759px) {
  .compare-swipe {
    display: block;
  }
}

/* The announcement's sentence and its button share the narrowest phones. */
@media (max-width: 419px) {
  /* The short sentence may take two lines on the narrowest phones rather than lose its end to an ellipsis (a page with
     no announcement keeps no room for one). */
  :root:not(.no-promo) {
    --promo-h: 52px;
  }

  .promo-inner {
    gap: 10px;
  }

  .promo-text {
    gap: 8px;
    font-size: 12.5px;
  }

  .promo-short {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    white-space: normal;
  }

  .promo-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* The narrowest phones: the affiliates dashboard drawing stacks its counts, and the careers card's buttons wrap their
   words inside the card. */
@media (max-width: 379px) {
  .aff-vis {
    padding: 16px;
  }

  .aff-link-url {
    flex-basis: 100%;
    order: 1;
  }

  .aff-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .aff-stat {
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  .door {
    padding: 22px 18px;
  }

  .door-cta .button {
    min-width: 0;
    padding-inline: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* == home: components == */

/*
  The site's controls, restyled in place (the owner's brief of 2026-10-23): the original pages -- their layout, their
  pictures, their colours -- with the components of the redesign the owner liked, set first on the home page and
  shared by every public page. One primary button (the brand's gradient, white 14px/600, 8px corners, 44px tall, 48px
  beside a field, solid violet under the pointer); one restrained outline button in the same proportions; one 48px
  field (the surface, a 1px line, 12px corners, a violet border and a 3px ring under focus); the same lines and 8px
  corners on every other control; subtle shadows, never a glow; focus always visible; labels in sentence case, never
  all capitals; figures in tabular numerals; the owner's logo in the bar.

  Every rule sits under body.site, which every public page carries (pages/chrome.ts head), so the shared look is one
  set of rules. What is the home page's alone sits under body.home ("home: page", "home: accounts", which come later or
  are more specific, so they win there); what is the other pages' alone is in "public pages".
*/

body.site {
  --hc-grad: linear-gradient(99deg, #7C3AED, #9F67FF);
  --hc-surface: #100C1C;
  --hc-raised: #161127;
  --hc-line: #1E1830;
  --hc-line-strong: #2C2444;
  --hc-outline: #3F3461;
  --hc-outline-hover: #5B4A8C;
  --hc-ring: 0 0 0 3px rgba(124, 58, 237, 0.25);
  /* A lit top edge and a contact line: the most a control casts. */
  --hc-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(7, 5, 15, 0.45);
}

/* Focus stays visible everywhere: the page's own 2px light violet ring (the base :focus-visible rule), set a little
   closer on the controls below; the fields show theirs as the violet border and the ring. */

/* The skip link, in the controls' corners. */
body.site .skip-link {
  border-radius: 8px;
}

/* ---- the primary button: every "Join the waitlist", the Discord's, and the support widget's ---- */

body.site .button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--hc-grad);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  box-shadow: var(--hc-shadow);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}

body.site .button:hover {
  background: var(--violet);
  color: var(--white);
  transform: none;
  box-shadow: var(--hc-shadow);
}

body.site .button:active {
  background: var(--violet-dark);
  transform: none;
  box-shadow: inset 0 1px 2px rgba(7, 5, 15, 0.35);
  transition-duration: 70ms;
}

body.site .button:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

/* Waiting for the service's answer (waitlist.js disables it while it posts): the surface, quiet words. */
body.site .button[disabled],
body.site .button[aria-disabled="true"] {
  background: var(--hc-raised);
  color: var(--muted);
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--hc-line-strong);
}

/* In the bar, as tall as the bar's icon buttons; on the phone's menu and after launch, 48px. */
body.site .button--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

body.site .button--lg {
  min-height: 48px;
  padding: 0 24px;
}

/* ---- the secondary button: a restrained outline in the same proportions ---- */

body.site .button--frost,
body.site .button--quiet {
  border: 1px solid var(--hc-outline);
  background: transparent;
  color: var(--offwhite);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.site .button--frost:hover,
body.site .button--quiet:hover {
  border-color: var(--hc-outline-hover);
  background: var(--hc-raised);
  color: var(--white);
  box-shadow: none;
}

body.site .button--frost:active,
body.site .button--quiet:active {
  background: #1B1530;
  box-shadow: none;
}

/* ---- the announcement's button: the primary, sized for the bar ---- */

body.site .promo-btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--hc-grad);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 16px;
  box-shadow: var(--hc-shadow);
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

body.site .promo-btn:hover {
  background: var(--violet);
  color: var(--white);
  transform: none;
}

body.site .promo-btn:active {
  background: var(--violet-dark);
}

/* ---- the bar: the logo, the links, the community icons and the phone's menu button ---- */

/* The owner's logo, about 32px tall (26px on a phone), sharp, level with the links. The picture is cropped close round
   the lockup (a little clear space for its glow), so at 32px the letters stand about 27px tall, and it starts on the
   page's left edge, in line with everything under it. ("home: page" may set the home page's own, after this.) */
body.site .wordmark--logo {
  flex: none;
  gap: 0;
  border-radius: 8px;
}

body.site .logo {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: 32px;
}

body.site .nav-link {
  border-radius: 8px;
  font-size: 14px;
}

/* The icon buttons (the bar's, the phone menu's and the footer's) and the menu button: 44px, the controls' corners. */
body.site .icon-link,
body.site .menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}

body.site .menu-toggle {
  color: var(--white);
}

body.site .icon-link:hover,
body.site .menu-toggle:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

body.site .menu-toggle[aria-expanded="true"] {
  border-color: var(--hc-outline-hover);
  background: var(--hc-raised);
}

/* ---- the sign-up, the hero's, the last section's, the affiliates' and the kit footer's: the field and the button side by side, both
   48px tall (stacked on a phone), rather than the button riding inside one capsule. Same fields, ids and words. ---- */

body.site :is(.hero, .final, .aff-apply) .field-row {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The transparent outline is what forced colours repaint as a ring: never outline: none here. */
body.site :is(.hero, .final, .aff-apply) .field {
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}

body.site :is(.hero, .final, .aff-apply) .field::placeholder {
  color: var(--faint);
  opacity: 1;
}

body.site :is(.hero, .final, .aff-apply) .field:hover {
  border-color: var(--hc-line-strong);
}

body.site :is(.hero, .final, .aff-apply) .field:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--violet);
  box-shadow: var(--hc-ring);
}

body.site :is(.hero, .final, .aff-apply) .field[aria-invalid="true"] {
  border-color: var(--down);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* A browser's autofill keeps the field's own colours. */
body.site :is(.hero, .final, .aff-apply) .field:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  box-shadow: inset 0 0 0 48px var(--hc-surface);
}

body.site :is(.hero, .final, .aff-apply) .field:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 48px var(--hc-surface), var(--hc-ring);
}

body.site :is(.hero, .final, .aff-apply) .field-row .button {
  min-height: 48px;
  padding: 0 22px;
}

/* Joined: the service's answer in a quiet box with the field's corners. */
body.site .signup.is-done .status {
  padding: 14px 18px;
  border-radius: 12px;
}

/* ---- the facts (under the home page's hero, atop how it works): their wells in the same lines and corners, the
   figures in tabular numerals ---- */

body.site .fact-icon {
  border-radius: 12px;
  border-color: var(--hc-line-strong);
  background: rgba(16, 12, 28, 0.6);
}

body.site .fact-value {
  font-variant-numeric: tabular-nums;
}

/* ---- labels in sentence case: no all-capitals, no letter-spacing ---- */

body.site .footer-head,
body.home .step3-n,
body.home .pfm-kicker,
body.home .pfm-kind,
body.home .glance-kicker {
  letter-spacing: 0;
  text-transform: none;
}

body.home .step3-n {
  font-size: 13.5px;
  color: var(--violet-light);
}

body.home .pfm-kicker {
  font-size: 14px;
  color: var(--muted);
}

body.home .pfm-kind {
  font-size: 13px;
  font-weight: 600;
  color: var(--offwhite);
}

body.site .footer-head {
  font-size: 14px;
  color: var(--muted);
}

body.home .glance-kicker {
  font-size: 14px;
  font-weight: 600;
}

/* ---- the small interfaces: their figures in tabular numerals ---- */

body.site .rc span:last-child,
body.home .split-you,
body.home .split-firm,
body.home .days-cap {
  font-variant-numeric: tabular-nums;
}

/* ---- the platform's tabs: one track, the selected screen raised and outlined ---- */

body.home .pf-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 12px;
  background: var(--hc-surface);
}

body.home .pf-tab {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

body.home .pf-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

body.home .pf-tab[aria-selected="true"] {
  background: var(--hc-raised);
  color: var(--white);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hc-outline-hover), 0 1px 2px rgba(7, 5, 15, 0.45);
}

body.home .pf-tab:focus-visible {
  outline-offset: 1px;
}

/* ---- the questions (the home page's, the rules', the affiliates'): rows on 1px lines, the toggle in the controls'
   corners (its cross turns, not the box) ---- */

body.site .faq-list {
  border-top-color: var(--hc-line-strong);
}

body.site .qa {
  border-bottom-color: var(--hc-line-strong);
}

body.site .qa-q {
  border-radius: 4px;
}

body.site .qa-q:hover {
  color: var(--white);
}

body.site .qa-q:focus-visible {
  outline-offset: 2px;
}

body.site .qa-icon {
  border: 1px solid var(--hc-line-strong);
  border-radius: 8px;
  background: var(--hc-surface);
  color: var(--muted);
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

body.site .qa-icon .ic {
  transition: transform 350ms var(--ease);
}

body.site .qa-q:hover .qa-icon {
  border-color: var(--hc-outline);
  color: var(--white);
}

body.site .qa[open] .qa-icon {
  transform: none;
  border-color: var(--hc-outline-hover);
  background: var(--hc-raised);
  color: var(--white);
}

body.site .qa[open] .qa-icon .ic {
  transform: rotate(45deg);
}

/* ---- the footer's links ---- */

body.site .footer-links a,
body.site .footer-legal a,
body.site .footer-join {
  border-radius: 4px;
}

body.site .footer-join:hover {
  color: var(--white);
}

/* "Join the waitlist" is a hair wider than "join the waitlist": a little less room before it keeps it at the end of the
   last line on a 390px phone, where the original page has it. */
body.site .footer-end {
  column-gap: 16px;
}

/* ---- phones ---- */

@media (max-width: 559px) {
  body.site .button--sm {
    padding: 0 12px;
    font-size: 13.5px;
  }

  body.site .logo {
    height: 26px;
  }

  /* Four screens do not fit on one line of a phone: each name takes two, with room for both. */
  body.home .pf-tab {
    min-height: 44px;
    padding: 4px 10px;
    line-height: 1.2;
  }
}

/* Just over the width where the bar's button goes (379px and under): the logo, the button and the menu in one line. */
@media (max-width: 399px) {
  body.site .button--sm {
    padding: 0 10px;
  }
}

/* The narrowest phones: the four names still inside the row, not cut off at its edge. */
@media (max-width: 379px) {
  body.home .pf-tab {
    padding: 4px 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site .qa-icon .ic {
    transition: none;
  }
}

/* == end home: components == */

/* == public pages == */

/*
  The other public pages -- the rules, how it works, the affiliates, careers, the privacy note and the terms -- in the
  home page's design (the owner's brief of 2026-10-23). The header, the footer, the buttons, the fields and the
  questions are every page's ("home: components"); here is what is these pages' own: labels in sentence case, never all
  capitals; the same 1px lines, 12px wells and 8px corners as the home page's controls; flat surfaces and subtle
  shadows, never a violet glow; and, as the home page's hero has, faint hexagon lines (/brand/hex.svg, still, faded out
  toward their edges, behind the words) behind the heroes of how it works, careers and the affiliates. The rules, the
  privacy note and the terms are for reading: nothing is drawn behind their words.

  Every rule sits under body.site; the elements are the inner pages' own (none is on the home page), but for the
  sections' fade-in, which the home page turns off the same way ("home: page").
*/

/* Nothing waits to appear as you scroll: the site-wide fade-in on every section's heading and cards is off. */
.js body.site .reveal,
.js body.site .reveal.is-in,
.js body.site .stagger.reveal > *,
.js body.site .stagger.reveal.is-in > *,
.js body.site .stagger.reveal.is-in > :nth-child(n) {
  opacity: 1;
  animation: none;
}

/* ---- the hero: the words and the scene, on a quieter light; the scene in a plain frame ---- */

body.site .page-hero {
  background: radial-gradient(50% 60% at 15% 0%, rgba(124, 58, 237, 0.12), transparent 70%);
}

/* The lines sit over the hero's light and under its words: the hero is their stacking context. */
body.site .page-hero--lines {
  isolation: isolate;
}

body.site .page-hero--lines::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/brand/hex.svg) 50% 0 / 84px 48px;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 24% 48%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 60% at 24% 48%, #000 20%, transparent 100%);
}

/* A lit top edge and a soft contact shadow, no violet glow; the affiliates' drawing stands without a frame. */
body.site .page-hero:not(.aff-hero) .page-hero-media {
  border-color: var(--hc-line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(7, 5, 15, 0.45), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

/* ---- the wells the icons sit in (the rules' groups, careers' values, the affiliates' cards, how it works' steps):
   the home page's facts' wells, the same lines and corners ---- */

body.site .rgroup-icon,
body.site .value-icon,
body.site .aff-icon,
body.site .tstep-node {
  border-color: var(--hc-line-strong);
  border-radius: 12px;
  background: var(--hc-surface);
}

/* ---- how it works: the step labels in sentence case, the line between the steps a quiet track ---- */

body.site .tstep-n {
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--violet-light);
}

body.site .tsteps::before {
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.3), rgba(196, 181, 253, 0.04));
}

body.site .pp-list span {
  font-variant-numeric: tabular-nums;
}

/* ---- the rules: the tables in the body's weights, each rule's note under its name where there is room ---- */

body.site .compare-title {
  font-weight: 650;
}

body.site .compare-hint {
  font-weight: 500;
}

body.site .rules thead th {
  font-weight: 650;
}

body.site .rules tbody th {
  font-weight: 600;
}

body.site .rules td {
  font-weight: 600;
}

@media (min-width: 600px) {
  body.site .rules-note {
    display: block;
    margin-top: 2px;
    line-height: 1.4;
  }
}

/* ---- careers: the roles' state as a quiet tag; the way in on a flat surface ---- */

body.site .role-state {
  padding: 3px 10px;
  border-color: var(--hc-line-strong);
  border-radius: 6px;
  background: var(--hc-surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 18px;
}

body.site .door,
body.site .aff-apply-box {
  border-color: var(--hc-line-strong);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent 45%), var(--surface-1);
  box-shadow: var(--lift-1);
}

/* ---- the affiliates: the drawing without its glow and labelled an example, the labels in sentence case ---- */

/* The grid's two sets of lines each on its 28px tile, and the light once over the whole drawing. One column no wider
   than the drawing, so the link shortens to an ellipsis on the narrowest phones rather than run past the edge. */
body.site .aff-vis {
  grid-template-columns: minmax(0, 1fr);
  border-color: var(--hc-line-strong);
  background-image: var(--grid-lines), radial-gradient(90% 70% at 100% 0%, rgba(124, 58, 237, 0.16), transparent 60%);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(7, 5, 15, 0.45), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

/* The dashboard drawn, not anyone's activity: it says so in its corner, as the home page's drawings do. */
body.site .aff-vis-tag {
  justify-self: end;
  padding: 2px 8px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 6px;
  background: rgba(7, 5, 15, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body.site .aff-link {
  border-color: var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
}

body.site .aff-stat {
  border-radius: 12px;
}

body.site .aff-link-label,
body.site .aff-who-head,
body.site .aff-faq-head {
  letter-spacing: 0;
  text-transform: none;
}

body.site .aff-link-label {
  font-size: 12.5px;
  font-weight: 600;
}

body.site .aff-who-head,
body.site .aff-faq-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

body.site .aff-chips li {
  border-color: var(--hc-line-strong);
  border-radius: 8px;
  background: var(--hc-surface);
}

body.site .aff-step-n {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---- the privacy note and the terms: long-form reading, in the body's weight ---- */

body.site .prose p,
body.site .prose ul {
  font-weight: 400;
  line-height: 1.7;
}

body.site .prose code {
  border-radius: 6px;
}

body.site .terms-draft {
  border-radius: 12px;
}

/* The note's first line at the box's own padding, not a paragraph's space below it. */
body.site .terms-draft > :first-child {
  margin-top: 0;
}

/* ---- the narrowest phones: careers' long address wraps inside its button, with the room it had; and how it works'
   payout steps may take two lines each, so the last one stays inside its drawing ---- */

@media (max-width: 379px) {
  body.site .door-cta .button {
    padding-inline: 16px;
  }

  body.site .tstep-vis .timeline {
    gap: 8px;
  }

  body.site .tstep-vis .tl-label {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}

/* == end public pages == */

/* == home: page == */

/*
  The home page's own character (the owner's brief of 2026-10-23, second round): the owner's logo in the bar; a faint
  pattern of hexagon lines (/brand/hex.svg, the brand's violet at a few per cent, faded out toward its edges, never
  moving) behind the hero, across the hero's foot into the accounts, and behind the last call to action; how it works
  as one connected sequence of numbered steps; the example payout's steps; and the terminal's captures, flat in a
  quiet frame with nothing drawn over them, said in words under them.

  A few things light up once as they come into view: waitlist.js (its last block) sets html.inview, then .is-inview on
  each element the page marks data-inview. Nothing is hidden at any time: until then a step's marker is only unlit.
  Without the script, without IntersectionObserver, or with reduced motion, html.inview is never set and every marker
  is lit and every line drawn from the start. Every rule sits under body.home, so no other page can change.
*/

body.home {
  /* Where an element counts as in view (waitlist.js reads it): once its top is a fifth of the screen above the bottom. */
  --inview-margin: 0px 0px -20% 0px;
}

/* ---- the logo in the bar: about 32px tall (26px on a phone), sharp, level with the links ---- */

body.home .wordmark--logo {
  flex: none;
  gap: 0;
  border-radius: 8px;
}

/* The picture is cropped close round the lockup (a little clear space for its glow), so at 32px the letters stand about
   27px tall, and it starts on the page's left edge, in line with everything under it. */
body.home .logo {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: 32px;
}

/* ---- the hexagon lines: one 84 x 48 tile of the brand's violet, faded out at the edges of each place it is used ---- */

/* Over the hero's lit void and under its words, strongest round the wordmark and gone before the edges. */
body.home .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url(/brand/hex.svg) 50% 0 / 84px 48px;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 34%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 60% at 50% 34%, #000 30%, transparent 100%);
}

/* The accounts' glow starts at their top edge (.accounts-sec), brightest there, so it met the hero in a hard line: its
   upper half, mirrored onto the hero's own ground (under the plate, seen where the plate fades out), makes one glow of
   the two, centred on the seam. */
body.home .hero {
  background: radial-gradient(60% 420px at 50% 100%, rgba(124, 58, 237, 0.14), transparent 70%);
}

/* The same lines on the same grid (the same box top, the same tile), from the hero's foot on into the top of the
   accounts: under everything there, so they pass behind the words and the controls, never over them. */
body.home .hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: -280px;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/brand/hex.svg) 50% 0 / 84px 48px;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(ellipse 60% 300px at 50% calc(100% - 280px), #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 300px at 50% calc(100% - 280px), #000 20%, transparent 100%);
}

/* Behind the last call to action: over the panel's picture, under its words and its form. */
body.home .final-inner::before {
  content: '';
  position: absolute;
  inset: 0 -50%;
  z-index: -1;
  pointer-events: none;
  background: url(/brand/hex.svg) 50% 50% / 84px 48px;
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 25%, transparent 100%);
}

/* ---- how it works: one sequence, a numbered marker for each step and a thin line on to the next ---- */

/* The old dotted joins give way to the sequence's own line. */
body.home .hw-step::after {
  content: none;
}

body.home .hw-mark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--violet);
  border-radius: 50%;
  background-color: var(--violet);
  color: var(--white);
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.14);
}

/* The line: a faint track, and the violet drawn along it. */
body.home .hw-line {
  position: absolute;
  background: rgba(196, 181, 253, 0.16);
}

body.home .hw-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--violet-mid);
}

body.home .hw-step .step3-title {
  margin-top: 20px;
}

/* Wide: the steps side by side, each line from just past its marker to just short of the next one (48px apart). */
@media (min-width: 900px) {
  body.home .hw-line {
    top: 22px;
    left: calc(50% + 30px);
    width: calc(100% - 12px);
    height: 1px;
  }

  body.home .hw-line::after {
    transform-origin: 0 50%;
  }

  /* After launch: five steps, three and two to a row until they fit on one, with no line from one row to the next. */
  body.home .steps3--five .hw-line {
    display: none;
  }
}

@media (min-width: 1100px) {
  body.home .steps3--five .hw-line {
    display: block;
    width: calc(100% - 36px);
  }
}

/* Narrow: the steps read down one line, the marker on the left and the words beside it. */
@media (max-width: 899px) {
  body.home .hw-step {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body.home .hw-mark {
    grid-row: span 2;
    align-self: start;
  }

  body.home .hw-step .step3-title {
    margin-top: 0;
    padding-top: 10px;
  }

  body.home .hw-line {
    top: 52px;
    bottom: -22px;
    left: 22px;
    width: 1px;
  }

  body.home .hw-line::after {
    transform-origin: 50% 0;
  }
}

/* With the script, a step waits unlit -- still there, still readable -- until it comes into view. */
html.inview body.home .hw-step:not(.is-inview) .hw-mark {
  border-color: var(--hc-line-strong);
  background-color: var(--hc-surface);
  color: var(--faint);
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0);
}

@media (min-width: 900px) {
  html.inview body.home .hw-step:not(.is-inview) .hw-line::after {
    transform: scaleX(0);
  }
}

@media (max-width: 899px) {
  html.inview body.home .hw-step:not(.is-inview) .hw-line::after {
    transform: scaleY(0);
  }
}

/* Then it lights, and its line draws on toward the next. Side by side the steps come into view together, so each
   waits for the one before it; read down a phone, each lights as it arrives. Only lighting up is animated. */
html.inview body.home .hw-step.is-inview .hw-mark {
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}

html.inview body.home .hw-step.is-inview .hw-line::after {
  transition: transform 420ms var(--ease) 120ms;
}

@media (min-width: 900px) {
  html.inview body.home .hw-step.is-inview:nth-child(2) .hw-mark {
    transition-delay: 350ms;
  }

  html.inview body.home .hw-step.is-inview:nth-child(2) .hw-line::after {
    transition-delay: 470ms;
  }

  html.inview body.home .hw-step.is-inview:nth-child(3) .hw-mark {
    transition-delay: 700ms;
  }

  html.inview body.home .hw-step.is-inview:nth-child(3) .hw-line::after {
    transition-delay: 820ms;
  }
}

/* After launch the five steps share one row only from here; under it the last two come into view on a row of their
   own and light as they arrive. */
@media (min-width: 1100px) {
  html.inview body.home .hw-step.is-inview:nth-child(4) .hw-mark {
    transition-delay: 1050ms;
  }

  html.inview body.home .hw-step.is-inview:nth-child(4) .hw-line::after {
    transition-delay: 1170ms;
  }

  html.inview body.home .hw-step.is-inview:nth-child(5) .hw-mark {
    transition-delay: 1400ms;
  }
}

/* ---- the drawings that show one possible course, not a figure of the plan, say so in a corner ---- */

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

/* ---- the example payout: requested, approved, paid in the catalog's payout asset, ticked off in turn ---- */

/* Three equal columns, each dot in the middle of its own, so the line runs from the first dot to the last and no
   further; the last step's words, the longest, may take two lines in a narrow card. Under the line, a faint track. */
body.home .timeline--seq {
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) 50% 16px / 66.667% 2px no-repeat;
}

body.home .timeline--seq::before {
  left: 16.667%;
  right: 16.667%;
  transform-origin: 0 50%;
}

body.home .timeline--seq .tl {
  flex: 1 1 0;
  min-width: 0;
}

body.home .timeline--seq .tl-label {
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.35;
}

html.inview body.home .timeline--seq:not(.is-inview)::before {
  transform: scaleX(0);
}

html.inview body.home .timeline--seq:not(.is-inview) .tl-dot {
  border-color: var(--hc-line-strong);
  background: var(--surface-1);
  color: rgba(173, 168, 191, 0.4);
  box-shadow: none;
}

/* The last step's words turn green with its dot, not before it. */
html.inview body.home .timeline--seq:not(.is-inview) .tl--done .tl-label {
  color: var(--muted);
}

/* The card rises in first (the bento's own reveal); then the steps tick off, one after another. */
html.inview body.home .timeline--seq.is-inview::before {
  transition: transform 900ms var(--ease) 450ms;
}

html.inview body.home .timeline--seq.is-inview .tl-dot {
  transition: border-color 300ms var(--ease) 450ms, background-color 300ms var(--ease) 450ms, color 300ms var(--ease) 450ms, box-shadow 300ms var(--ease) 450ms;
}

html.inview body.home .timeline--seq.is-inview .tl:nth-child(2) .tl-dot {
  transition-delay: 850ms;
}

html.inview body.home .timeline--seq.is-inview .tl:nth-child(3) .tl-dot {
  transition-delay: 1250ms;
}

html.inview body.home .timeline--seq.is-inview .tl--done .tl-label {
  transition: color 300ms var(--ease) 1250ms;
}

/* ---- the terminal's captures: flat and sharp in a quiet frame, nothing drawn over them, said in words under them ---- */

/* Shown flat, so the capture reads at its own sharpness. */
body.home .pf-frame,
body.home .pf-fig:hover .pf-frame {
  transform: none;
}

/* A quiet frame: a hairline and a short shadow, and no pool of violet light under it. */
body.home .pf::before {
  content: none;
}

body.home .pf-frame {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 28px 48px -32px rgba(0, 0, 0, 0.9);
}

/* In the bar, on the right: what the capture shows is live market data, and the day it was taken. */
body.home .pf-tag {
  grid-column: 3;
  justify-self: end;
  padding: 1px 8px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

body.home .pf-cap-text {
  margin: 0;
}

/* Narrower, the shorter tag ("Live data, Oct 23, 2026"); on a phone, the bar leaves out the address for it. */
@media (max-width: 759px) {
  body.home .pf-tag-more {
    display: none;
  }
}

@media (max-width: 479px) {
  body.home .pf-bar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  body.home .pf-url {
    display: none;
  }

  body.home .pf-tag {
    grid-column: 2;
  }
}

/* ---- phones ---- */

@media (max-width: 559px) {
  body.home .logo {
    height: 26px;
  }
}

/* ---- reduced motion: the script sets nothing, so every marker is lit and every line drawn; and nothing moves ---- */

@media (prefers-reduced-motion: reduce) {
  html.inview body.home .hw-step.is-inview .hw-mark,
  html.inview body.home .hw-step.is-inview .hw-line::after,
  html.inview body.home .timeline--seq.is-inview::before,
  html.inview body.home .timeline--seq.is-inview .tl-dot,
  html.inview body.home .timeline--seq.is-inview .tl--done .tl-label {
    transition: none;
  }
}

/* The page's few entrances are its own (How it works, the payout steps): the site-wide fade-in on every section's
   heading and cards is off here, so nothing waits to appear as you scroll. */
.js body.home .reveal,
.js body.home .reveal.is-in,
.js body.home .stagger.reveal > *,
.js body.home .stagger.reveal.is-in > *,
.js body.home .stagger.reveal.is-in > :nth-child(n) {
  opacity: 1;
  animation: none;
}

/* == end home: page == */

/* ---- motion ----------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal.is-in,
  .js .stagger.reveal > *,
  .js .stagger.reveal.is-in > * {
    opacity: 1;
    animation: none;
  }

  .button:hover,
  .promo-btn:hover,
  .feat:hover,
  .carousel-btn:hover,
  .program-tab:hover .program-tab-art,
  .program-tab[aria-selected="true"] .program-tab-art,
  .sheet-close:hover {
    transform: none;
  }

  .account--featured .account-card::after {
    animation: none;
  }

  .account-card,
  .account:hover .account-card,
  .account--featured .account-card,
  .account--featured:hover .account-card {
    transform: none;
    translate: none;
  }

  .account:hover .account-art {
    transform: translateZ(40px) rotate(10deg);
  }

  .program-tabs::before,
  .pf-frame,
  .qa-icon {
    transition: none;
  }

  .pf-frame,
  .pf-fig:hover .pf-frame {
    transform: none;
  }

  .sheet-card {
    animation: none;
  }

  .compare-toggle::after {
    transition: border-color 160ms ease-out;
  }
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: reduce) {
    .qa::details-content {
      transition: none;
    }
  }
}

/* ---- the launch rewards game: three cups in a dialog, a bottom sheet on a phone (sections/cups.ts, waitlist.js) --- */

/*
  Every size and every time of the game is here: the cups' width and the step between them, how long the shuffle and
  the lift take (waitlist.js waits for the animations to finish and counts no time of its own), and what reduced motion
  leaves of them. The cups are drawn in graphite with a violet rim light, the brand's 3D mark on each; the only colour
  that glows is the accent's.
*/
/*
  The dialog is a container (`cups`): its layout follows its own width -- the screen's, on a page -- so the admin's
  preview can draw it in a desktop frame and a phone frame at once with these same rules.
*/
.cups {
  container: cups / inline-size;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: max(24px, 5vh) 16px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cups[hidden] {
  display: none;
}

body.has-cups {
  overflow: hidden;
}

.cups-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 5, 15, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: cups-fade 240ms ease-out both;
}

/* The card carries the game's sizes and times (a container query can restyle the card, never the container). */
.cups-card {
  --cup-w: 112px;
  --cup-gap: 30px;
  --cups-pad: 28px;
  --cup-step: calc(var(--cup-w) + var(--cup-gap));
  --cups-shuffle: 2400ms;
  --cups-lift: 560ms;
  position: relative;
  width: min(580px, 100%);
  padding: var(--cups-pad);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 64% at 50% 0%, rgba(124, 58, 237, 0.24), transparent 62%), var(--surface-1);
  box-shadow: var(--lift-3), 0 0 120px -24px rgba(124, 58, 237, 0.55);
  animation: cups-in 420ms var(--ease) both;
}

/* The handle a bottom sheet shows on a phone. */
.cups-grab {
  display: none;
}

.cups-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.cups-close svg {
  width: 16px;
  height: 16px;
}

.cups-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.cups-close:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

.cups-head {
  padding: 0 40px;
  text-align: center;
}

.cups-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(124, 58, 237, 0.14);
  color: var(--violet-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cups-eyebrow .ic {
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.cups-title {
  margin-top: 14px;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}

.cups-body {
  max-width: 470px;
  margin: 10px auto 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- the stage: a table lit in violet from behind, the three cups on it ---- */

.cups-stage {
  position: relative;
  margin: 14px calc(var(--cups-pad) * -1) 0;
  padding: 74px 0 26px;
  overflow: hidden;
  background:
    radial-gradient(42% 58% at 50% 74%, rgba(124, 58, 237, 0.32), transparent 72%),
    radial-gradient(60% 26% at 50% 86%, rgba(196, 181, 253, 0.1), transparent 72%);
}

/* The table's front edge. */
.cups-stage::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.3), transparent);
}

.cups-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--cup-gap);
}

.cup {
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--cup-w);
  aspect-ratio: 120 / 132;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  color: var(--white);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms ease-out;
}

.cup:disabled {
  cursor: default;
}

.cup:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 8px;
}

.cup-shell {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform var(--cups-lift) var(--ease);
}

.cup-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(124, 58, 237, 0.24));
}

.cup-side {
  fill: url(#cups-side);
}

.cup-band {
  fill: url(#cups-band);
}

.cup-top {
  fill: url(#cups-top);
}

.cup-shine {
  fill: none;
  stroke: url(#cups-shine);
  stroke-width: 4;
  stroke-linecap: round;
}

/* The brand's mark on the cup's face: the image as it is, never redrawn. */
.cup-mark {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 40%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.45));
  pointer-events: none;
}

.cup-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -7%;
  z-index: 0;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), transparent);
  transition: transform var(--cups-lift) var(--ease), opacity var(--cups-lift) var(--ease);
}

/* What a lifted cup shows: the reward the service drew, or a lock until the visitor joins. */
.cup-prize {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #8B5CF6, var(--violet-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(196, 181, 253, 0.35), 0 10px 26px -6px rgba(124, 58, 237, 0.85);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.86);
  transition: opacity 260ms ease-out, transform 360ms var(--ease);
}

.cup-prize-text {
  display: inline-block;
}

.cup-prize-text::first-letter {
  text-transform: uppercase;
}

.cup-lock {
  display: none;
  place-items: center;
}

.cup-lock .ic {
  width: 16px;
  height: 16px;
}

.cup.is-locked .cup-lock {
  display: grid;
}

.cup.is-locked .cup-prize {
  background: rgba(20, 17, 32, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(196, 181, 253, 0.32);
  color: var(--violet-light);
}

.cup.is-lifted .cup-shell {
  transform: translateY(-50%) rotate(-8deg);
}

.cup.is-lifted .cup-shadow {
  opacity: 0.35;
  transform: scale(0.7);
}

.cup.is-lifted .cup-prize {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-delay: calc(var(--cups-lift) * 0.4);
}

/* Joined under a lifted cup: the lock gives way to the reward. */
.cup.is-revealed .cup-prize {
  animation: cups-chip 520ms var(--ease) both;
}

/* Ready to be picked: a cup answers the pointer and the keyboard by rising a little. */
.cups-stage[data-state="pick"] .cup:hover .cup-shell,
.cups-stage[data-state="pick"] .cup:focus-visible .cup-shell {
  transform: translateY(-8px);
}

.cups-stage[data-state="revealed"] .cup:not(.is-lifted) {
  opacity: 0.42;
}

/*
  The shuffle: four swaps, each cup passing in front of (lower, larger) or behind (higher, smaller) the one it trades
  places with, ending where they began -- so nothing has to be tracked once it stops. Each segment eases in and out.
*/
.cups-stage.is-shuffling .cup--a {
  animation: cups-a var(--cups-shuffle) cubic-bezier(0.45, 0, 0.55, 1) both;
}

.cups-stage.is-shuffling .cup--b {
  animation: cups-b var(--cups-shuffle) cubic-bezier(0.45, 0, 0.55, 1) both;
}

.cups-stage.is-shuffling .cup--c {
  animation: cups-c var(--cups-shuffle) cubic-bezier(0.45, 0, 0.55, 1) both;
}

@keyframes cups-a {
  0% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
  12.5% {
    transform: translate3d(calc(var(--cup-step) * 0.5), 10px, 0) scale(1.06);
    z-index: 3;
  }
  25% {
    transform: translate3d(var(--cup-step), 0, 0);
    z-index: 2;
  }
  37.5% {
    transform: translate3d(calc(var(--cup-step) * 1.5), -12px, 0) scale(0.92);
    z-index: 1;
  }
  50%,
  75% {
    transform: translate3d(calc(var(--cup-step) * 2), 0, 0);
    z-index: 2;
  }
  87.5% {
    transform: translate3d(var(--cup-step), -16px, 0) scale(0.9);
    z-index: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
}

@keyframes cups-b {
  0% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
  12.5% {
    transform: translate3d(calc(var(--cup-step) * -0.5), -12px, 0) scale(0.92);
    z-index: 1;
  }
  25%,
  50% {
    transform: translate3d(calc(var(--cup-step) * -1), 0, 0);
    z-index: 2;
  }
  62.5% {
    transform: translate3d(calc(var(--cup-step) * -0.5), 10px, 0) scale(1.06);
    z-index: 3;
  }
  75%,
  100% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
}

@keyframes cups-c {
  0%,
  25% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
  37.5% {
    transform: translate3d(calc(var(--cup-step) * -0.5), 10px, 0) scale(1.06);
    z-index: 3;
  }
  50% {
    transform: translate3d(calc(var(--cup-step) * -1), 0, 0);
    z-index: 2;
  }
  62.5% {
    transform: translate3d(calc(var(--cup-step) * -1.5), -12px, 0) scale(0.92);
    z-index: 1;
  }
  75% {
    transform: translate3d(calc(var(--cup-step) * -2), 0, 0);
    z-index: 2;
  }
  87.5% {
    transform: translate3d(calc(var(--cup-step) * -1), 14px, 0) scale(1.08);
    z-index: 3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
}

@keyframes cups-fade {
  from {
    opacity: 0;
  }
}

@keyframes cups-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@keyframes cups-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes cups-chip {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.6);
  }
}

@keyframes cups-calm {
  50% {
    opacity: 0.55;
  }
}

/* The gradients the cups are filled with: in the document, out of sight. */
.cups-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- the words under the stage: the step, the rewards and their chances, the sign-up, the confirmation ---- */

.cups-say {
  min-height: 21px;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  color: var(--violet-light);
}

/* Once a cup is lifted the panel beside it says it all: the line stays for a screen reader only. */
.cups[data-step="revealed"] .cups-say {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cups-play,
.cups-side {
  min-width: 0;
}

/* The way in, and who it is for: shown until the cups are ready to be picked. */
.cups-go {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 12px;
}

.cups[data-step="pick"] .cups-go,
.cups[data-step="revealed"] .cups-go {
  display: none;
}

.cups-side {
  margin-top: 22px;
}

.cups-panel {
  margin-top: 0;
}

.cups-panel[hidden],
.cups-note[hidden],
.cups-result-reward[hidden],
.cups-result-note[hidden] {
  display: none;
}

.cups-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 400px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.cups-note .ic {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--gold);
}

.cups-note--real {
  color: #D9D2F0;
}

.cups-note--real .ic {
  color: var(--up);
}

.cups-odds-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cups-prizes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.cups-prize {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.cups-prize-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.14);
  color: var(--violet-light);
}

.cups-prize-ic .ic {
  width: 16px;
  height: 16px;
}

.cups-prize--rare .cups-prize-ic {
  border-color: rgba(255, 201, 71, 0.24);
  background: rgba(255, 201, 71, 0.1);
  color: var(--gold);
}

.cups-prize-main {
  min-width: 0;
}

.cups-prize-name {
  display: block;
  color: var(--white);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

.cups-prize-name::first-letter {
  text-transform: uppercase;
}

.cups-prize-text {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.cups-prize-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.cups-prize-tag {
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

.cups-prize-pct {
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cups-fair {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}

.cups-elig {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cups-elig .ic {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--violet-light);
}

.cups-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.cups-start {
  min-width: 260px;
}

.cups-panel-title {
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.cups-panel-lede {
  max-width: 440px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

.signup--cups {
  margin: 16px auto 0;
}

.signup--cups .consent {
  text-align: center;
}

.cups-result {
  padding: 20px 20px 18px;
  border: 1px solid rgba(196, 181, 253, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.cups-result-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--up-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.cups-result-ok .ic {
  flex: none;
  width: 16px;
  height: 16px;
}

.cups-result-eyebrow {
  margin: 16px 0 0;
  color: var(--violet-light);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cups-result-name {
  margin: 6px 0 0;
  color: var(--white);
  font-family: var(--display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cups-result-name::first-letter {
  text-transform: uppercase;
}

.cups-result-text {
  max-width: 420px;
  margin: 10px auto 0;
  color: #D9D2F0;
  font-size: 14px;
  line-height: 1.55;
}

.cups-result-note {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

.cups-result-note .ic {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--violet-light);
}

/* ---- a wide dialog: the cups on the left, the rewards (then the sign-up, then the confirmation) on the right ---- */

@container cups (min-width: 960px) {
  .cups-card {
    --cup-w: 106px;
    --cup-gap: 26px;
    --cups-pad: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 40px;
    width: min(940px, 100%);
    padding: 36px 36px 34px;
  }

  .cups-head {
    padding: 0;
  }

  .cups-stage {
    margin: 18px 0 0;
    border-radius: 22px;
  }

  /* Out of sight while the cups are picked and revealed, but still holding its room: the card keeps its height. */
  .cups[data-step="pick"] .cups-go,
  .cups[data-step="revealed"] .cups-go {
    display: grid;
    visibility: hidden;
  }

  .cups-side {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    padding: 8px 0 8px 36px;
    border-left: 1px solid var(--hairline);
  }
}

/* ---- a phone: a bottom sheet, the cups closer together ---- */

/* The dialog puts the sheet at the foot of the screen (a container query restyles only what is inside the dialog). */
@media (max-width: 599px) {
  .cups {
    place-items: end center;
    padding: 0;
    overflow: hidden;
  }
}

@container cups (max-width: 599px) {
  .cups-card {
    --cup-w: 86px;
    --cup-gap: 16px;
    --cups-pad: 16px;
    width: 100%;
    max-height: 94dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px var(--cups-pad) calc(20px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    animation-name: cups-up;
  }

  .cups-grab {
    display: block;
    position: absolute;
    top: 9px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
  }

  .cups-close {
    top: 14px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .cups-head {
    padding: 0 36px;
  }

  .cups-title {
    font-size: 22px;
  }

  .cups-body {
    font-size: 14px;
  }

  .cups-stage {
    padding-top: 60px;
  }

  .cup-prize {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  .cups-go {
    justify-items: stretch;
  }

  .cups-start,
  .cups-actions .button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cups-result-name {
    font-size: 36px;
  }
}

@container cups (max-width: 359px) {
  .cups-card {
    --cup-w: 76px;
    --cup-gap: 12px;
  }
}

/* Reduced motion: no travelling cups and no sliding sheet. The shuffle is a soft dimming, the lift is immediate. */
@media (prefers-reduced-motion: reduce) {
  .cups-scrim,
  .cups-card {
    animation: none;
  }

  .cups-stage.is-shuffling .cup--a,
  .cups-stage.is-shuffling .cup--b,
  .cups-stage.is-shuffling .cup--c {
    animation: cups-calm 900ms ease-in-out both;
  }

  .cup-shell,
  .cup-shadow {
    transition: none;
  }

  .cup-prize,
  .cup.is-lifted .cup-prize {
    transform: translate(-50%, 0);
    transition: opacity 200ms ease-out;
    transition-delay: 0s;
  }

  .cup.is-revealed .cup-prize {
    animation: none;
  }

  .cups-stage[data-state="pick"] .cup:hover .cup-shell,
  .cups-stage[data-state="pick"] .cup:focus-visible .cup-shell {
    transform: none;
  }
}

/* == backgrounds == */

/*
  A few quiet grounds beside the hexagon lines ("home: page"), each in one place and each its own kind: faint dots each
  side of How it works' heading, thin grid lines behind the terminal's screens with two small corner marks at the top of
  its section, and sparse contour lines in the corner the FAQ's questions leave empty (/brand/contours.svg). Each is the
  brand's violet at a few per cent, faded out toward its edges, behind the words and never over them, and still: nothing
  here moves. The dots, the marks and the contours are drawn only where the layout leaves them room (wider screens);
  the grid, which the captures cover, at every width. Every rule sits under body.home, so no other page can change.
*/

/* ---- How it works: a field of faint dots each side of the heading, clear of the heading and the steps ---- */

/* From the width where the steps stand in a row (the words then sit in the middle, under the heading): two patches of
   dots at the section's top corners, level with the heading and gone before the steps begin. */
@media (min-width: 900px) {
  body.home .how {
    isolation: isolate;
  }

  body.home .how::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 1px, transparent 1.6px) 50% 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 28vw 200px at 0 150px, #000 10%, transparent 100%), radial-gradient(ellipse 28vw 200px at 100% 150px, #000 10%, transparent 100%);
    mask-image: radial-gradient(ellipse 28vw 200px at 0 150px, #000 10%, transparent 100%), radial-gradient(ellipse 28vw 200px at 100% 150px, #000 10%, transparent 100%);
  }
}

/* ---- the terminal: thin grid lines behind its screens, out toward the window's edges and faded out all round ---- */

body.home .pf::after {
  content: '';
  position: absolute;
  top: -56px;
  right: max(calc(50% - 50vw), -240px);
  bottom: 0;
  left: max(calc(50% - 50vw), -240px);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1px) 50% 0 / 48px 48px,
    linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px) 50% 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* Two small corner marks at the top of the terminal's section, on the content's edges, as a drawing sheet has. */
@media (min-width: 1000px) {
  body.home .platform > .page {
    position: relative;
  }

  body.home .platform > .page::before,
  body.home .platform > .page::after {
    content: '';
    position: absolute;
    top: calc(40px - var(--section-y));
    width: 12px;
    height: 12px;
    border: 0 solid rgba(196, 181, 253, 0.3);
    pointer-events: none;
  }

  body.home .platform > .page::before {
    left: var(--gutter);
    border-width: 1px 0 0 1px;
  }

  body.home .platform > .page::after {
    right: var(--gutter);
    border-width: 1px 1px 0 0;
  }
}

/* ---- the FAQ: sparse contour lines in the bottom corner under the heading's column, which the questions leave empty ---- */

@media (min-width: 900px) {
  body.home .faq-sec {
    isolation: isolate;
  }

  body.home .faq-sec::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(42%, 640px);
    height: min(56%, 420px);
    z-index: -1;
    pointer-events: none;
    background: url(/brand/contours.svg) 0 100% / 720px 560px no-repeat;
    opacity: 0.1;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 40%, transparent 100%);
  }
}

/* == end backgrounds == */

/* == promo == */
/*
  The promo bar at the top of the marketing pages (chrome.ts promoBar, pages/lib/promo.ts; none on the legal pages): the launch offer in bold, its code
  as a plain bordered button with its copy icon that copies it, a slim rule, and the countdown to the launch moment. One row from 640px, on the
  bar's own 40px; on a phone, two rows on 64px: the offer and the code over the countdown. A dark surface with a trace
  of the brand's violet and one hairline under it: no gradient, no glow, nothing that moves but the figures. Those are
  bold and tabular, each unit in a cell two digits wide, so nothing shifts as they change. The code chip is the same
  by each account's price ("home: accounts", .acc-promo). These rules come after the bar's older ones (the header, the
  tones, the phones'), so at equal weight they win; a plain announcement (no code, no countdown) keeps its older look.
*/

.promo,
.promo--brand {
  background: #0E0A1A;
  border-bottom-color: var(--hairline-strong, rgba(255, 255, 255, 0.08));
}

.promo--neutral {
  background: #0E0C15;
  border-bottom-color: var(--hairline-strong);
}

.promo--highlight {
  background: #16111B;
  border-bottom-color: rgba(255, 201, 71, 0.24);
}

.promo-inner--offer {
  gap: 12px;
}

.promo-inner--offer .promo-text {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--white);
}

/* The code: a chip with its copy mark; once copied, "Copied" and a tick in the same place (the words share one cell,
   so the chip keeps its width). Disabled without the script, which is what copies. */
.promo-code {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin: 0;
  padding: 0 7px 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.promo-code:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.04);
}

.promo-code:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

.promo-code:disabled {
  cursor: default;
}

.promo-code:disabled:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
}

.promo-code-face {
  display: grid;
  justify-items: center;
}

.promo-code-text,
.promo-code-done {
  grid-area: 1 / 1;
}

.promo-code-done {
  visibility: hidden;
  color: var(--up-text);
}

.promo-code-ic {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--violet-light);
}

.promo-code-ic--done {
  display: none;
  color: var(--up-text);
}

.promo-code.is-copied {
  border-color: rgba(134, 239, 172, 0.5);
}

.promo-code.is-copied .promo-code-text {
  visibility: hidden;
}

.promo-code.is-copied .promo-code-done {
  visibility: visible;
}

.promo-code.is-copied .promo-code-ic--copy {
  display: none;
}

.promo-code.is-copied .promo-code-ic--done {
  display: block;
}

/* In a line of text (by each account's price): a little smaller, on the line's middle. */
.promo-code--inline {
  height: 24px;
  margin: 0 2px;
  padding: 0 6px 0 8px;
  font-size: 12.5px;
  vertical-align: middle;
}

/* The field the script copies through where the browser has no Clipboard API: never seen, never in the way. */
.copy-buffer {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.promo-rule {
  flex: none;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.16);
}

/* The countdown: "Launch in" and the four units; without the script "Launch" and the date. A counting one keeps the
   clock's width whatever it says, so the row does not shift when the script swaps the date for the clock, or the clock
   for its text at zero. (On the launch site it says the accounts are open, and is as wide as that.) */
.promo-when {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

.promo-when[data-promo-when] {
  min-width: 15.5em;
}

.promo-when-label[hidden],
.promo-date[hidden],
.promo-ended[hidden] {
  display: none;
}

.promo-date {
  font-weight: 600;
  color: var(--offwhite);
}

.promo-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.promo-clock[hidden] {
  display: none;
}

.promo-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.promo-num {
  display: inline-block;
  min-width: 2ch;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--white);
}

.promo-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
}

.promo-ended,
.promo-open {
  font-weight: 600;
  color: var(--white);
}

/* A phone: two rows, the offer and its code over the countdown (and the announcement's button beside it, when it has
   one). The bar is as tall as its two rows; a plain announcement keeps the plain bar's heights where :has() says. */
@media (max-width: 639px) {
  :root:not(.no-promo) {
    --promo-h: 64px;
  }

  .promo-inner--offer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'text code' 'when when';
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
  }

  .promo-inner--offer .promo-text {
    grid-area: text;
  }

  .promo-inner--offer .promo-code {
    grid-area: code;
  }

  .promo-inner--offer .promo-rule {
    display: none;
  }

  .promo-inner--offer .promo-when {
    grid-area: when;
    justify-self: center;
  }

  .promo-inner--cta {
    grid-template-areas: 'text code' 'when btn';
  }

  .promo-inner--cta .promo-when {
    justify-self: end;
  }

  .promo-inner--cta .promo-btn {
    grid-area: btn;
    justify-self: start;
  }
}

@supports selector(:has(*)) {
  @media (max-width: 639px) {
    :root:not(.no-promo):not(:has(.promo-inner--offer)) {
      --promo-h: 40px;
    }
  }

  @media (max-width: 419px) {
    :root:not(.no-promo):not(:has(.promo-inner--offer)) {
      --promo-h: 52px;
    }
  }
}

/* The short sentence on one line in the offer's bar, never the plain bar's two. */
@media (max-width: 899px) {
  .promo-inner--offer .promo-short {
    display: block;
    -webkit-line-clamp: none;
    white-space: nowrap;
  }
}

/* The narrowest phones: the offer, the chip and the clock a step smaller, so each row stays one line at 320px. */
@media (max-width: 359px) {
  .promo-inner--offer {
    column-gap: 8px;
  }

  .promo-inner--offer .promo-text {
    font-size: 12.5px;
  }

  .promo-inner--offer .promo-code {
    height: 24px;
    padding: 0 6px 0 8px;
    font-size: 12px;
  }
}

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

/* In forced colours the chip keeps a system border, and the copied state is told by its word, not its colour. */
@media (forced-colors: active) {
  .promo-code,
  .promo-code.is-copied {
    border-color: ButtonText;
  }

  .promo-rule {
    background: CanvasText;
  }
}
/* == end promo == */

/* == currency == */
/* The currency control (web/pages/lib/currency.ts writes it into the accounts section, public/brand/currency.js runs
   it): "Currency" and a compact segmented group of four choices, US$ checked, with the note on estimates beside it. It
   starts hidden and the script shows it: without the script it could do nothing. The interface has no other language. */

.acc .acc-cur-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  min-height: 34px;
  margin: 20px 0 12px;
}

.cur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cur[hidden] {
  display: none;
}

.cur-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.cur-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 10px;
  background: var(--hc-surface);
}

.cur-opt {
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}

.cur-opt:hover {
  color: var(--white);
}

.cur-opt[aria-checked="true"] {
  background: var(--hc-raised);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hc-outline);
}

.cur-opt:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 1px;
}

.acc .acc-cur-note {
  order: -1;
  margin-right: auto;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--faint);
}

.acc .acc-cur-note:empty {
  display: none;
}

@media (max-width: 639px) {
  .acc .acc-cur-row {
    justify-content: flex-start;
  }

  .acc .acc-cur-note {
    order: 0;
    flex-basis: 100%;
  }
}

@media (forced-colors: active) {
  .cur-opt[aria-checked="true"] {
    outline: 2px solid Highlight;
  }
}
/* == end currency == */

/* == round 5 == */
/*
  The owner's brief of 2026-10-23, fifth round: purple depth where the page asks for it, and quiet where it does not.
  A broad, soft light off each side of the hero (the words in the middle keep the plate's own light), a low light under
  the accounts' summary and under the terminal's screens, each placed differently, and a richer purple into a footer a
  shade lighter than the page. How it works, the bento and the questions stay as they were, hexagon lines and all.
  The promo bar on a tonal violet with one fine edge, its three parts spaced apart. The buttons: small transitions of
  their colours and lines, a short nudge of an arrow, a clear pressed state, and nothing that moves under reduced motion.
  These rules come last, so at equal weight they win over everything before them.
*/

/* ---- light: the hero ---- */

/* Two broad, soft lights over the plate and under the words: one high on the left, one low on the right, each fading
   long before the middle, where the headline and the sign-up sit. The layer spans the window, not the column. */
body.home .hero-inner::before {
  content: '';
  position: absolute;
  top: calc(-1 * (var(--header-h) + clamp(24px, 4vw, 48px)));
  right: calc(50% - 50vw);
  bottom: calc(-1 * clamp(40px, 5vw, 64px));
  left: calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 52% at 0% 14%, rgba(124, 58, 237, 0.24), rgba(124, 58, 237, 0.08) 52%, transparent 100%),
    radial-gradient(36% 46% at 100% 76%, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.06) 54%, transparent 100%);
}

/* A phone: the same two lights, taller and narrower, so they still fall beside the words rather than behind them. */
@media (max-width: 639px) {
  body.home .hero-inner::before {
    background:
      radial-gradient(70% 34% at 0% 10%, rgba(124, 58, 237, 0.24), rgba(124, 58, 237, 0.07) 52%, transparent 100%),
      radial-gradient(64% 30% at 100% 82%, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.05) 54%, transparent 100%);
  }
}

/* ---- light: the terminal's screens ---- */

/* A low light under the frame, from its lower left, where the hero's lights are high and wide: the frame sits in it. */
body.home .pf::before {
  content: '';
  position: absolute;
  top: 30%;
  right: -4%;
  bottom: -18%;
  left: -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 22% 78%, rgba(124, 58, 237, 0.26), rgba(124, 58, 237, 0.08) 55%, transparent 100%),
    radial-gradient(30% 34% at 86% 60%, rgba(167, 139, 250, 0.12), transparent 100%);
}

/* ---- light: into the footer ---- */

/* The page deepens to violet over its last few hundred pixels, behind whatever sits there, and meets the footer at a
   fine line that is brightest in the middle. The footer is a shade lighter than the page, lit faintly from its top left,
   behind the brand. */
body.site .site-footer {
  border-top: 0;
  background:
    radial-gradient(56% 90% at 8% 0%, rgba(124, 58, 237, 0.16), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(124, 58, 237, 0.08), transparent 70%),
    #0C0918;
}

body.site .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.06), rgba(196, 181, 253, 0.34) 50%, rgba(196, 181, 253, 0.06));
}

body.site .site-footer::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(91, 33, 182, 0.22), transparent 100%),
    linear-gradient(to bottom, rgba(12, 9, 24, 0), rgba(30, 16, 60, 0.36));
}

/* ---- the promo bar: a tonal violet, one fine edge, the three parts spaced apart ---- */

/* The brand's tone (the plain announcement's and the offer's): deeper at the ends, richer in the middle, lit by a hairline
   along its top and a fine line under it that is brightest in the middle. The other tones keep their own surfaces. */
.promo:not(.promo--neutral, .promo--highlight) {
  background:
    linear-gradient(90deg, rgba(196, 181, 253, 0.05), rgba(196, 181, 253, 0.42) 50%, rgba(196, 181, 253, 0.05)) 0 100% / 100% 1px no-repeat,
    linear-gradient(90deg, #140A2B 0%, #22104A 28%, #2E1764 50%, #22104A 72%, #140A2B 100%);
  border-bottom-color: rgba(7, 5, 15, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The offer and its code belong together; the rule and the countdown stand a little further off. */
.promo-inner--offer {
  gap: 10px;
}

.promo-inner--offer .promo-rule {
  margin-inline: 8px;
  background: rgba(196, 181, 253, 0.28);
}

/* The code: a compact chip, a faint fill on the violet so it reads as a button, the copy mark a step smaller. */
.promo .promo-code {
  height: 24px;
  gap: 5px;
  padding: 0 6px 0 8px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
}

.promo .promo-code:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.13);
}

.promo .promo-code:active {
  background: rgba(255, 255, 255, 0.04);
}

.promo .promo-code:disabled:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

.promo .promo-code.is-copied {
  border-color: rgba(134, 239, 172, 0.55);
}

.promo .promo-code-ic {
  width: 14px;
  height: 14px;
}

/* On the violet the countdown's quieter words need a lighter grey to read. */
.promo:not(.promo--neutral, .promo--highlight) .promo-when {
  color: #C9BEEA;
}

.promo:not(.promo--neutral, .promo--highlight) .promo-unit {
  color: #B3A6DD;
}

/* A phone: the offer and the code over the countdown, as before, a little closer together. */
@media (max-width: 639px) {
  .promo-inner--offer {
    column-gap: 10px;
    row-gap: 5px;
  }

  .promo-inner--offer .promo-rule {
    margin-inline: 0;
  }
}

@media (max-width: 359px) {
  .promo-inner--offer {
    column-gap: 8px;
  }

  .promo-inner--offer .promo-code {
    height: 22px;
    padding: 0 5px 0 7px;
    font-size: 12px;
  }
}

@media (forced-colors: active) {
  .promo:not(.promo--neutral, .promo--highlight) {
    border-bottom-color: CanvasText;
  }
}

/* ---- buttons: small, smooth changes ---- */

/* The primary's gradient eases to solid violet under the pointer (its two colours are registered, so the browser can
   blend them; where @property is unknown it changes at once, as before) and to the darker violet while pressed. */
@property --btn-a {
  syntax: '<color>';
  inherits: false;
  initial-value: #7C3AED;
}

@property --btn-b {
  syntax: '<color>';
  inherits: false;
  initial-value: #9F67FF;
}

body.site .button:not(.button--frost, .button--quiet, .button--light) {
  --btn-a: #7C3AED;
  --btn-b: #9F67FF;
  background: linear-gradient(99deg, var(--btn-a), var(--btn-b));
  transition: --btn-a 200ms ease-out, --btn-b 200ms ease-out, color 160ms ease-out, box-shadow 200ms ease-out;
}

body.site .button:not(.button--frost, .button--quiet, .button--light):hover {
  --btn-a: #7C3AED;
  --btn-b: #7C3AED;
  background: linear-gradient(99deg, var(--btn-a), var(--btn-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(7, 5, 15, 0.45), 0 10px 22px -14px rgba(124, 58, 237, 0.7);
}

body.site .button:not(.button--frost, .button--quiet, .button--light):active {
  --btn-a: var(--violet-dark);
  --btn-b: var(--violet-dark);
  box-shadow: inset 0 1px 2px rgba(7, 5, 15, 0.4);
  transition-duration: 70ms;
}

/* Waiting or off: the surface and quiet words, whatever the pointer does (and the same size: waitlist.js holds the
   width while the label says it is waiting). */
body.site .button:not(.button--frost, .button--quiet, .button--light):is([disabled], [aria-disabled="true"]) {
  background: var(--hc-raised);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--hc-line-strong);
}

/* The outline buttons ease their line and their fill. */
body.site .button--frost,
body.site .button--quiet {
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}

body.site .button--frost:active,
body.site .button--quiet:active {
  border-color: var(--hc-outline);
  transition-duration: 70ms;
}

/* Focus: the page's ring, a hair further out on the buttons so it reads against their fill. */
body.site .button:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

/* An arrow beside the words moves 2px on toward where it goes, under the pointer and under focus. */
body.site .acc-all-ic,
body.site .hero-more .ic,
body.site .text-link .ic--inline,
body.site .menu-arrow {
  transition: transform 180ms ease-out;
}

body.site .acc-all:is(:hover, :focus-visible) .acc-all-ic,
body.site .hero-more:is(:hover, :focus-visible) .ic,
body.site .text-link:is(:hover, :focus-visible) .ic--inline,
body.site .menu-link:is(:hover, :focus-visible) .menu-arrow {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  body.site .button,
  body.site .button--frost,
  body.site .button--quiet,
  body.site .button:not(.button--frost, .button--quiet, .button--light),
  body.site .acc-all-ic,
  body.site .hero-more .ic,
  body.site .text-link .ic--inline,
  body.site .menu-arrow {
    transition: none;
  }

  body.site .acc-all:is(:hover, :focus-visible) .acc-all-ic,
  body.site .hero-more:is(:hover, :focus-visible) .ic,
  body.site .text-link:is(:hover, :focus-visible) .ic--inline,
  body.site .menu-link:is(:hover, :focus-visible) .menu-arrow {
    transform: none;
  }
}

/* -- pricing: programme, then size, then the rules beside what it costs --
   Every step shares the page's edges: the step's label on the left (the first beside the currency control), the two
   programmes as two equal cards, the programme's description beside its three rules, the four sizes in one row of
   equal cards, and the panel. From 1100px the panel's summary runs its full height, beside the head and the rules, on a
   lighter surface lit from its top corner. The light near the panel is the section's own ground, off to its right. */
body.home .accounts-sec {
  background:
    radial-gradient(60% 420px at 50% 0%, rgba(124, 58, 237, 0.14), transparent 70%),
    radial-gradient(34% 38% at 88% 72%, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.06) 52%, transparent 100%);
}

.acc .acc-steprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 36px;
  margin-bottom: 12px;
}

@media (scripting: none) {
  .acc .acc-steprow {
    display: none;
  }
}

.acc .acc-step,
.acc .acc-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--offwhite);
}

.acc .acc-label {
  margin-bottom: 12px;
}

.acc .acc-steprow .acc-cur-row {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.acc .acc-steprow .acc-cur-note {
  margin-right: 0;
  text-align: right;
}

/* The programmes: two equal cards across the page, the open one in the accent with a little light in its corner. */
.acc .acc-switch {
  gap: 12px;
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.acc .acc-tab {
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--hc-line-strong);
  border-radius: 14px;
  background: var(--hc-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.acc .acc-tab:hover {
  border-color: var(--hc-outline);
  background: var(--hc-raised);
}

.acc .acc-tab[aria-selected="true"] {
  border-color: var(--violet);
  background: radial-gradient(90% 150% at 0% 0%, rgba(124, 58, 237, 0.26), rgba(124, 58, 237, 0) 64%), var(--acc-chosen);
  box-shadow: inset 0 0 0 1px var(--violet), 0 14px 30px -22px rgba(124, 58, 237, 0.9);
}

.acc .acc-tab-name {
  font-size: 17px;
}

.acc .acc-tab-note {
  font-size: 13px;
}

@media (min-width: 640px) {
  .acc .acc-tab {
    min-height: 76px;
    padding: 14px 18px;
  }

  .acc .acc-tab .acc-mark {
    width: 24px;
    height: 24px;
  }

  /* On a wide card the pattern keeps to a band before the ring, clear of the words. */
  .acc .acc-tab::before {
    left: auto;
    right: 56px;
    width: min(40%, 240px);
  }
}

/* The programme: its description on the left, its three rules in one box (rows on a phone, cells above). */
.acc .acc-prog-head,
.acc .acc-programs.is-tabbed .acc-prog-head {
  max-width: none;
  margin: 0;
  text-align: left;
}

.acc .acc-tagline {
  max-width: 62ch;
  margin: 6px 0 0;
}

.acc .acc-facts {
  margin-top: 16px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: var(--hc-surface);
  text-align: left;
  overflow: hidden;
}

.acc .acc-fact {
  padding: 10px 14px;
}

.acc .acc-fact:last-child {
  border-bottom: 0;
}

@media (min-width: 640px) {
  .acc .acc-facts {
    border-bottom: 1px solid var(--hc-line);
    text-align: left;
  }

  .acc .acc-fact {
    align-content: start;
    padding: 12px 16px 14px;
  }
}

@media (min-width: 1000px) {
  .acc .acc-prog-head,
  .acc .acc-programs.is-tabbed .acc-prog-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 'name facts' 'kicker facts' 'tagline facts';
    align-items: start;
    column-gap: 48px;
  }

  .acc .acc-prog-name {
    grid-area: name;
  }

  .acc .acc-kicker {
    grid-area: kicker;
  }

  .acc .acc-tagline {
    grid-area: tagline;
  }

  .acc .acc-facts,
  .acc .acc-programs.is-tabbed .acc-facts {
    grid-area: facts;
    margin-top: 0;
  }
}

/* The sizes: the page's width, four equal cards (two by two on a phone), each over its own artwork. */
.acc .acc-pick {
  max-width: none;
  margin: 28px 0 0;
}

.acc .acc-size[class*="acc-size--"] {
  min-height: 100px;
}

@media (min-width: 1000px) {
  .acc .acc-size {
    padding: 20px 16px 16px 18px;
  }

  .acc .acc-size[class*="acc-size--"] {
    min-height: 108px;
  }

  .acc .acc-size-amount {
    font-size: 28px;
  }
}

.acc .acc-config {
  margin-top: 28px;
}

/* What it costs: a lighter surface than the rules, lit from its corner, with the launch offer as a plain line in it
   rather than a box of its own. */
.acc .acc-buy {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0) 70%),
    #140F25;
}

.acc .acc-promo {
  margin-top: 16px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hc-line);
  border-radius: 0;
}

@media (min-width: 760px) and (max-width: 1099px) {
  .acc .acc-buy {
    background:
      radial-gradient(60% 120% at 100% 0%, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0) 70%),
      #140F25;
  }

  .acc .acc-promo {
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 1100px) {
  .acc .config-panel:not([hidden]),
  .acc .acc-config.is-live > .config-panel[hidden] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
  }

  .acc .acc-body {
    display: contents;
  }

  .acc .acc-head {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .acc .acc-group {
    grid-row: 2;
  }

  .acc .acc-buy {
    grid-column: 3;
    grid-row: 1 / 3;
    padding: 22px 24px 24px;
    border-left-color: rgba(196, 181, 253, 0.14);
    border-radius: 0 19px 19px 0;
  }

  .acc .acc-sum {
    min-height: 34px;
  }

  /* The column runs the panel's height: what it can be paid with sits at its foot, level with the last rule. */
  .acc .acc-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .acc .acc-buy > :has(+ .acc-pay) {
    margin-bottom: 20px;
  }

  .acc .acc-pay {
    margin-top: auto;
  }
}

/* The evaluation's levels to scale: where the account opens, the max loss under it and the target over it. Drawn on
   the panel itself, not in a box of its own; the first rule's line closes it. */
.acc .acc-range {
  margin: 0;
  padding: 16px 0 14px;
}

.acc .acc-range-svg {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}

.acc .acc-range-k {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--faint);
}

.acc .acc-range-v {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  fill: var(--offwhite);
}

.acc .acc-range-loss {
  fill: rgba(239, 68, 68, 0.55);
}

.acc .acc-range-gain {
  fill: var(--violet);
}

.acc .acc-range-dot {
  fill: var(--white);
  stroke: #0D0A18;
  stroke-width: 3;
}

.acc .acc-range-cap {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--faint);
}

@media (forced-colors: active) {
  .acc .acc-range-loss,
  .acc .acc-range-gain,
  .acc .acc-range-dot {
    fill: CanvasText;
  }

  .acc .acc-range-k,
  .acc .acc-range-v {
    fill: CanvasText;
  }
}

/* ---- the terminal's screens, one at a time: the tabs on the left, where the open one is and a step back or on at
   the right (under the screen on a phone, by the thumb); on a wide screen the next screen shows at the row's edge ---- */

.pf.is-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'tabs step' 'track track';
  align-items: center;
  gap: 22px 16px;
}

.pf.is-live .pf-tabs {
  grid-area: tabs;
  justify-self: start;
  margin: 0;
}

.pf-step {
  grid-area: step;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-step[hidden] {
  display: none;
}

.pf.is-live .pf-track {
  grid-area: track;
}

.pf-count {
  margin: 0 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pf-count-at {
  font-weight: 650;
  color: var(--white);
}

.pf-arrow {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hc-line-strong);
  border-radius: 10px;
  background: var(--hc-surface);
  color: var(--offwhite);
  cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
}

.pf-arrow svg {
  width: 16px;
  height: 16px;
}

.pf-arrow:not([aria-disabled="true"]):hover {
  border-color: var(--hc-outline-hover);
  background: var(--hc-raised);
  color: var(--white);
}

.pf-arrow:not([aria-disabled="true"]):active {
  transform: translateY(1px);
}

/* At either end the step that way is off, and looks it; it keeps the focus. */
.pf-arrow[aria-disabled="true"] {
  opacity: 0.38;
  cursor: default;
}

@media (max-width: 759px) {
  .pf.is-live {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'tabs' 'track' 'step';
    gap: 16px;
  }

  .pf.is-live .pf-track {
    margin-top: 6px;
  }

  .pf-count {
    margin-right: auto;
  }
}

/* Wide: the open screen takes most of the row and the next one shows past it, dimmed, its caption kept back until it
   opens; a click on it opens it. */
@media (min-width: 1000px) {
  .pf.is-live .pf-slide {
    flex-basis: 88%;
    scroll-snap-align: start;
  }

  .pf.is-live .pf-frame,
  .pf.is-live .pf-cap {
    transition: opacity 320ms ease-out;
  }

  .pf.is-live .pf-slide:not(.is-open) {
    cursor: pointer;
  }

  .pf.is-live .pf-slide:not(.is-open) .pf-frame {
    opacity: 0.4;
  }

  .pf.is-live .pf-slide:not(.is-open):hover .pf-frame {
    opacity: 0.6;
  }

  .pf.is-live .pf-slide:not(.is-open) .pf-cap {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-arrow,
  .pf.is-live .pf-frame,
  .pf.is-live .pf-cap {
    transition: none;
  }

  .pf-arrow:not([aria-disabled="true"]):active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .pf-arrow[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}

/* == round 6 == */
/*
  The owner's brief of 2026-10-24, sixth round: colour and depth across the waitlist page and the public pages linked
  from it. The page a shade warmer, its surfaces, lines and outlines a step lighter, and a fine grain -- still, at four
  per cent -- over the home page and the lined heroes. Three pools of light in the hero and its plate a little brighter.
  Two sections on grounds of their own, How it works on plum and the terminal on a deep violet band, each fading in and
  out so no edge is hard; the bento between them quiet, with two richer panels; the questions quiet. Under each step,
  the plan's figures for the account the drawings use. The size cards over the generated artwork, "Fee" before each
  price, a glow on the chosen one. The promo bar on a deeper violet with a lit lower edge and a shaped code chip. The
  buttons with a lit top edge and a little lift. The rules sit under body.site or body.home (the app's screens --
  sign-in, checkout, the dashboards, admin -- carry neither), save three groups meant to reach the admin previews that
  draw the public bar and footer with this stylesheet: the promo bar's (.promo), the footer wordmark's (.footer-word,
  above) and the pricing section's own (.acc, which only the home page's pricing carries). These come last, so at
  equal weight they win.
*/

/* ---- tokens: a shade warmer, a step lighter ---- */

body.site {
  --bg: #080615;
  --surface-1: #161128;
  --border: #2E2450;
  --hc-surface: #110D1F;
  --hc-raised: #181230;
  --hc-line: #221A38;
  --hc-line-strong: #30264E;
  --hc-outline: #45376A;
  --hc-outline-hover: #624F96;
}

body.home .acc {
  --acc-chosen: #221542;
  --acc-well: #0F0B1C;
  --acc-tip: #1E1736;
}

/* ---- grain: one fine, still texture over the whole home page (public/brand/grain.svg), under the pointer ---- */

body.home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: url(/brand/grain.svg) 0 0 / 240px 240px;
  opacity: 0.04;
}

/* ---- the hero: the plate a little brighter, its lines a little clearer, three pools of light ---- */

body.home .hero-plate {
  filter: saturate(1.15) brightness(1.06);
}

body.home .hero::after {
  opacity: 0.1;
}

/* The seam with the accounts, brighter on both sides. */
body.home .hero {
  background: radial-gradient(60% 420px at 50% 100%, rgba(124, 58, 237, 0.2), transparent 70%);
}

body.home .accounts-sec {
  background:
    radial-gradient(60% 420px at 50% 0%, rgba(124, 58, 237, 0.2), transparent 70%),
    radial-gradient(34% 38% at 88% 72%, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.06) 52%, transparent 100%);
}

/* The two side lights, fuller, and a third, high in the middle, behind the wordmark and gone before the headline. */
body.home .hero-inner::before {
  background:
    radial-gradient(44% 36% at 50% 16%, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05) 60%, transparent 100%),
    radial-gradient(40% 52% at 0% 14%, rgba(124, 58, 237, 0.3), rgba(124, 58, 237, 0.1) 52%, transparent 100%),
    radial-gradient(36% 46% at 100% 76%, rgba(139, 92, 246, 0.26), rgba(139, 92, 246, 0.08) 54%, transparent 100%);
}

@media (max-width: 639px) {
  body.home .hero-inner::before {
    background:
      radial-gradient(80% 24% at 50% 11%, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.04) 60%, transparent 100%),
      radial-gradient(70% 34% at 0% 10%, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.08) 52%, transparent 100%),
      radial-gradient(64% 30% at 100% 82%, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.06) 54%, transparent 100%);
  }
}

/* ---- How it works: on a plum ground, in from the accounts and out toward the bento, lit from its top ---- */

body.home .how {
  background:
    radial-gradient(46% 52% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 70%),
    radial-gradient(30% 42% at 92% 88%, rgba(124, 58, 237, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(21, 12, 44, 0) 0%, #150C2C 12%, #190E35 50%, #140B2A 86%, rgba(20, 11, 42, 0) 100%);
}

/* The ground parts it from the accounts; no hairline as well. */
body.home .how::before {
  content: none;
}

/* Under each step, two of the plan's figures for the account the drawings use (how.ts), each named, in one small ruled
   box; under the three steps, which account that is. */
body.home .hw-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 300px;
  margin: 20px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(196, 181, 253, 0.2);
  border-radius: 12px;
  background: rgba(10, 7, 22, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: left;
}

body.home .hw-fig {
  min-width: 0;
  padding: 11px 14px 12px;
}

body.home .hw-fig + .hw-fig {
  border-left: 1px solid rgba(196, 181, 253, 0.16);
}

body.home .hw-fig dt {
  margin: 0;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

body.home .hw-fig dd {
  margin: 3px 0 0;
  color: var(--white);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Narrow: the box in the words' column, beside the marker, which now spans the title, the words and the box. */
@media (max-width: 899px) {
  body.home .hw-mark {
    grid-row: span 3;
  }

  body.home .hw-figs {
    grid-column: 2;
    max-width: 320px;
    margin: 14px 0 0;
  }
}

/* ---- the bento: quiet between the two grounds, its panels a step lighter, two of them on plum ---- */

body.home .feat {
  border-color: rgba(196, 181, 253, 0.14);
  background: linear-gradient(180deg, #171229 0%, #130F22 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(7, 5, 15, 0.45);
}

body.home .feat:hover {
  border-color: rgba(196, 181, 253, 0.3);
}

body.home .feat-vis {
  border-color: rgba(196, 181, 253, 0.12);
  background-image: radial-gradient(80% 100% at 50% 0%, rgba(124, 58, 237, 0.24), transparent 70%), var(--grid-lines);
}

body.home .feat--a {
  border-color: rgba(196, 181, 253, 0.22);
  background: radial-gradient(70% 90% at 100% 0%, rgba(124, 58, 237, 0.24), transparent 70%), linear-gradient(180deg, #1A1134 0%, #140E27 100%);
}

body.home .feat--f {
  border-color: rgba(196, 181, 253, 0.26);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(124, 58, 237, 0.34), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(139, 92, 246, 0.14), transparent 70%),
    linear-gradient(135deg, #1C1040 0%, #150D2C 60%, #110C22 100%);
}

body.home .feat--f .feat-vis {
  border-color: rgba(196, 181, 253, 0.16);
}

/* ---- the terminal: a deep violet band lit from its upper right, the frame in a violet ambient shadow ---- */

body.home .platform {
  background:
    radial-gradient(40% 46% at 100% 16%, rgba(124, 58, 237, 0.18), transparent 70%),
    radial-gradient(34% 40% at 0% 72%, rgba(124, 58, 237, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(12, 9, 28, 0) 0%, #0D0A1F 10%, #100C24 55%, rgba(13, 10, 31, 0) 100%);
}

body.home .platform::before {
  content: none;
}

body.home .pf-frame {
  border-color: rgba(196, 181, 253, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 28px 48px -32px rgba(0, 0, 0, 0.9), 0 36px 80px -40px rgba(124, 58, 237, 0.5);
}

/* The previous/next controls: a size larger, on a lit raised surface. The fill is a colour under a fixed light from
   the top, so the hover still eases (a gradient alone cannot). */
body.home .pf-arrow {
  width: 44px;
  height: 44px;
  border-color: var(--hc-outline);
  background-color: #130F22;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.home .pf-arrow:not([aria-disabled="true"]):hover {
  border-color: var(--hc-outline-hover);
  background-color: #181230;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

/* Forced colours: the arrow that is off keeps its GrayText line (the rule above would out-weigh the earlier one). */
@media (forced-colors: active) {
  body.home .pf-arrow[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}

/* ---- pricing: "Fee" before each size's price, the summary's panel a touch lighter ---- */

/* The word is for the eye; the price's own hidden label ("Evaluation fee") is what a screen reader says. */
.acc .acc-size-price::before {
  content: 'Fee ' / '';
  color: var(--faint);
  font-weight: 500;
}

.acc .acc-size[aria-checked="true"] .acc-size-price::before {
  color: #B9AEDC;
}

body.home .acc-buy {
  border-color: rgba(196, 181, 253, 0.2);
  background: radial-gradient(90% 60% at 100% 0%, rgba(124, 58, 237, 0.24), transparent 70%), #160F2A;
}

/* The light follows the panel's proportions, as before this round: tall and narrow on the tablet; and at the desktop
   the seam against the configuration is fainter than the panel's outer edge. */
@media (min-width: 760px) and (max-width: 1099px) {
  body.home .acc-buy {
    background: radial-gradient(60% 120% at 100% 0%, rgba(124, 58, 237, 0.24), transparent 70%), #160F2A;
  }
}

@media (min-width: 1100px) {
  body.home .acc-buy {
    border-left-color: rgba(196, 181, 253, 0.14);
  }
}

/* ---- the promo bar: a deeper violet, lit from below at its middle, its lower edge a fine light, the chip shaped ---- */

.promo:not(.promo--neutral, .promo--highlight) {
  background:
    linear-gradient(90deg, rgba(196, 181, 253, 0.06), rgba(196, 181, 253, 0.5) 50%, rgba(196, 181, 253, 0.06)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    radial-gradient(50% 160% at 50% 100%, rgba(167, 139, 250, 0.3), transparent 70%),
    linear-gradient(90deg, #170B33 0%, #2A1358 34%, #3B1C7A 50%, #2A1358 66%, #170B33 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

@media (min-width: 640px) {
  .promo-inner--offer .promo-text {
    font-size: 14px;
  }
}

/* The chip's fill is a colour under a fixed light from the top, so its hover and its copied green still ease. */
.promo .promo-code {
  height: 26px;
  padding: 0 7px 0 9px;
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

.promo .promo-code:hover {
  border-color: rgba(255, 255, 255, 0.46);
  background-color: rgba(255, 255, 255, 0.12);
}

.promo .promo-code:active {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: none;
  box-shadow: none;
}

.promo .promo-code:disabled:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
}

.promo .promo-code.is-copied {
  border-color: rgba(134, 239, 172, 0.6);
  background-color: rgba(134, 239, 172, 0.08);
  background-image: linear-gradient(180deg, rgba(134, 239, 172, 0.09), rgba(134, 239, 172, 0));
}

.promo:not(.promo--neutral, .promo--highlight) .promo-when {
  color: #DCD3F7;
}

.promo:not(.promo--neutral, .promo--highlight) .promo-num {
  color: var(--white);
}

.promo:not(.promo--neutral, .promo--highlight) .promo-unit {
  color: #C2B5EA;
}

@media (max-width: 359px) {
  .promo .promo-code {
    height: 22px;
    padding: 0 5px 0 7px;
    font-size: 12px;
  }
}

/* ---- buttons: a lit top edge, a shadow that lifts on hover and goes on press; the frosted ones on a faint gradient ---- */

body.site .button:not(.button--frost, .button--quiet, .button--light) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(7, 5, 15, 0.45), 0 10px 24px -14px rgba(124, 58, 237, 0.65);
}

/* Not while it is off or waiting: round 5's rule for those sits earlier at the same weight, so these name them. */
body.site .button:not(.button--frost, .button--quiet, .button--light, [disabled], [aria-disabled="true"]):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(7, 5, 15, 0.45), 0 14px 28px -14px rgba(124, 58, 237, 0.8);
}

body.site .button:not(.button--frost, .button--quiet, .button--light, [disabled], [aria-disabled="true"]):active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(7, 5, 15, 0.45);
}

/* The fill is a colour under a fixed light from the top, so the hover still eases (a gradient alone cannot), and the
   hover keeps the lit edge: the earlier hover rule, at the same weight, would take it off. */
body.site .button--frost {
  border-color: var(--hc-outline);
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.site .button--frost:hover {
  border-color: var(--hc-outline-hover);
  background-color: rgba(255, 255, 255, 0.09);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Pressed: the solid press from before this round. Its rule sits earlier at the hover's weight, so this restates it. */
body.site .button--frost:active {
  border-color: var(--hc-outline);
  background-color: #1B1530;
  background-image: none;
  box-shadow: none;
}

/* ---- the small labels over the headings: a fuller violet; the soft ones stay soft ---- */

body.site .pill {
  border-color: rgba(196, 181, 253, 0.32);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #E6DEFF;
}

body.site .pill--soft {
  border-color: var(--hc-line-strong);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: var(--muted);
}

/* ---- the community's panel, in the bento's lines ---- */

body.home .dc-panel {
  border-color: rgba(196, 181, 253, 0.18);
}

/* ---- the public pages' heroes: two pools of light and the grain behind the lined ones; the rules' a touch brighter;
   the privacy note and the terms as they were ---- */

body.site .page-hero {
  background: radial-gradient(50% 60% at 15% 0%, rgba(124, 58, 237, 0.16), transparent 70%);
}

body.site .page-hero--lines {
  background:
    radial-gradient(44% 56% at 10% 0%, rgba(124, 58, 237, 0.26), rgba(124, 58, 237, 0.06) 55%, transparent 100%),
    radial-gradient(32% 48% at 92% 70%, rgba(139, 92, 246, 0.16), transparent 70%);
}

body.site .page-hero--lines::before {
  opacity: 0.09;
}

body.site .page-hero--lines::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/brand/grain.svg) 0 0 / 240px 240px;
  opacity: 0.05;
}

/* ---- How it works, side by side: the three rows of figures on one line, however many lines each step's words run to.
   Each step stacks as a column and its figures take the room left under the words, so the shortest step's figures
   come down to the longest step's. Each box keeps its full width: a flex item would otherwise shrink to its words,
   and the three would differ. ---- */
@media (min-width: 900px) {
  body.home .hw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.home .hw-step .step3-copy {
    padding-bottom: 20px;
  }

  body.home .hw-figs {
    width: 100%;
    margin-top: auto;
  }
}
/* == end round 6 == */

/* == round 7: the brief of 2026-10-24 ==
   The bar's links in one quiet container, with the page's own link marked; a larger outlined call to action with its
   arrow drawn here; the promo bar brighter at its middle; the footer as four scannable groups over a ruled legal row;
   the pricing panel with fewer competing lines and its fees set apart; and the launch page's few entrances. Every
   rule sits under body.site or body.home (the public pages' own body classes), or under .promo (the admin's preview
   mirrors the public bar by design, as in round 6); nothing here can reach the terminal or the admin's shell. */

/* ---- the bar: the links in one container, the page's own link marked, a restrained violet edge once stuck ---- */
@media (min-width: 960px) {
  body.site .nav {
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 240ms ease-out, background-color 240ms ease-out;
  }

  body.site .site-header.is-stuck .nav {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
  }

  body.site .nav-link {
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--muted);
    transition: color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
  }

  body.site .site-header:not(.is-stuck) .nav-link {
    color: #D9D2EC;
  }

  body.site .nav-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
  }

  body.site .nav-link[aria-current="page"] {
    color: var(--white);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(196, 181, 253, 0.14);
  }

  body.site .nav-link:focus-visible {
    outline: 2px solid var(--violet-light);
    outline-offset: 1px;
  }

  /* The bar's own buttons stand level with the container of links. */
  body.site .header-end .button--sm {
    min-height: 40px;
    padding: 0 18px;
  }
}

/* Stuck: less blur, and one fine violet line along the bottom edge rather than a grey one. */
body.site .site-header.is-stuck {
  background: rgba(7, 5, 15, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(139, 92, 246, 0.22), 0 12px 32px -20px rgba(0, 0, 0, 0.7);
}

/* The phone's menu: the open page's link in the brand's light, every link a clear row. */
body.site .menu-link {
  padding: 15px 2px;
  border-radius: 6px;
  font-size: 19px;
  transition: color 160ms ease-out;
}

body.site .menu-link:hover,
body.site .menu-link[aria-current="page"],
body.site .menu-link[aria-current="page"] .menu-arrow {
  color: var(--violet-light);
}

body.site .menu-link:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: -2px;
}

body.site .menu-cta {
  min-height: 52px;
}

/* ---- the outlined call to action: larger, a crisp line, a lit surface, its arrow drawn by the stylesheet ---- */
/* On the secondary marketing actions only (button--cta, always with button--frost): the form's, the bar's and the
   app's buttons keep their sizes. The fill is a colour under a faint top light, so the pointer eases the colour and the
   line; the arrow is a mask of the site's arrow, so the markup carries no icon; it moves 3px under the pointer and no
   further. A primary standing beside one rises to the same height, so the pair stays level. */
body.site .button--cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px 0 26px;
  border: 1px solid rgba(196, 181, 253, 0.34);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(7, 5, 15, 0.4);
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, translate 180ms var(--ease);
}

body.site .button--lg:has(+ .button--cta),
body.site .button--cta + .button--lg {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

body.site .button--cta::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 180ms var(--ease);
}

body.site .button--cta:hover {
  border-color: rgba(196, 181, 253, 0.62);
  background-color: rgba(124, 58, 237, 0.2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
  color: var(--white);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(7, 5, 15, 0.4), 0 12px 28px -18px rgba(124, 58, 237, 0.7);
}

body.site .button--cta:hover::after {
  translate: 3px 0;
}

body.site .button--cta:active {
  border-color: rgba(196, 181, 253, 0.5);
  background-color: rgba(124, 58, 237, 0.3);
  background-image: none;
  transform: none;
  translate: 0 1px;
  box-shadow: inset 0 1px 2px rgba(7, 5, 15, 0.35);
  transition-duration: 70ms;
}

body.site .button--cta:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

body.site .button--cta:is([disabled], [aria-disabled="true"]) {
  border-color: var(--hc-line-strong);
  background: var(--hc-raised);
  color: var(--muted);
  box-shadow: none;
}

body.site .button--cta:is([disabled], [aria-disabled="true"])::after {
  translate: none;
}

/* ---- the promo bar: brighter at its middle (a deep violet at the ends, a fuller purple in the centre, the lavender
   light from below kept), the lit edges as round 6 drew them ---- */
.promo:not(.promo--neutral, .promo--highlight) {
  background:
    linear-gradient(90deg, rgba(196, 181, 253, 0.06), rgba(196, 181, 253, 0.5) 50%, rgba(196, 181, 253, 0.06)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    radial-gradient(50% 160% at 50% 100%, rgba(167, 139, 250, 0.28), transparent 70%),
    linear-gradient(90deg, #1C0E3F 0%, #33197A 36%, #4A26A8 50%, #33197A 64%, #1C0E3F 100%);
}

/* The countdown's cells, a little further apart, so the figures read as figures. */
.promo-clock {
  gap: 8px;
}

/* The unit letters in the label's lighter tone: on a phone the clock wraps onto the bar's second row, right over the
   fuller centre, where the dimmer lavender fell short of 4.5:1. */
.promo:not(.promo--neutral, .promo--highlight) .promo-unit {
  color: #DCD3F7;
}

/* ---- the footer: four groups a visitor can scan, then a ruled line for the legal links ---- */
body.site .footer-head {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--offwhite);
}

body.site .footer-links {
  gap: 2px;
}

body.site .footer-links a {
  padding-block: 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease-out;
}

body.site .footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.site .footer-cols {
  gap: 28px 24px;
}

body.site .footer-social {
  gap: 8px;
  margin-top: 18px;
}

body.site .footer-end {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

body.site .footer-end.footer-end--ruled {
  margin-top: 32px;
  padding-top: 20px;
}

body.site .footer-legal {
  gap: 2px 22px;
}

body.site .footer-legal a {
  transition: color 140ms ease-out;
}

/* Wide: the brand's column narrower, the four groups side by side with room between them. */
@media (min-width: 1100px) {
  body.site .footer-top {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: 48px;
  }

  body.site .footer-cols.footer-cols--4 {
    gap: 28px 32px;
  }
}

/* A phone: two groups to a row, rows a thumb can hit, and no more height than the links need. */
@media (max-width: 559px) {
  body.site .footer-cols {
    gap: 26px 20px;
  }

  body.site .footer-links a {
    padding-block: 7px;
  }

  body.site .footer-end {
    gap: 14px 16px;
  }
}

/* ---- the pricing panel: fewer lines, labels and values aligned, the fees set apart ---- */
/* The rules: a label in grey and its value in white on each line, parted by a fainter hairline than the groups'. */
body.home .acc .acc-row {
  border-top-color: rgba(255, 255, 255, 0.055);
}

body.home .acc .acc-row dt {
  color: var(--muted);
}

body.home .acc .acc-group-h {
  color: var(--offwhite);
}

body.home .acc .acc-group-when {
  color: var(--muted);
}

/* The selected account: the summary without a rule of its own; the group's edge and the fee's size say enough. */
body.home .acc .acc-sum {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* The evaluation fee, large and first; its label in white. */
body.home .acc .acc-fee--eval dt {
  color: var(--offwhite);
}

body.home .acc .acc-fee--eval .acc-fee-val {
  font-size: 48px;
}

/* The activation fee, explained apart from it: on its own quiet well, no line through the column. */
body.home .acc .acc-fee--act {
  margin-top: 18px;
  padding: 14px 16px;
  border-top: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.home .acc .acc-fee--act dt {
  color: var(--offwhite);
}

/* The action, the offer and the ways to pay as one group under the fees. */
body.home .acc .acc-cta {
  min-height: 52px;
}

body.home .acc .acc-pay {
  margin-top: 18px;
  padding-top: 16px;
  border-top-color: rgba(255, 255, 255, 0.06);
}

body.home .acc .acc-pay-label {
  color: var(--muted);
}

/* The chosen size: the violet ring and a soft halo, unmistakable beside the others. */
body.home .acc .acc-size[aria-checked="true"],
body.home .acc .acc-size[class*="acc-size--"][aria-checked="true"] {
  box-shadow: inset 0 0 0 1px var(--violet), 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(124, 58, 237, 0.16), 0 14px 30px -18px rgba(124, 58, 237, 0.6);
}

/* A phone: the groups and the fees closer to the panel's edge, so the values have the room. */
@media (max-width: 639px) {
  body.home .acc .acc-head {
    padding: 16px 16px;
  }

  body.home .acc .acc-group {
    padding: 16px 16px 4px;
  }

  body.home .acc .acc-buy {
    padding: 20px 16px 22px;
  }

  body.home .acc .acc-fee--eval .acc-fee-val {
    font-size: 42px;
  }
}

/* ---- the launch page's few entrances: the hero in a short sequence, the terminal settling into view, the three
   platforms in turn. Only under html.js (waitlist.js sets it): with no script, everything is simply there. A from-only
   keyframe, so once it has run nothing holds a transform against a hover. How it works and the example payout keep
   their own lines (html.inview). ---- */
@keyframes r7-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes r7-settle {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(10px);
  }
}

.js body.home .hero-inner > * {
  animation: r7-rise 560ms var(--ease) backwards;
}

.js body.home .hero-inner > :nth-child(2) {
  animation-delay: 60ms;
}

.js body.home .hero-inner > :nth-child(3) {
  animation-delay: 120ms;
}

.js body.home .hero-inner > :nth-child(4) {
  animation-delay: 190ms;
}

.js body.home .hero-inner > :nth-child(n + 5) {
  animation-delay: 250ms;
}

/* The facts strip is a .reveal, which the home page otherwise holds still: here it ends the hero's sequence. */
.js body.home .hero-inner > .facts--hero,
.js body.home .hero-inner > .facts--hero.is-in {
  opacity: 1;
  animation: r7-rise 560ms var(--ease) 320ms backwards;
}

/* The terminal's frame settles in as the platform section arrives (the .pf is the .reveal the script marks). The
   keyframe names only where a frame starts, so each ends at whatever the carousel gives it: the open screen at full
   strength, the next one dimmed past its edge. Frames hide only until the section is marked, and only when motion is
   welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js body.home .reveal--zoom:not(.is-in) .pf-slide .pf-frame {
    opacity: 0;
  }

  .js body.home .reveal--zoom.is-in .pf-frame {
    animation: r7-settle 820ms var(--ease) backwards;
  }
}

/* The three platforms, one after another. */
.js body.home .pfm.reveal .pfm-card {
  opacity: 0;
}

.js body.home .pfm.reveal.is-in .pfm-card {
  opacity: 1;
  animation: r7-rise 600ms var(--ease) backwards;
}

.js body.home .pfm.reveal.is-in .pfm-card:nth-child(2) {
  animation-delay: 90ms;
}

.js body.home .pfm.reveal.is-in .pfm-card:nth-child(3) {
  animation-delay: 180ms;
}

/* Reduced motion: everything in place at once, and the buttons and the bar change without easing. */
@media (prefers-reduced-motion: reduce) {
  .js body.home .hero-inner > *,
  .js body.home .hero-inner > .facts--hero,
  .js body.home .hero-inner > .facts--hero.is-in,
  .js body.home .pfm.reveal .pfm-card,
  .js body.home .pfm.reveal.is-in .pfm-card {
    opacity: 1;
    animation: none;
  }

  body.site .button--cta,
  body.site .button--cta::after,
  body.site .nav,
  body.site .nav-link,
  body.site .menu-link,
  body.site .footer-links a,
  body.site .footer-legal a,
  body.site .site-header {
    transition: none;
  }

  body.site .button--cta:hover::after,
  body.site .button--cta:active {
    translate: none;
  }
}

/* Forced colours: the arrow and the lines keep system colours. */
@media (forced-colors: active) {
  body.site .button--cta::after {
    background: ButtonText;
  }

  body.site .nav,
  body.site .button--cta {
    border-color: ButtonText;
  }
}
/* == end round 7 == */