/* ==========================================================================
   francisdarko.com/start: the AI quiz funnel
   "Tonal": each stage of the funnel is one flat colour field, and the object
   on it is rendered in that same colour. Ultramarine for the intro,
   sunflower for the questions, a muted bottle green for the result.
   One family, Archivo, pulled wide for display and left at normal width for
   reading.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Wide';
  src: url('/assets/fonts/archivo-wide-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  --ultra: #2541b2;
  --sun: #f2c230;
  --green: #3a5f4b;
  --green-deep: #2f4f3e;
  --ink: #17120c;
  --ink-soft: #3b3224;
  --paper: #fbfaf6;
  --mist: #d3ddd6;     /* secondary text on green, 5.2:1 */
  --sky: #dfe5fb;      /* secondary text on ultramarine, 6.8:1 */
  --sun-soft: #f6d36a; /* sunflower text on green, 4.9:1 */
  --err: #7a1a00;

  --font: 'Archivo Wide', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(1.25rem, 4.2vw, 3.5rem);
  --maxw: 84rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --bar: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 420;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ultra);
  color: var(--paper);
  transition: background-color .7s var(--ease), color .7s var(--ease);
}
body[data-screen="quiz"] { background: var(--sun); color: var(--ink); }
body[data-screen="result"] { background: var(--green); }

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

/* Read aloud, not shown: the "was" and "now" around the struck price. */
.fx-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
a { color: inherit; }

/* The ring takes the page's text colour, never the button's own: a
   sunflower button on a sunflower page would otherwise ring in sunflower. */
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  border-radius: 6px;
}
body[data-screen="quiz"] :where(a, button, input, summary):focus-visible { outline-color: var(--ink); }
.fx-main h1:focus { outline: none; }

/* ---------- top bar and progress ---------- */

.fx-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--bar);
  padding: env(safe-area-inset-top, 0px) var(--pad) 0;
}
.fx-mark {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.fx-step { margin: 0; font-size: .9375rem; font-weight: 560; }

.fx-progress {
  height: 6px;
  margin: 0 var(--pad);
  border-radius: 6px;
  background: rgba(23, 18, 12, .14);
  overflow: hidden;
  visibility: hidden;
}
body[data-screen="quiz"] .fx-progress { visibility: visible; }
.fx-progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(max(var(--fill), .02));
  transition: transform .7s var(--ease);
}

.fx-main { position: relative; }

/* ---------- type ---------- */

.fx-display {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.045em;
  line-height: .96;
  text-wrap: balance;
  font-size: clamp(2.6rem, 6.3vw, 6.25rem);
}
.fx-display--q { font-size: clamp(2.25rem, 5.2vw, 5rem); max-width: 15ch; }
.fx-display--result { font-size: clamp(3.25rem, 6.8vw, 7rem); max-width: none; }

.fx-h2 {
  margin: 0 0 .9rem;
  font-weight: 780;
  font-stretch: 120%;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
  font-size: clamp(2rem, 4vw, 3.75rem);
}
.fx-h3 {
  margin: 0 0 .9rem;
  font-weight: 760;
  font-stretch: 112%;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.fx-lede { margin: 0; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); max-width: 40ch; }
.fx-small { margin: .9rem 0 0; font-size: .9375rem; }

/* ---------- buttons ---------- */

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: .9rem 2.4rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 720;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .5s var(--spring), background-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Hover only where there is a pointer to hover with: on a phone the last
   tapped spot keeps :hover, and the option under the thumb on the next screen
   looked already chosen. */
@media (hover: hover) {
  .fx-btn:hover { transform: translateY(-2px); }
  .fx-btn--sun:hover { box-shadow: 0 10px 28px -14px rgba(242, 194, 48, .9); }
  .fx-opt:hover { background: rgba(23, 18, 12, .07); }
}
.fx-btn:active { transform: scale(.97); transition-duration: .1s; }
.fx-btn--light { background: var(--paper); color: #1b2f86; }
.fx-btn--ink { background: var(--ink); color: var(--sun); }
.fx-btn--sun { background: var(--sun); color: var(--ink); }
.fx-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- intro ---------- */

.fx-intro {
  position: relative;
  min-height: calc(100svh - var(--bar));
  overflow: hidden;
  isolation: isolate;
}
.fx-intro-copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 7vh, 5.5rem) var(--pad) 0;
  max-width: 64rem;
}
.fx-intro .fx-display { max-width: 12ch; }
.fx-intro .fx-lede { margin: 1.6rem 0 2rem; color: var(--sky); }
.fx-intro .fx-small { color: var(--sky); margin-left: .5rem; }
.fx-intro-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.fx-intro-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%);
  mask-image: linear-gradient(180deg, transparent 0, #000 32%);
  animation: fx-settle 1.4s var(--ease) .1s both;
}

