/* ==========================================================================
   Cennex — home page sections
   ========================================================================== */

/* Entrance animations start some elements tilted or shifted past the page edge; clip them so the
   page never scrolls sideways. (clip, unlike hidden, keeps the sticky elements working.) */
main { overflow-x: clip; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-950);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Legibility scrim: darkens the bottom-left where the copy sits. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--ink-950) 0%, rgba(11, 11, 21, .92) 14%, rgba(11, 11, 21, .55) 42%, rgba(11, 11, 21, .2) 70%, rgba(11, 11, 21, .45) 100%),
    linear-gradient(90deg, rgba(11, 11, 21, .78) 0%, rgba(11, 11, 21, .35) 45%, rgba(11, 11, 21, 0) 70%);
}
.hero-content {
  align-self: end;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(36px, 6vh, 64px);
}
.hero .eyebrow { margin-bottom: clamp(16px, 2.2vh, 24px); }
.hero .h1 { max-width: 13.5ch; }
.hero .lead { margin-top: clamp(18px, 2.4vh, 26px); max-width: 34ch; color: var(--mist-100); }
.hero-actions { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
/* Phones: the eyebrow sits on one line above the title, and the copy gets a darker backing so it
   doesn't fight the footage. */
@media (max-width: 600px) {
  .hero .eyebrow { font-size: clamp(10px, 2.9vw, 12px); letter-spacing: .1em; white-space: nowrap; }
  .hero::before {
    background: linear-gradient(0deg, var(--ink-950) 0%, rgba(11, 11, 21, .94) 32%, rgba(11, 11, 21, .78) 56%, rgba(11, 11, 21, .45) 78%, rgba(11, 11, 21, .6) 100%);
  }
}

/* Social buttons: glass tiles that light up in each network's colours. */
.hero-follow { margin-top: 28px; }
.hero-follow .socials { gap: 10px; }
.hero-follow .social {
  width: 44px; height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-follow .social svg { width: 20px; height: 20px; }
.hero-follow .social:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }

/* Icon-only control for the background video and logo strip. */
.motion-toggle {
  position: absolute; right: var(--gutter); bottom: calc(100% + 16px);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(11, 11, 21, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--mist-100);
  transition: border-color .16s, color .16s;
}
.motion-toggle svg { width: 16px; height: 16px; }
.motion-toggle:hover { border-color: rgba(255, 255, 255, .5); color: var(--white); }

/* Load sequence: the page assembles itself instead of fading in as one block. */
@media (scripting: enabled) {
  .site-header { animation: header-in .8s var(--ease-out) .05s both; }
  .hero-media { animation: media-in 1.8s var(--ease-out) both; }
  .load-in { animation: load-rise .9s var(--ease-out) var(--d, 0s) both; }
  .load-words .w { display: inline-block; transform-origin: 50% 100%; animation: word-flip 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
  .game-strip { animation: load-rise .9s var(--ease-out) 1.15s both; }
}
@keyframes header-in { from { opacity: 0; transform: translateY(-100%); } }
@keyframes media-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes load-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes word-flip { from { opacity: 0; transform: perspective(600px) translateY(.35em) rotateX(-75deg); } }

/* ---------------------------------------------------------------- game strip (full bleed) */
.game-strip {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--ink-950);
  padding-top: 22px;
}
.game-strip-label {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
  color: var(--mist-300);
  text-align: center;
}
.game-strip-label::before, .game-strip-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16)); }
.game-strip-label::after { background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
.game-strip-label span { flex-shrink: 1; }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: clamp(48px, 5.5vw, 80px);
  width: max-content;
  padding-block: 22px 30px;
  animation: marquee 70s linear infinite;
}
.marquee-track ul { display: flex; align-items: center; gap: clamp(48px, 5.5vw, 80px); list-style: none; padding: 0; }
.marquee-track li { flex-shrink: 0; }
.marquee-track img { height: var(--h, 36px); width: auto; opacity: .74; }
/* Until the script duplicates the list for a seamless loop, show a still, wrapped row. */
.marquee:not(.is-ready) { mask-image: none; -webkit-mask-image: none; }
.marquee:not(.is-ready) .marquee-track { width: auto; animation: none; }
.marquee:not(.is-ready) .marquee-track ul { flex-wrap: wrap; justify-content: center; row-gap: 22px; padding-inline: var(--gutter); }
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(24px, 2.75vw, 40px))); } }
.is-motion-paused .marquee-track { animation-play-state: paused; }
@media (max-width: 720px) {
  .game-strip { padding-top: 18px; }
  .game-strip-label { font-size: .875rem; gap: 12px; }
  .marquee-track { padding-block: 18px 24px; }
  .marquee-track img { height: calc(var(--h, 36px) * .85); }
}

