/* ==========================================================================
   XFluxPay — marketing site
   Zero dependencies. One stylesheet. Tokens first, then components.

   The palette is exactly the supplied set. `#EAEDFO` is read as `#EAEDF0`,
   since the original had a letter O where a zero belongs.
   ========================================================================== */

/* --- Display faces -------------------------------------------------------
   No `@font-face` is declared, and that is deliberate.

   The display faces originally specified here (Droid Logo, INERTIA, MAVES,
   PROXEMIC, MOON WALK, GEOM) are commercial or restricted-licence fonts and are
   not redistributable, so they cannot be bundled. Declaring them anyway cost six
   failed requests on every page load for files that were never present.

   The stack below uses the highest-quality display faces already installed on
   each platform, so the type is intentional rather than a fallback. To adopt a
   licensed face later: add one `@font-face` here and put its family first in
   `--font-display`. Nothing else needs to change.
   ------------------------------------------------------------------------ */

:root {
  /* supplied palette */
  --paper-1: #EAEDF0;
  --paper-2: #F4F4F4;
  --paper-3: #F8FBF8;
  --paper-4: #FDFCFA;
  --paper-5: #FAF5EF;
  --paper-6: #F4F8FF;
  --paper-7: #FDFFF5;

  --ink-1:   #28282B;
  --ink-2:   #0F0B0A;
  --ink-3:   #232323;
  --ink-4:   #121213;
  --ink-5:   #1B1813;

  /* brand gradient, shared with the Android launcher mark */
  --brand-cyan:   #3FD8FF;
  --brand-blue:   #2C7BFF;
  --brand-violet: #9A62FF;

  --text:       var(--ink-2);
  --text-soft:  color-mix(in srgb, var(--ink-1) 70%, var(--paper-4));
  --text-faint: color-mix(in srgb, var(--ink-1) 46%, var(--paper-4));
  --line:       color-mix(in srgb, var(--ink-1) 12%, var(--paper-4));
  --line-strong:color-mix(in srgb, var(--ink-1) 22%, var(--paper-4));

  --ok:   #0F8A5F;
  --warn: #B4791B;

  /* Platform display faces, in preference order: Apple, Windows, then a
     high-quality grotesque, then generics. Every entry is present on the system
     that lists it, so no network request is made for type. */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
                  Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-1: 0 1px 2px rgba(15, 11, 10, .05), 0 8px 24px rgba(15, 11, 10, .06);
  --shadow-2: 0 2px 4px rgba(15, 11, 10, .06), 0 24px 60px rgba(15, 11, 10, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 70px;
  --wrap: 1180px;
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the fixed header must not cover anchor targets */
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper-4);
  line-height: 1.62;
  overflow-x: hidden;
  font-size: 17px;
}
body.is-loading { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--ink-2); color: var(--paper-4);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 44px, 780px); }

/* --- Type ---------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.2vw, 4.9rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: .18em 0 .5em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: .1em 0 .5em;
  max-width: 22ch;
  text-wrap: balance;
}

h3 { font-size: 1.06rem; line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.008em; }

.lead, .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.58;
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 0 1.9em;
}

.section__lead, .section__lede {
  font-size: 1.06rem;
  color: var(--text-soft);
  max-width: 66ch;
  margin: 0 0 2.6em;
}

.kicker, .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.1em;
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 16%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.82); }
}

.link-strong {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--brand-blue) 40%, transparent);
  transition: border-color .2s var(--ease);
}
.link-strong:hover { border-bottom-color: var(--brand-blue); }

.prose p { max-width: 68ch; margin: 0 0 1.15em; color: var(--text-soft); }
.prose a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-4);
  color: var(--text);
  font: inherit; font-weight: 600; font-size: .96rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }

.btn--primary {
  border-color: transparent;
  color: var(--paper-4);
  background: var(--ink-2);
}
/* Effect 1: gradient wipes in from the left on hover, behind the label. */
.btn--primary::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--brand-blue), var(--brand-cyan) 52%, var(--brand-violet));
  transform: translateX(-101%);
  transition: transform .42s var(--ease-out);
}
.btn--primary:hover::before { transform: none; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }

.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Effect 5: press ripple, injected by main.js */
.ripple {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, .42);
  pointer-events: none;
  animation: ripple .58s var(--ease-out) forwards;
}
.btn:not(.btn--primary) .ripple { background: rgba(15, 11, 10, .12); }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* --- Chips --------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.chip--work    { color: var(--brand-blue);  border-color: color-mix(in srgb, var(--brand-blue) 32%, transparent);  background: color-mix(in srgb, var(--brand-blue) 7%, transparent); }
.chip--plan    { color: var(--warn);        border-color: color-mix(in srgb, var(--warn) 34%, transparent);        background: color-mix(in srgb, var(--warn) 7%, transparent); }
.chip--explore { color: var(--brand-violet);border-color: color-mix(in srgb, var(--brand-violet) 32%, transparent);background: color-mix(in srgb, var(--brand-violet) 7%, transparent); }
.chip--none    { color: var(--text-faint);  border-color: var(--line-strong); }

/* --- Loader (effect 2) --------------------------------------------------- */

.loader {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-content: center; gap: 20px; justify-items: center;
  background: var(--paper-4);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { display: grid; place-items: center; }
.loader__stroke {
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: draw 1.5s var(--ease-out) infinite;
}
@keyframes draw {
  0%   { stroke-dashoffset: 90; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -90; }
}
.loader__track {
  width: 190px; height: 2px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.loader__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-violet));
  transition: width .28s var(--ease);
}
.loader__pct {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .16em; color: var(--text-faint); margin: 0;
}
.loader__pct::after { content: "%"; }

/* --- Cursor (effect 7) --------------------------------------------------- */

.cursor { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; background: var(--ink-2); }
.cursor__ring {
  width: 32px; height: 32px;
  border: 1.5px solid color-mix(in srgb, var(--ink-2) 34%, transparent);
  transition: width .24s var(--ease), height .24s var(--ease),
              border-color .24s var(--ease), background-color .24s var(--ease);
}
.cursor.is-on .cursor__ring {
  width: 52px; height: 52px;
  border-color: color-mix(in srgb, var(--brand-blue) 60%, transparent);
  background: color-mix(in srgb, var(--brand-blue) 9%, transparent);
}
.cursor.is-ink .cursor__dot { background: var(--paper-4); }
.cursor.is-ink .cursor__ring { border-color: color-mix(in srgb, var(--paper-4) 42%, transparent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --- Scroll rail --------------------------------------------------------- */

.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130;
  background: transparent;
}
.scroll-rail__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-violet));
}

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper-4) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em;
}

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  position: relative;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: .93rem; font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__links a::after {
  /* Effect 1: underline wipe */
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: none; }
.nav__links a.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--ink-1) 6%, transparent);
}
.nav__links a.is-active::after { transform: none; }
@media (max-width: 900px) { .nav__links { display: none; } }

/* --- Sections ------------------------------------------------------------ */

.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--paper { background: var(--paper-1); }
.section--ink {
  background: var(--ink-4);
  color: color-mix(in srgb, var(--paper-4) 88%, var(--ink-4));
}
.section--ink .h2 { color: var(--paper-4); }
.section--ink .kicker { color: color-mix(in srgb, var(--paper-4) 54%, var(--ink-4)); }
.section--ink .section__lead { color: color-mix(in srgb, var(--paper-4) 72%, var(--ink-4)); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(64px, 8vw, 104px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--paper-6), transparent 58%),
    radial-gradient(100% 80% at 92% 8%, var(--paper-5), transparent 55%),
    var(--paper-4);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero__inner { position: relative; z-index: 2; }

/* Effect 6: pointer-driven drift, transform only */
.hero__orb {
  position: absolute; border-radius: 50%; filter: blur(64px);
  pointer-events: none; will-change: transform;
}
.hero__orb--a {
  width: 46vw; height: 46vw; top: -10vw; right: -8vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 30%, transparent), transparent 68%);
}
.hero__orb--b {
  width: 38vw; height: 38vw; bottom: -14vw; left: -10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-violet) 24%, transparent), transparent 68%);
}

/* Effect 4: per-word masked reveal, spans injected by main.js */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .8s var(--ease-out);
}
[data-reveal-words].is-in .word > span { transform: none; }

.hero__cta { margin: 0 0 30px; }

.hero__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 30px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  max-width: 900px;
  font-size: .94rem; color: var(--text-soft);
}
.hero__facts li {
  position: relative; padding-left: 15px;
}
.hero__facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-blue);
}
.hero__facts strong { color: var(--text); font-weight: 650; }

.hero__scrollhint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 1px; height: 46px; overflow: hidden;
  background: var(--line-strong);
}
.hero__scrollhint span {
  display: block; width: 100%; height: 40%;
  background: var(--brand-blue);
  animation: railrun 2.1s var(--ease) infinite;
}
@keyframes railrun {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(260%); }
}

/* --- Email capture ------------------------------------------------------- */