/* ---------- questions and the gate ---------- */

.fx-q, .fx-gate {
  padding: clamp(2rem, 8vh, 6rem) var(--pad) 4rem;
  max-width: var(--maxw);
}
.fx-back {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-size: .9375rem;
  font-weight: 620;
  text-underline-offset: 4px;
}
.fx-q .fx-display--q { margin-bottom: clamp(1.75rem, 5vh, 3.25rem); }
.fx-other .fx-display--q { margin-bottom: 1rem; }
.fx-other .fx-lede { color: var(--ink-soft); }

.fx-opts {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  max-width: 72rem;
}
.fx-opt {
  display: inline-flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 1.1rem 2.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 620;
  font-size: 1.375rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .45s var(--spring);
}
.fx-opt:active { transform: scale(.97); transition-duration: .08s; }
.fx-opt.is-picked { background: var(--ink); color: var(--sun); transform: scale(1.02); }

.fx-form { max-width: 34rem; display: grid; gap: 1.15rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 64rem) {
  .fx-gate { display: grid; grid-template-columns: 1fr minmax(26rem, 34rem); column-gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .fx-gate .fx-back { grid-column: 1 / -1; }
  .fx-gate .fx-form { margin-top: .5rem; }
}
.fx-field { display: grid; gap: .4rem; }
.fx-field label { font-size: .9375rem; font-weight: 700; }
.fx-field input {
  width: 100%;
  min-height: 3.625rem;
  padding: .75rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fffbea;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  transition: box-shadow .2s var(--ease);
}
.fx-field input:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.fx-field.has-error input { border-color: var(--err); }
.fx-err { margin: 0; color: var(--err); font-size: .9375rem; font-weight: 650; }
.fx-consent {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.45;
  cursor: pointer;
}
.fx-consent input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--ink); }
.fx-form .fx-btn { margin-top: .4rem; }
.fx-form .fx-small { margin: 0; color: var(--ink-soft); }
.fx-privacy { margin-top: -.6rem !important; }

/* ---------- result: the top ---------- */

.fx-top {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "copy art";
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1rem, 4vh, 3rem) var(--pad) clamp(2rem, 6vh, 4rem);
  max-width: var(--maxw);
  margin: 0 auto;
}
.fx-top-copy { grid-area: copy; }
.fx-eyebrow { margin: 0 0 1.1rem; font-size: 1rem; font-weight: 720; color: var(--sun-soft); }
.fx-line { margin: 1.5rem 0 2rem; font-size: clamp(1.1875rem, 1.5vw, 1.375rem); max-width: 34ch; }
.fx-said { margin: -1rem 0 2rem; max-width: 36ch; color: var(--mist); font-style: italic; overflow-wrap: anywhere; }
.fx-body { margin: 0 0 2rem; max-width: 40ch; color: var(--mist); }

.fx-facts {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.75rem 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(251, 250, 246, .24);
  max-width: 44rem;
}
.fx-facts--three { grid-template-columns: 1.2fr 1fr; }
.fx-facts--three .fx-fact:first-child { grid-row: span 2; }
.fx-fact h2 { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 700; font-stretch: 100%; color: var(--mist); letter-spacing: 0; }
.fx-fact p { margin: 0; font-size: 1.0625rem; }
.fx-example { font-size: 1.25rem !important; font-weight: 600; line-height: 1.35; }

.fx-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; font-size: 1.0625rem; }
.fx-list li { position: relative; padding-left: 1.25rem; }
.fx-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .45rem;
  height: .45rem;
  border-radius: 2px;
  background: var(--sun-soft);
}
.fx-list--not li::before { height: 2px; top: .78em; background: var(--mist); }

/* The signature moment: the hire, rendered in the page's own colour,
   turning toward the pointer and lifting off its shadow when you hover it
   (or drifting slowly on a phone). start.js drives the custom properties
   with a spring; without it everything sits at rest. */