/* ---------------------------------------------------------------- shared section bits */
/* Centred section header: the promise first, the proof underneath at full width. */
.sec-head { display: grid; justify-items: center; text-align: center; }
.sec-head .h2 { max-width: 18ch; }
.sec-head .lead { margin-top: 22px; max-width: 54ch; }

/* Source logos: upright app-style tiles set on a gentle curve, standing over a dark reflective
   floor. Each links to the site's home page; the name appears above it on hover or focus. */
.tiles3d {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px clamp(16px, 2.6vw, 26px);
  list-style: none; padding: 0;
  perspective: 640px;
}
.tiles3d li { transform-style: preserve-3d; }
.tile3d {
  --ry: 0deg; --tz: 0px;
  position: relative;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F4 100%);
  box-shadow: inset 0 -1px 0 rgba(20, 30, 40, .08), 0 16px 24px -14px rgba(0, 0, 0, .9);
  transform: translateZ(var(--tz)) rotateY(var(--ry));
  -webkit-box-reflect: below 6px linear-gradient(transparent 50%, rgba(255, 255, 255, .22));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.tiles3d li:nth-child(1) .tile3d { --ry: 26deg; --tz: 14px; }
.tiles3d li:nth-child(2) .tile3d { --ry: 9deg; }
.tiles3d li:nth-child(3) .tile3d { --ry: -9deg; }
.tiles3d li:nth-child(4) .tile3d { --ry: -26deg; --tz: 14px; }
.tile3d img, .tile3d svg { width: 34px; height: 34px; object-fit: contain; }
.tile3d::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 4px);
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  color: var(--mist-100);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease-out);
}
.tile3d:hover, .tile3d:focus-visible { transform: translateZ(28px) rotateY(0deg); }
.tile3d:hover::after, .tile3d:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tile3d:focus-visible { outline-offset: 6px; }
/* Sits below the tiles' reflections. */
.tiles-note { margin-top: 50px; text-align: center; font-size: .875rem; font-style: italic; color: var(--mist-500); }
@media (max-width: 480px) {
  .tile3d { width: 56px; height: 56px; border-radius: 14px; }
  .tile3d img, .tile3d svg { width: 30px; height: 30px; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5.5vw, 88px);
  align-items: center;
}
.split.is-reversed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.is-reversed > :first-child { order: 2; }
@media (max-width: 960px) {
  .split, .split.is-reversed { grid-template-columns: 1fr; }
  .split.is-reversed > :first-child { order: 0; }
}
.copy .h2 { max-width: 14ch; }
.copy .lead { margin-top: 24px; max-width: 40ch; }

/* A compact call to action under a demo. */
.cta-bar {
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 14px 14px 14px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--ink-900);
}
.cta-bar p { font-weight: 600; color: var(--white); }
.cta-bar p span { color: var(--mist-500); font-weight: 450; }
@media (max-width: 560px) {
  .cta-bar { padding: 16px; }
  .cta-bar .btn { width: 100%; }
}

/* ---------------------------------------------------------------- profiles
   The link form starts in the centre; a cursor pastes the three links and presses the button.
   Then the form slides to the left (where it stays in view) and each finished profile appears,
   in full, with the three people to switch between pinned along the top. */