.capture { max-width: 620px; }
.capture--lg { max-width: 680px; }
.capture__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 9px;
}
.section--ink .capture__label { color: color-mix(in srgb, var(--paper-4) 56%, var(--ink-4)); }

.capture__row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.capture__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-4);
  color: var(--text);
  font: inherit; font-size: .98rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.capture__input::placeholder { color: var(--text-faint); }
.capture__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 13%, transparent);
}
.capture__input[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .12);
}
.capture--lg .capture__input { padding: 16px 22px; }

/* The bot trap must be unreachable without display:none, which some bots detect. */
.capture__trap {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.capture__note {
  margin: 11px 0 0;
  font-size: .86rem;
  color: var(--text-faint);
  max-width: 56ch;
}
.capture__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.section--ink .capture__note { color: color-mix(in srgb, var(--paper-4) 58%, var(--ink-4)); }

.capture__status {
  margin: 11px 0 0;
  font-size: .92rem;
  font-weight: 550;
  min-height: 1.4em;
}
.capture__status.is-ok   { color: var(--ok); }
.capture__status.is-bad  { color: #C0392B; }
.section--ink .capture__status.is-ok  { color: #57D9A3; }
.section--ink .capture__status.is-bad { color: #FF8F80; }

/* --- Status strip -------------------------------------------------------- */

.status { background: var(--paper-4); border-block: 1px solid var(--line); }
.status__grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.status__item h3 { margin: 12px 0 6px; }
.status__item p { margin: 0; font-size: .94rem; color: var(--text-soft); }

/* --- Cards --------------------------------------------------------------- */

.cards { display: grid; gap: 22px; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }

.card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-4);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card--tight { padding: 26px 24px; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
/* Effect 1: pointer-tracked sheen; --mx/--my are set by main.js */
.card[data-sheen]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--brand-blue) 9%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card[data-sheen]:hover::after { opacity: 1; }

.card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .14em;
  color: var(--brand-blue);
  margin-bottom: 14px;
}
.card p { margin: 0 0 .8em; font-size: .96rem; color: var(--text-soft); }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--text); font-weight: 650; }

.card__cite {
  font-size: .81rem !important;
  color: var(--text-faint) !important;
  border-top: 1px solid var(--line);
  padding-top: 11px;
  margin-top: 14px !important;
}
.card__cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Pull quote ---------------------------------------------------------- */

.pull {
  margin: clamp(44px, 5vw, 68px) 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line);
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.7vw, 2.05rem);
  line-height: 1.26;
  letter-spacing: -.018em;
  margin: 0 0 .6em;
  max-width: 30ch;
  text-wrap: balance;
}
.pull cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Vision list -------------------------------------------------------- */