.fx-object {
  position: relative;
  grid-area: art;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 1;
  perspective: 750px;
  animation: fx-arrive 1.2s var(--ease) .05s both;
  /* The fade into the page sits on the frame, which never moves, not on the
     photo, which does: a mask that turned with the photo showed its edge as
     a pale arc the moment it tilted. */
  -webkit-mask-image: radial-gradient(closest-side, #000 56%, transparent 97%);
  mask-image: radial-gradient(closest-side, #000 56%, transparent 97%);
}
.fx-object-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    scale(var(--s, 1));
  transform-style: preserve-3d;
  will-change: transform;
}
/* A soft contact shadow on the floor under the object. It stays on the
   floor, slides the opposite way to the tilt and fades as the object lifts. */
.fx-shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 69%;
  width: 46%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 28, 19, .7), rgba(10, 28, 19, 0));
  filter: blur(9px);
  mix-blend-mode: multiply;
  opacity: var(--sho, .42);
  transform: translate(-50%, -50%) translateX(var(--shx, 0px)) scale(var(--shs, 1));
  pointer-events: none;
}
.fx-object img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fx-sheen {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 40%) var(--my, 35%), rgba(255, 255, 255, .3), transparent 34%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.fx-object.is-live .fx-sheen { opacity: 1; }

/* ---------- result: the sections below ---------- */

.fx-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad) 0;
}
.fx-program .fx-lede { color: var(--mist); max-width: 44ch; }

.fx-steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0 0 0 1.75rem;
  display: grid;
  gap: 1.6rem;
  max-width: 60rem;
  border-left: 2px solid rgba(251, 250, 246, .2);
}
.fx-steps li { position: relative; display: grid; grid-template-columns: minmax(13rem, 17rem) 1fr; gap: .35rem 2rem; }
.fx-steps li::before {
  content: '';
  position: absolute;
  left: calc(-1.75rem - 7px);
  top: .45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sun-soft);
  box-shadow: 0 0 0 5px var(--green);
}
.fx-steps strong { font-weight: 720; }
.fx-steps span { color: #e6ede8; }

.fx-video video {
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  background: var(--green-deep);
}

.fx-book { display: grid; justify-items: start; gap: 1.5rem; scroll-margin-top: 1rem; }
.fx-embed {
  width: 100%;
  max-width: 60rem;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}
.fx-embed iframe { display: block; width: 100%; height: 44rem; border: 0; }
.fx-notready { margin: 0; color: var(--mist); }

.fx-offer {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 32px;
  background: var(--green-deep);
  max-width: calc(var(--maxw) - 2 * var(--pad));
  width: calc(100% - 2 * var(--pad));
}
.fx-offer-name { font-size: clamp(2.5rem, 5.6vw, 5rem); font-stretch: 125%; }
.fx-offer > .fx-lede { color: var(--mist); max-width: 46ch; }
.fx-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem 3.5rem;
  margin-top: 3rem;
}
.fx-get { grid-column: 1 / -1; }
.fx-list--get { grid-template-columns: 1fr 1fr; gap: .7rem 2.5rem; }
.fx-guarantees { margin: 0; padding-left: 1.3rem; display: grid; gap: .9rem; }
.fx-guarantees li::marker { font-weight: 800; color: var(--sun-soft); }
.fx-price-tag {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 .9rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.04em;
  line-height: 1;
}
.fx-was {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  color: var(--mist);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--sun-soft);
}
.fx-now { font-size: clamp(3rem, 5vw, 4.25rem); }
.fx-price-text { margin: 0; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; }
.fx-spots { display: block; margin-top: .9rem; color: var(--sun-soft); font-weight: 760; font-size: 1.25rem; }

.fx-why { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid rgba(251, 250, 246, .18); }
.fx-why-body { display: grid; grid-template-columns: 9.5rem 1fr; gap: 2rem; align-items: start; }
.fx-why-body p { margin: 0; max-width: 60ch; }
.fx-why-face {
  width: 9.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  background: var(--green);
  filter: grayscale(.85) contrast(1.02);
}
.fx-certs { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 0; padding: 0; }
.fx-certs img { width: 12.5rem; border-radius: 8px; }

.fx-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3.5rem; margin-top: 3.5rem; }
.fx-faq { margin-top: 3.5rem; max-width: 52rem; }
.fx-faq details { border-top: 1px solid rgba(251, 250, 246, .18); }
.fx-faq details:last-child { border-bottom: 1px solid rgba(251, 250, 246, .18); }
.fx-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 650;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
}
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary::after {
  content: '+';
  flex: none;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .35s var(--ease);
}
.fx-faq details[open] summary::after { transform: rotate(45deg); }
.fx-faq details p { margin: 0 0 1.25rem; color: var(--mist); max-width: 60ch; }