.pf-stage {
  position: relative;
  margin-top: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.pf-side {
  position: sticky; top: calc(var(--header-h) + 24px); z-index: 2;
  display: grid; justify-items: start; gap: 12px;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
/* While the demo runs: the form sits in the centre and the profiles wait out of the layout.
   (--center-dx is measured by demos/import.js.) */
.pf-stage.is-centered .pf-side { transform: translateX(var(--center-dx, 0px)); }
.pf-stage.is-centered .pf-result { visibility: hidden; height: 0; overflow: hidden; }
.pf-result { position: relative; z-index: 1; transition: opacity .3s var(--ease-out); }
.pf-stage.is-hiding .pf-result { opacity: 0; }
.pf-input {
  width: 100%;
  --line: #E3E2DC; --brand: #167A56; --text: #141816; --text-sub: #4E5651; --text-muted: #78817B;
  color: var(--text);
  font-family: var(--font-body);
}
.pf-result { min-width: 0; }

/* The generated link form, restyled for a side column. Its CSS keyframes are replaced by
   states that demos/import.js sets on [data-pf-stage] (data-phase = fill | build | done). */
.pf-stage .pf-input :is(.cxa-card, .cxa-form, .cxa-input, .cxa-ph, .cxa-val, .cxa-caret, .cxa-btn, .cxa-progress, .cxa-pct, .cxa-status, .cxa-bar > i, .cxa-bar > b, .cxa-menu, .cxa-menu span, .cxa-pointer, .cxa-pointer svg) { animation: none; }
.pf-stage .pf-input .cxa-card {
  position: relative; top: auto;
  width: 100%; margin: 0;
  padding: 26px 24px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.pf-stage .pf-input .cxa-title { font-size: 25px; line-height: 31px; }
.pf-stage .pf-input .cxa-sub { margin: 6px 0 22px; font-size: 15px; line-height: 21px; }
.pf-stage .pf-input .cxa-body { height: 196px; transition: height .5s var(--ease-out); }
.pf-stage[data-phase="fill"] .pf-input .cxa-body { height: 340px; }
.pf-stage .pf-input .cxa-field { height: 82px; }
.pf-stage .pf-input .cxa-field-2 { top: 94px; }
.pf-stage .pf-input .cxa-field-3 { top: 188px; }
.pf-stage .pf-input .cxa-input { height: 52px; border-radius: 10px; font-size: 14.5px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.pf-stage .pf-input .cxa-caret { top: 16px; }
.pf-stage .pf-input .cxa-btn {
  top: 290px; height: 50px;
  border-radius: 10px;
  background: var(--brand);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .16);
  transition: transform .12s, filter .12s;
}
.pf-stage .pf-input .cxa-btn.is-pressed { transform: scale(.98); filter: brightness(.9); }
/* The demo cursor and its paste menus, positioned by demos/import.js. */
.pf-stage .pf-input .cxa-pointer {
  left: 0; top: 0;
  width: 28px; height: 28px;
  opacity: 0;
  transform: translate(var(--px, 260px), var(--py, 320px));
  transition: transform .28s cubic-bezier(.45, .05, .25, 1), opacity .2s;
}
.pf-stage .pf-input .cxa-pointer.no-move { transition: none; }
.pf-stage .pf-input .cxa-pointer.is-shown { opacity: 1; }
.pf-stage .pf-input .cxa-pointer svg { width: 28px; height: 28px; transition: transform .1s; }
.pf-stage .pf-input .cxa-pointer.is-click svg { transform: scale(.82); }
/* A quick ring where the cursor clicks. */
.pf-stage .pf-input .pf-click {
  position: absolute; z-index: 9;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  pointer-events: none;
  animation: pf-click .45s ease-out forwards;
}
@keyframes pf-click { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.pf-stage .pf-input .cxa-menu {
  left: var(--mx, 118px); top: var(--my, 0px);
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.pf-stage .pf-input .cxa-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.pf-stage .pf-input .cxa-menu span { transition: background-color .12s; }
.pf-stage .pf-input .cxa-menu span.is-hot { background: #EEF5F1; }
.pf-stage .pf-input .cxa-bar { height: 12px; border-radius: 6px; }
.pf-stage .pf-input .cxa-bar > i { border-radius: 6px; transform: scaleX(var(--p, 1)); }
.pf-stage .pf-input .cxa-pct { font-size: 36px; }
.pf-stage .pf-input .cxa-status { font-size: 14px; }

/* Finished state is the default (no script, reduced motion, after the demo). */
.pf-stage .pf-input .cxa-form { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.pf-stage .pf-input .cxa-progress { opacity: 1; transition: opacity .3s .1s; }
.pf-stage .pf-input .cxa-status-a { opacity: 0; transition: opacity .2s; }
.pf-stage .pf-input .cxa-status-b { opacity: 1; transition: opacity .3s, transform .3s var(--ease-out); }
.pf-stage[data-phase="fill"] .pf-input .cxa-form { opacity: 1; visibility: visible; }
.pf-stage[data-phase="fill"] .pf-input .cxa-progress { opacity: 0; transition-delay: 0s; }
.pf-stage[data-phase="build"] .pf-input .cxa-status-a { opacity: 1; }
.pf-stage[data-phase="build"] .pf-input .cxa-status-b { opacity: 0; transform: scale(.92); }
.pf-stage[data-phase="fill"] .pf-input .cxa-field:not(.is-filled) .cxa-val { opacity: 0; }
.pf-stage[data-phase="fill"] .pf-input .cxa-field:not(.is-filled) .cxa-ph { opacity: 1; }
.pf-stage .pf-input .cxa-field.is-active .cxa-input { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(22, 122, 86, .12); }
.pf-stage .pf-input .cxa-field.is-active:not(.is-filled) .cxa-caret { opacity: 1; animation: pf-blink 1s steps(1, end) infinite; }
.pf-stage .pf-input .cxa-field.is-pasted .cxa-val { animation: pf-paste .8s ease-out; }
@keyframes pf-blink { 50% { opacity: 0; } }
@keyframes pf-paste { from { background: rgba(22, 122, 86, .22); } to { background: transparent; } }

.pf-replay {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 6px;
  border-radius: 8px;
  color: var(--mist-300);
  font-size: .9375rem; font-weight: 600;
  transition: color .16s, opacity .4s .5s;
}
.pf-stage.is-centered .pf-replay { opacity: 0; pointer-events: none; transition-delay: 0s; }
.pf-replay svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.pf-replay:hover { color: var(--white); }
.pf-replay:hover svg { transform: rotate(-120deg); }
.pf-replay[disabled] { opacity: .45; cursor: default; }
.pf-replay[disabled] svg { transform: none; }

/* People picker: pinned above the profile while you read it. */
.pf-pick {
  position: sticky; top: calc(var(--header-h) + 12px); z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--ink-900);
}
.pf-people { display: flex; gap: 6px; flex: 1; min-width: 0; }
.pf-person {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--mist-500);
  font-weight: 650; font-size: .9375rem;
  transition: border-color .2s, background-color .2s, color .2s, opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.pf-person:hover { color: var(--white); }
.pf-person[aria-pressed="true"] { color: var(--white); background: var(--ink-750); border-color: rgba(255, 255, 255, .12); }
.pf-av { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.pf-av > img:first-child { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.pf-src {
  position: absolute; right: -5px; bottom: -4px;
  width: 19px; height: 19px; padding: 2px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 0 0 2px var(--ink-900);
}
/* Before the deal: the people wait, then arrive one by one. */
.pf-stage.is-armed:not(.is-dealt) .pf-person { opacity: 0; transform: translateY(6px); }
.pf-person:nth-child(2) { transition-delay: 0s, 0s, 0s, .08s, .08s; }
.pf-person:nth-child(3) { transition-delay: 0s, 0s, 0s, .16s, .16s; }

/* The profile, in full. Two card edges behind it say there are more. */
.pf-deck { position: relative; isolation: isolate; margin-top: 30px; }
.pf-deck::before, .pf-deck::after {
  content: '';
  position: absolute; left: 4%; right: 4%; top: -10px; z-index: -1;
  height: 80px;
  border-radius: 12px 12px 0 0;
  background: #727A75;
  transition: opacity .5s var(--ease-out) .35s, transform .6s var(--ease-out) .35s;
}
.pf-deck::after { left: 8%; right: 8%; top: -19px; z-index: -2; background: #3D4440; }
.pf-stage.is-armed:not(.is-dealt) .pf-deck::before, .pf-stage.is-armed:not(.is-dealt) .pf-deck::after { opacity: 0; transform: translateY(14px); transition-delay: 0s; }

.pf-result .cxa-import, .pf-result .cxa.has-js .cxa-controls { display: none; }
.pf-result .cxa-stage, .pf-result .cxa-stage * { animation: none !important; }
.pf-result .cxa-scroll { overflow: visible; padding: 0; scroll-snap-type: none; }
.pf-result .cxa-profiles {
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; margin: 0; padding: 0; gap: 0;
}
.pf-result .cxa-col {
  grid-area: 1 / 1;
  min-width: 0;
  transform-origin: 50% 0;
  transition: transform .75s cubic-bezier(.2, .75, .2, 1), opacity .45s var(--ease-out), visibility 0s .75s;
}
.pf-result .cxa-col .cxp { border-radius: 12px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
/* Profiles not on show wait to one side, set back and turned in 3D. (Pushed back far enough that
   the turned card never reaches past its own box, so nothing widens the page.) */
.pf-result .cxa-col:not(.is-front) {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: perspective(2200px) translateX(3%) translateZ(-260px) rotateY(-18deg);
}
.pf-result .cxa-col[data-pos="left"]:not(.is-front) { transform: perspective(2200px) translateX(-3%) translateZ(-260px) rotateY(18deg); }
.pf-result .cxa-col.is-front { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pf-result .cxa-col.no-trans { transition: none !important; }
/* The deal: the first profile flies out from the link form. */
.pf-stage.is-armed:not(.is-dealt) .cxa-col.is-front { opacity: 0; transform: perspective(2200px) translate3d(-22%, 60px, -320px) rotateY(28deg); }
/* Without the script: show the first profile. */
.pf-result .cxa:not(.has-js) .cxa-col:first-child { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 960px) {
  .pf-stage { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pf-side { position: static; width: 100%; max-width: 520px; justify-self: center; justify-items: center; }
  .pf-stage.is-armed:not(.is-dealt) .cxa-col.is-front { transform: perspective(2200px) translate3d(0, -80px, -260px) rotateX(18deg); }
}
/* Reduced motion: switching profiles is a plain cross-fade. */
@media (max-width: 640px) {
  .pf-person:not([aria-pressed="true"]) { padding: 4px; }
  .pf-person:not([aria-pressed="true"]) .pf-nm { display: none; }
}
@media (max-width: 560px) {
  .pf-stage .pf-input .cxa-card { padding: 20px 18px 18px; }
  .pf-stage .pf-input .cxa-title { font-size: 22px; line-height: 28px; }
  .pf-stage .pf-input .cxa-sub { margin-bottom: 18px; font-size: 14px; }
  .pf-stage .pf-input .cxa-input { font-size: 14px; }
  .pf-stage .pf-input .cxa-pct { font-size: 30px; }
  .pf-deck { margin-top: 24px; }
}

/* ---------------------------------------------------------------- marketplace (light chapter) */
.on-light { background: var(--paper); color: var(--ink-text); }
.on-light .h2 { color: var(--ink-text); }
.on-light .lead { color: var(--ink-sub); }
/* Marketplace imports: three logo slabs facing you, drifting gently among a few sparks in each
   platform's colours. They stand up when pointed at. */
.import-3d { position: relative; margin-top: 36px; display: grid; justify-items: center; gap: 26px; }
.import-3d-t { position: relative; z-index: 1; font-size: .9375rem; font-weight: 550; color: var(--ink-sub); text-align: center; }
.slabs {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px clamp(14px, 2.6vw, 28px);
  list-style: none; padding: 6px 0 16px;
}
.slabs li { animation: slab-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -2s); }
@keyframes slab-float {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-8px) rotate(.5deg); }
}
.slab {
  display: grid; place-items: center;
  width: clamp(150px, 15vw, 196px); height: 76px;
  border-radius: 14px;
  background: linear-gradient(170deg, #FFFFFF 0%, #F7F7F3 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #E3E2DB, 0 2px 0 #DBDAD2, 0 3px 0 #D3D2C9, 0 4px 0 #CBCAC0, 0 5px 0 #C3C2B7, 0 6px 0 #BBBAAE, 0 7px 0 #B3B2A5, 0 8px 0 #ABAA9C,
    0 24px 30px -12px rgba(20, 24, 22, .38);
  transform: perspective(760px) rotateX(24deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s var(--ease-out);
}
.slab img { height: 28px; width: auto; max-width: 78%; object-fit: contain; }
.slab:hover, .slab:focus-visible {
  transform: perspective(760px) rotateX(0deg) translateY(-6px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #E3E2DB, 0 2px 0 #DBDAD2, 0 3px 0 #D3D2C9, 0 4px 0 #CBCAC0, 0 5px 0 #C3C2B7, 0 6px 0 #BBBAAE, 0 7px 0 #B3B2A5, 0 8px 0 #ABAA9C,
    0 34px 40px -14px rgba(20, 24, 22, .45);
}
/* Sparks: generated by effects.js (initParticles); each drifts and fades on its own clock. */
.particles {
  position: absolute; left: 50%; bottom: -14px; z-index: 0;
  width: min(780px, 100%); height: 180px;
  transform: translateX(-50%);
  pointer-events: none;
}
.particles i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: spark var(--d) ease-in-out var(--dl) infinite;
}
.particles i.is-dia { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  25% { opacity: .85; }
  75% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.is-motion-paused .particles i, .is-motion-paused .slabs li,
.import-3d.is-offscreen .particles i, .import-3d.is-offscreen .slabs li { animation-play-state: paused; }
.import-3d + .mk-grid { margin-top: clamp(36px, 4.5vw, 54px); }
@media (max-width: 560px) {
  .slabs { flex-wrap: nowrap; gap: 10px; }
  .slab { width: min(118px, calc((100vw - 2 * var(--gutter) - 20px) / 3)); height: 58px; border-radius: 12px; }
  .slab img { height: 18px; }
  .particles { height: 150px; }
}

/* ---------------------------------------------------------------- discover (mint chapter) */
.on-mint { background: var(--mint-400); color: var(--ink-950); }
.on-mint .h2 { color: var(--ink-950); }
.on-mint .lead { color: rgba(11, 11, 21, .82); }
.on-mint .btn-primary { background: var(--ink-950); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.on-mint .btn-primary:hover { background: var(--ink-750); }
.on-mint :focus-visible { outline-color: var(--ink-950); }
.signal-list { margin-top: 28px; display: grid; gap: 12px; list-style: none; padding: 0; }
.signal-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; font-weight: 600; font-size: 1rem; }
.signal-list .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(11, 11, 21, .9); color: var(--mint-300); }
.signal-list .ico svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- opportunities */
.opps { background: var(--ink-900); }
.sd-wrap { width: min(100% - 2 * var(--gutter), 1320px); margin: clamp(40px, 5vw, 64px) auto 0; }

/* ---------------------------------------------------------------- events */
.events-stage {
  margin-top: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.use-case { position: relative; display: grid; justify-items: center; text-align: center; }
.use-case p { max-width: 34ch; }
.use-case .uc-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.use-case .uc-icon svg { width: 24px; height: 24px; }
.use-case.discord .uc-icon { background: var(--discord); color: #fff; }
.use-case.anyevent .uc-icon { background: var(--mint-400); color: var(--ink-950); }
.use-case h3 { margin-bottom: 10px; }
.use-case p { color: var(--mist-300); font-size: 1rem; line-height: 1.6; }
@media (max-width: 1080px) {
  .events-stage { grid-template-columns: 1fr 1fr; }
  .events-stage .events-panel-wrap { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 640px) {
  .events-stage { grid-template-columns: 1fr; }
  .events-stage .events-panel-wrap { grid-row: 2; }
}

/* ---------------------------------------------------------------- FAQ */
.faq { background: var(--ink-900); }
/* Desktop: heading and Discord card on the left, questions on the right.
   Phones: heading, questions, then the Discord card (the source order). */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas: "head list" "card list";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 6vw, 96px); row-gap: 32px;
  align-items: start;
}
.faq-head { grid-area: head; max-width: 10ch; }
.faq-list { grid-area: list; display: grid; }
.faq-grid .dc-invite-card { grid-area: card; }
.faq-item { border-top: 1px solid rgba(255, 255, 255, .1); }
.faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem);
  letter-spacing: -.012em;
  color: var(--white);
  border-radius: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--mint-400); transition: transform .25s var(--ease-out); }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--mint-200); }
.faq-answer { padding: 0 4px 24px; color: var(--mist-300); max-width: 62ch; }
.faq-answer a { color: var(--mint-300); }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "card"; grid-template-rows: none; row-gap: 28px; }
  .faq-grid .dc-invite-card { max-width: none; margin-top: 8px; }
}

/* Discord invite card beside the questions. */
.dc-invite-card {
  display: grid; gap: 16px;
  max-width: 380px;
  padding: 22px;
  border-radius: 16px;
  background: var(--discord);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 28px 50px -30px rgba(0, 0, 0, .85);
  transform-origin: 50% 100%;
}
.dic-top { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: .9375rem; }
.dic-top svg { width: 22px; height: 22px; flex-shrink: 0; }
.dic-server { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(11, 11, 21, .22); }
.dic-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--ink-950); }
.dic-icon img { width: 26px; height: auto; }
.dic-name { min-width: 0; }
.dic-name b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.dic-name small { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .75); overflow-wrap: anywhere; }
.dic-text { font-size: .9375rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.dic-btn {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border-radius: 9px;
  background: #fff; color: #2B2F8F;
  font-weight: 700; font-size: .9375rem;
  transition: background-color .16s;
}
.dic-btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.dc-invite-card:hover .dic-btn { background: #EEF0FF; }
.dc-invite-card:hover .dic-btn svg { transform: translate(2px, -2px); }
.dc-invite-card:focus-visible { outline-color: var(--white); }
.dc-invite-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.faq-grid .dc-invite-card.is-in:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------- final call to action */
.final { overflow: hidden; text-align: center; }
.final .wrap { display: grid; justify-items: center; }
.final .h2 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.25rem); max-width: 14ch; }
.final .lead { margin-top: 24px; max-width: 44ch; }
.final-actions { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Discord, X and TikTok get equal billing. */
.social-tiles {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 12px;
  list-style: none; padding: 0;
}
.social-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--ink-900);
  text-decoration: none; text-align: left;
  transition: border-color .16s, background-color .16s, transform .16s var(--ease-out);
}
.social-tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .32); background: var(--ink-850); }
.st-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; }
.st-icon svg { width: 22px; height: 22px; }
.is-discord .st-icon { background: var(--discord); color: #fff; }
.is-x .st-icon { background: #fff; color: #000; }
.is-tiktok .st-icon { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.st-text { min-width: 0; }
.st-text b { display: block; color: var(--white); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.st-text small { display: block; color: var(--mist-500); font-size: .8125rem; }
/* Phones: still left to right, as three compact tiles with the icon on top. */
@media (max-width: 680px) {
  .social-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; gap: 10px; }
  .social-tile { flex-direction: column; justify-content: center; gap: 10px; padding: 16px 8px 14px; text-align: center; }
  .st-text small { font-size: .75rem; overflow-wrap: anywhere; }
}

/* 3D extruded brand mark: stacked copies of the real logo, back layers darkened to form the depth. */
.mark-3d {
  --size: clamp(120px, 16vw, 188px);
  position: relative;
  width: var(--size); height: calc(var(--size) * 1.108);
  margin-bottom: clamp(28px, 4vw, 44px);
  perspective: 900px;
}
.mark-3d-lg { --size: clamp(140px, 17vw, 210px); margin-bottom: clamp(40px, 5vw, 60px); }
.mark-3d-body {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -18deg));
  transition: transform .9s var(--ease-out);
}
.mark-3d-body img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: translateZ(calc(var(--i) * -1.4px));
  filter: brightness(var(--b, 1));
  -webkit-user-drag: none; user-select: none;
}
.mark-3d.is-live .mark-3d-body { transition: none; }
/* Soft floor light under the mark; it narrows as the mark turns side-on. */
.mark-3d-shadow {
  position: absolute; left: 50%; top: 100%;
  width: 78%; height: 22%;
  margin-top: 6%;
  transform: translateX(-50%) scaleX(var(--sx, 1));
  background: radial-gradient(closest-side, rgba(114, 205, 161, .32), rgba(114, 205, 161, 0));
  pointer-events: none;
}