.vision__list {
  list-style: none; counter-reset: v; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: color-mix(in srgb, var(--paper-4) 12%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vision__list li {
  counter-increment: v;
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px;
  align-items: start;
  padding: 26px 28px;
  background: color-mix(in srgb, var(--paper-4) 5%, transparent);
  transition: background-color .3s var(--ease);
}
.vision__list li:hover { background: color-mix(in srgb, var(--paper-4) 10%, transparent); }
.vision__list li::before {
  content: counter(v, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: .84rem; letter-spacing: .1em;
  color: var(--brand-cyan);
  padding-top: 3px;
}
.vision__list h3 { margin: 0 0 .35em; color: var(--paper-4); font-size: 1.1rem; }
.vision__list p {
  margin: 0; grid-column: 2;
  font-size: .96rem;
  color: color-mix(in srgb, var(--paper-4) 68%, var(--ink-4));
  max-width: 66ch;
}
@media (max-width: 620px) {
  .vision__list li { grid-template-columns: 1fr; }
  .vision__list li::before { grid-row: auto; }
  .vision__list p { grid-column: 1; }
}

/* --- Callout ------------------------------------------------------------- */

.callout {
  margin-top: clamp(32px, 4vw, 52px);
  padding: 24px 26px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius);
  background: var(--paper-6);
}
.callout p { margin: 0; font-size: .96rem; color: var(--text-soft); max-width: 78ch; }
.callout strong { color: var(--text); }

/* --- Perks --------------------------------------------------------------- */

.perks {
  display: grid; gap: 26px 32px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.perk { padding-top: 20px; border-top: 2px solid var(--ink-2); }
.perk h3 { margin: 0 0 .4em; }
.perk p { margin: 0; font-size: .95rem; color: var(--text-soft); }

/* --- Timeline ------------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line-strong);
}
.timeline__item { position: relative; padding: 0 0 40px 40px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper-4);
  border: 2px solid var(--line-strong);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.timeline__item.is-in::before {
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 18%, var(--paper-4));
}
.timeline__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: .6em;
}
.timeline__head h3 { margin: 0; font-size: 1.16rem; }
.timeline__item p { margin: 0 0 .55em; font-size: .97rem; color: var(--text-soft); max-width: 72ch; }
.timeline__why {
  font-size: .89rem !important;
  color: var(--text-faint) !important;
  font-style: italic;
}

/* --- Join ---------------------------------------------------------------- */

.join { text-align: left; }
.join__inner { max-width: 760px; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 21px 2px;
  cursor: pointer;
  font-weight: 600; font-size: 1.03rem;
  list-style: none;
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.8px solid var(--text-faint);
  border-bottom: 1.8px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease), border-color .2s var(--ease);
}
.faq__item summary:hover { color: var(--brand-blue); }
.faq__item summary:hover::after { border-color: var(--brand-blue); }
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq__body { padding: 0 2px 22px; }
.faq__body p { margin: 0 0 .85em; font-size: .97rem; color: var(--text-soft); max-width: 72ch; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --- Contact ------------------------------------------------------------- */

.contact__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.contact__card {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-4);
  display: flex; flex-direction: column; gap: 10px;
}
.contact__card h3 { margin: 0; }
.contact__card p { margin: 0; font-size: .93rem; color: var(--text-soft); flex: 1; }
.contact__card a { color: var(--brand-blue); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--ink-4);
  color: color-mix(in srgb, var(--paper-4) 74%, var(--ink-4));
  padding: clamp(56px, 7vw, 84px) 0 34px;
}
.footer a { text-decoration: none; }

.footer__top {
  display: grid; gap: 44px;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  padding-bottom: 42px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper-4) 13%, transparent);
}
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand .nav__brand { color: var(--paper-4); }
.footer__tagline {
  margin: 16px 0 14px;
  font-size: .96rem;
  color: color-mix(in srgb, var(--paper-4) 66%, var(--ink-4));
  max-width: 30ch;
}
.footer__status {
  margin: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .85rem;
  color: color-mix(in srgb, var(--paper-4) 56%, var(--ink-4));
}

.footer__cols {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.footer__col h3 {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-4) 48%, var(--ink-4));
  margin: 0 0 14px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a {
  font-size: .93rem;
  color: color-mix(in srgb, var(--paper-4) 76%, var(--ink-4));
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--paper-4); }

.footer__legal { padding-top: 26px; }
.footer__disclaimer {
  margin: 0 0 20px;
  font-size: .83rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper-4) 48%, var(--ink-4));
  max-width: 84ch;
}
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .85rem;
  color: color-mix(in srgb, var(--paper-4) 54%, var(--ink-4));
}
.footer__bottom p { margin: 0; }
.footer__bottom a { color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--paper-4) 26%, transparent); }

/* --- Reveal (effect 4) --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Reduced motion ------------------------------------------------------
   Anyone who asks for less motion gets none of it. Content must not depend on
   an animation having run, so reveals resolve to their final state.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .word > span { opacity: 1 !important; transform: none !important; }
  .cursor { display: none; }
  .hero__scrollhint { display: none; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .nav, .cursor, .scroll-rail, .loader, .hero__canvas, .hero__orb, .hero__scrollhint { display: none !important; }
  body { background: #fff; color: #000; }
  .section--ink, .footer { background: #fff; color: #000; }
}

/* ==========================================================================
   Conversion layer
   Philosophy tenets, the comparison table, and the founding-member panel with
   its post-registration success state.
   ========================================================================== */

/* --- Product philosophy -------------------------------------------------- */

.tenets {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.tenet {
  padding: 30px 28px;
  background: var(--paper-4);
  transition: background-color .3s var(--ease);
}
.tenet:hover { background: var(--paper-6); }
.tenet__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 12px;
}
.tenet h3 { margin: 0 0 .5em; font-size: 1.14rem; }
.tenet p { margin: 0; font-size: .96rem; color: var(--text-soft); }

/* --- Comparison ---------------------------------------------------------- */

.compare {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-4);
  /* Scrolls rather than squashing on a narrow viewport: a comparison table with
     three columns of prose is unreadable below about 700px if it wraps. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare__table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .95rem;
}
.compare__table th,
.compare__table td {
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.compare__table thead th {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  background: var(--paper-2);
  white-space: nowrap;
}
.compare__table tbody th {
  font-weight: 650;
  color: var(--text);
  width: 26%;
}
.compare__table td { color: var(--text-soft); }
/* The column that is ours reads as ours. */
.compare__table tbody td:last-child {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-blue) 4%, transparent);
  border-left: 1px solid var(--line);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }

.compare__note {
  margin: 22px 0 0;
  font-size: .98rem;
  color: var(--text-soft);
  max-width: 72ch;
}

/* --- Founding members ---------------------------------------------------- */

/* Extra vertical room: this is the section the whole page funnels into, and it
   should not read as one more band in a stack. */
.founding { padding: clamp(84px, 10vw, 148px) 0; }

.founding__copy { padding-top: 4px; }

/* Inside the light panel the form is stacked, so it needs no row-level tuning
   beyond removing the horizontal layout's assumptions. */
.capture--panel { max-width: none; }

.founding__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) {
  .founding__grid { grid-template-columns: 1fr; }
}

.founding__head { max-width: 20ch; }

.founding__aside {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--brand-cyan) 55%, transparent);
  font-size: 1rem;
  color: color-mix(in srgb, var(--paper-4) 74%, var(--ink-4));
  max-width: 54ch;
}

/* The panel is the visual anchor of the page: the only light surface in a dark
   section, which is what makes the hierarchy unambiguous. */
.founding__panel {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--paper-4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
  color: var(--text);
}
.founding__panel::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--brand-blue), var(--brand-cyan) 48%, var(--brand-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.founding__panelHead {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -.018em;
}

/* Inside the light panel the ink-section overrides must not apply. */
.founding__panel .capture__label { color: var(--text-faint); }
.founding__panel .capture__note { color: var(--text-faint); }
.founding__panel .capture__status.is-ok { color: var(--ok); }
.founding__panel .capture__status.is-bad { color: #C0392B; }

.capture__row--stack { flex-direction: column; align-items: stretch; }
.btn--block { width: 100%; }

.founding__trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 9px;
}
.founding__trust li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  color: var(--text-soft);
}
.founding__trust li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 12px; height: 7px;
  border-left: 1.8px solid var(--ok);
  border-bottom: 1.8px solid var(--ok);
  transform: rotate(-45deg);
}

.founding__perks {
  display: grid; gap: 26px 32px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 38px;
  border-top: 1px solid color-mix(in srgb, var(--paper-4) 15%, transparent);
}
.perk--ink { border-top-color: var(--brand-cyan); }
.perk--ink h3 { color: var(--paper-4); }
.perk--ink p { color: color-mix(in srgb, var(--paper-4) 68%, var(--ink-4)); }

/* --- Post-registration success ------------------------------------------
   Replaces the form rather than appearing beneath it. A success message under a
   still-editable form invites a second submission and reads as uncertainty.
   ------------------------------------------------------------------------ */

.capture-shell { position: relative; }

/* The success panel is hidden in markup with the `hidden` attribute and revealed
   only by waitlist.js once the server has confirmed the registration. These
   rules set display explicitly, which would otherwise override the attribute:
   an author display value beats the browser's `[hidden] { display: none }`. */
.joined[hidden] { display: none; }

.joined {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 7%, var(--paper-4));
  animation: joinedIn .5s var(--ease-out) both;
}
@keyframes joinedIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.joined__tick {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
}
.joined__tick--lg { width: 44px; height: 44px; }
/* The tick draws itself in, which is the one place a flourish earns its keep. */
.joined__tick path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: tickDraw .5s var(--ease-out) .12s forwards;
}
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

.joined__title {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.14rem;
  letter-spacing: -.014em;
  color: var(--text);
}
.joined__title--lg { font-size: 1.42rem; }

.joined__body {
  margin: 0 0 10px;
  font-size: .94rem;
  color: var(--text-soft);
  max-width: 54ch;
}

/* Panel variant: full-width, vertical, with the next-steps list. */
.joined--panel {
  display: block;
  padding: 4px 0 0;
  border: 0;
  background: none;
  animation: joinedIn .55s var(--ease-out) both;
}
.joined--panel .joined__tick { margin-bottom: 16px; }

.joined__steps {
  list-style: none;
  counter-reset: step;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px;
}
.joined__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 3px 14px;
  font-size: .93rem;
  color: var(--text-soft);
}
.joined__steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--brand-blue);
}
.joined__steps strong {
  display: block;
  color: var(--text);
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.joined__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--text-faint);
}

/* In the dark hero the success card needs its own contrast treatment. */
.section--ink .joined,
.hero .joined { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .joined, .joined--panel { animation: none !important; }
  .joined__tick path { stroke-dashoffset: 0 !important; animation: none !important; }
}