.fx-final { padding-bottom: clamp(4rem, 10vw, 8rem); }

/* ---------- plain pages (thank-you, notices) ---------- */

.fx-plain { padding: clamp(2.5rem, 12vh, 8rem) var(--pad) 5rem; max-width: 56rem; }
.fx-plain .fx-lede { margin-top: 1.25rem; color: var(--sky); }
.fx-plain .fx-btn { margin-top: 2rem; }

/* ---------- screen changes (JavaScript on) ---------- */

.fx-main.is-leaving { opacity: 0; transform: translateX(var(--leave, -28px)); transition: opacity .18s ease-in, transform .18s ease-in; }
.fx-main.is-entering { opacity: 0; transform: translateX(var(--enter, 28px)); }
.fx-main.is-in { transition: opacity .45s var(--ease), transform .55s var(--ease); }

@keyframes fx-arrive {
  from { opacity: 0; transform: translateY(26px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-settle {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 47.99rem) {
  :root { --bar: 3.75rem; }
  body { font-size: 1.0625rem; }

  .fx-intro { min-height: 0; overflow: visible; }
  .fx-intro-copy { padding-top: 1.5rem; }
  .fx-intro .fx-lede { margin: 1.1rem 0 1.5rem; }
  .fx-intro .fx-btn { width: 100%; }
  .fx-intro .fx-small { text-align: center; margin-left: 0; }
  /* In the flow, not behind the copy, so a short Instagram viewport scrolls
     instead of putting the objects under the button. The empty top half of
     the picture tucks under the copy. */
  .fx-intro-art { position: relative; inset: auto; display: block; margin-top: -44vw; }
  .fx-intro-art img { height: auto; aspect-ratio: 4 / 5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 82%, transparent 100%); }

  .fx-q, .fx-gate { padding-top: 1.5rem; }
  .fx-back { margin-bottom: 1rem; }
  .fx-opts { flex-direction: column; }
  .fx-opt { width: 100%; min-height: 3.75rem; padding: .9rem 1.4rem; font-size: 1.0625rem; border-radius: 20px; }
  .fx-form .fx-btn { width: 100%; }

  .fx-top { grid-template-columns: 1fr; grid-template-areas: "art" "copy"; gap: 0; padding-top: 0; }
  /* "Researcher" is the longest word any result name has: 6.9em in this
     face at 125% width, so 11.5vw is the ceiling that keeps it inside a 320px
     screen with the side padding. */
  .fx-display--result { font-size: min(11.5vw, 3.25rem); }
  .fx-object { justify-self: center; max-width: min(84vw, 24rem); margin-bottom: -.5rem; }
  .fx-facts, .fx-facts--three { grid-template-columns: 1fr; gap: 1.4rem; }
  .fx-facts--three .fx-fact:first-child { grid-row: auto; }

  .fx-steps { padding-left: 1.4rem; }
  .fx-steps li { grid-template-columns: 1fr; }
  .fx-steps li::before { left: calc(-1.4rem - 7px); }
  .fx-book .fx-btn, .fx-final .fx-btn { width: 100%; padding-inline: 1rem; font-size: 1rem; letter-spacing: -.01em; }
  .fx-embed iframe { height: 48rem; }

  .fx-offer { border-radius: 24px; width: calc(100% - 1.5rem); padding: 1.75rem 1.25rem; }
  .fx-offer-grid, .fx-list--get, .fx-fit { grid-template-columns: 1fr; }
  .fx-why-body { grid-template-columns: 1fr; gap: 1.25rem; }
  .fx-why-face { width: 7rem; }
  .fx-certs img { width: calc((100% - 1.8rem) / 3); min-width: 0; }
  .fx-certs li { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pay now (Addendum v4.0), under the price */
.fx-pay { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(251, 250, 246, .18); }
.fx-pay-line { margin: 0 0 .9rem; font-weight: 760; font-size: 1.25rem; }
.fx-pay-small { color: var(--mist); }

/* Welcome, after paying */
.fx-welcome { padding: clamp(2.5rem, 12vh, 8rem) var(--pad) 5rem; max-width: 56rem; }
.fx-welcome .fx-lede { margin-top: 1.4rem; color: var(--mist); }
.fx-next { margin: 1.4rem 0 0; padding-left: 1.6rem; display: grid; gap: 1rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); max-width: 46ch; }
.fx-next li::marker { font-weight: 800; color: var(--sun-soft); }
.fx-next strong { font-weight: 760; }
.fx-welcome .fx-small { margin-top: 2rem; color: var(--mist); }