/* ---------------------------------------------------------------- reveal on scroll
   Different things arrive differently: titles rise out of a mask, copy sharpens, product panels
   tilt up into place, card rows are dealt. Only hidden when scripting is available and motion is
   welcome; if the script never runs, a fallback shows them. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out), clip-path 1s var(--ease-out);
  }
  .reveal.is-in, .reveal[data-anim].is-in { opacity: 1; transform: none; filter: none; }

  /* Starts partly clipped, not fully: a fully clipped target never reports as intersecting. */
  .reveal[data-anim="title"] { transform: translateY(.35em); clip-path: inset(55% -10% -20% -10%); }
  .reveal[data-anim="title"].is-in { transform: none; clip-path: inset(-20% -10% -20% -10%); }
  .reveal[data-anim="title"] .accent { color: var(--white); transition: color .9s var(--ease-out) .45s; }
  .reveal[data-anim="title"].is-in .accent { color: var(--mint-400); }

  .reveal[data-anim="blur"] { filter: blur(8px); transform: translateY(10px); transition-delay: .12s; }

  .reveal[data-anim="tilt"] { transform: perspective(1400px) translateY(56px) rotateX(18deg) scale(.96); transform-origin: 50% 100%; transition-duration: .9s, 1.1s; }
  .reveal[data-anim="rise3d"] { transform: perspective(1600px) translateY(70px) rotateX(26deg); transform-origin: 50% 0%; transition-duration: .9s, 1.3s; }
  .reveal[data-anim="slide-r"] { transform: translateX(-36px); transition-delay: .2s; }
  .reveal[data-anim="slide-l"] { transform: translateX(36px); transition-delay: .3s; }
  .reveal[data-anim="pop"] { transform: scale(.86); transition: opacity .5s var(--ease-out), transform .7s cubic-bezier(.34, 1.56, .64, 1); }

  .reveal:is([data-anim="stagger"], [data-anim="deal"]) { opacity: 1; transform: none; }
  .reveal[data-anim="stagger"] > * {
    opacity: 0;
    transform: translateY(16px) scale(.96);
    transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 70ms), transform .75s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i, 0) * 70ms);
  }
  .reveal[data-anim="deal"] > * {
    opacity: 0;
    transform: perspective(1200px) translateY(70px) rotateX(24deg) rotateZ(calc((var(--i, 0) - 1.5) * 2deg));
    transform-origin: 50% 100%;
    transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 90ms), transform 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms);
  }
  .reveal.is-in:is([data-anim="stagger"], [data-anim="deal"]) > * { opacity: 1; transform: none; }

  html:not(.js) .reveal, html:not(.js) .reveal:is([data-anim="stagger"], [data-anim="deal"]) > * { animation: reveal-fallback .01s 2.5s both; }
}
@keyframes reveal-fallback { to { opacity: 1; transform: none; filter: none; clip-path: none; } }

.sd-footnote { margin-top: 18px; text-align: center; font-size: .8125rem; color: var(--mist-500); }
html.has-dialog { overflow: hidden; }

/* ---------------------------------------------------------------- preview popover
   Clicking an action inside a product preview explains it opens at launch and offers the waitlist. */
.preview-pop {
  position: fixed; inset: auto;
  margin: 0;
  width: min(300px, calc(100vw - 24px));
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: var(--ink-850);
  color: var(--mist-100);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7);
  font-size: .9375rem; line-height: 1.45;
}
.preview-pop::backdrop { background: transparent; }
.preview-pop p { margin-bottom: 12px; }
.preview-pop strong { color: var(--white); }
.preview-pop .pop-actions { display: flex; align-items: center; gap: 8px; }
.preview-pop .pop-close { margin-left: auto; color: var(--mist-500); font-size: .875rem; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.preview-pop .pop-close:hover { color: var(--white); }