/*
 * Velvet Frames: landing and waitlist pages.
 *
 * One stylesheet and no build step: edit it and upload it. The layout busts
 * caches with the file's modification time.
 *
 * Palette from the brand kit: notte #090002 (backgrounds), magenta #ad21b4
 * (buttons, large titles), rosa #fcb3ff (text on dark). White on the button
 * gradient (#c02ac7-#7d1683) stays above 4.5:1; body text never sits on bare
 * magenta. Type: Lilita One for the display, Figtree for the text.
 */

@font-face {
  font-family: "Lilita One";
  src: url("../fonts/lilita-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --velvet: #090002;
  --magenta: #ad21b4;
  --orchid: #fcb3ff;

  --canvas: var(--velvet);
  --canvas-deep: #040001;
  --raised: #1d0620;
  --line: rgba(252, 179, 255, 0.12);
  --line-strong: rgba(252, 179, 255, 0.22);
  --fg: #fff4ff;
  --fg-muted: #e0c6e2;
  --fg-subtle: #ae92b1;
  --danger: #ffb3c7;
  --success: #8ee6c0;

  --button: linear-gradient(135deg, #c02ac7 0%, var(--magenta) 45%, #7d1683 100%);
  --ink: linear-gradient(100deg, var(--orchid) 0%, #e06ae6 45%, var(--magenta) 100%);

  --radius: 14px;
  --radius-lg: 24px;
  --maxw: 1160px;

  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  position: relative;
  flex: 1;
  overflow-x: clip;
}

a {
  color: var(--orchid);
  text-underline-offset: 3px;
}

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

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

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--fg);
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 720px) {
  .wrap {
    padding-inline: 2rem;
  }
}

/* --- Backdrop: velvet folds, grain and slow light ------------------------- */

.velvet {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(173, 33, 180, 0.4), transparent 60%),
    radial-gradient(90% 60% at 50% 125%, rgba(84, 10, 90, 0.6), transparent 70%),
    var(--canvas);
}

/* Two stripe patterns out of step with each other read as fabric, not a grid. */
.velvet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 90vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 0, 0, 0.3) 62px, rgba(252, 179, 255, 0.04) 88px, transparent 118px),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(0, 0, 0, 0.2) 115px, rgba(252, 179, 255, 0.035) 150px, transparent 190px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}

.velvet::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}

.glow-pink {
  width: 52vmax;
  height: 52vmax;
  left: -18vmax;
  top: -22vmax;
  background: radial-gradient(circle, rgba(173, 33, 180, 0.45), transparent 65%);
}

.glow-purple {
  width: 46vmax;
  height: 46vmax;
  right: -18vmax;
  top: 8vh;
  background: radial-gradient(circle, rgba(252, 179, 255, 0.16), transparent 65%);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

/* Mirrored so she faces the page, a quarter of the screen wide. Only on wide
   screens does the margin beside the content fit her; on narrower ones she
   sits behind the text, so she fades back there. Phones get her perched on
   the signup card instead (.fairy-perch).
   The rail spans the main content, behind it, and holds her at its foot:
   sticky, she stays at the bottom of the window while scrolling, then rests
   on the footer's top edge instead of sliding under it. */
.fairy-rail {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.fairy {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  align-self: flex-start;
  width: auto;
  height: min(25vw, 50vh);
  transform: scaleX(-1);
  opacity: 0.18;
}

@media (max-width: 759px) {
  .fairy {
    display: none;
  }
}

/* Shown in full, she grows no wider than the margin, so her braid stays clear
   of the content's edge. */
@media (min-width: 1800px) {
  .fairy {
    height: min(25vw, 50vh, (100vw - var(--maxw)) / 2);
    opacity: 0.9;
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(7vmax, 5vmax, 0) scale(1.14);
  }
}

/* --- Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 0, 2, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: auto;
  height: 40px;
}

/* Below 360px the full-size logo leaves the button too little room, and its
   label wraps onto two lines. */
@media (max-width: 359px) {
  .site-header .wordmark img {
    height: 30px;
  }
}

.display em,
.step-numeral {
  font-style: normal;
  background: var(--ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a:not(.btn) {
  color: var(--fg-muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-nav a:not(.btn):hover {
  color: var(--fg);
}

@media (max-width: 560px) {
  .site-nav a:not(.btn) {
    display: none;
  }
}

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

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Lilita One overhangs its box a little; without the padding the gradient clips it. */
.display em {
  padding-right: 0.04em;
}

.kicker {
  margin: 0 0 0.85rem;
  color: var(--orchid);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.subtle {
  color: var(--fg-subtle);
  font-size: 0.875rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(252, 179, 255, 0.08);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-primary,
.btn-small {
  background: var(--button);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(173, 33, 180, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:hover,
.btn-small:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -12px rgba(173, 33, 180, 1), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-ghost {
  border-color: var(--line-strong);
  background: transparent;
}

.btn-ghost:hover {
  background: rgba(252, 179, 255, 0.08);
  color: var(--fg);
}

.btn-small {
  padding: 0.55rem 1.05rem;
  font-size: 0.875rem;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

.hero {
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding-block: clamp(2.75rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 4.5rem;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(252, 179, 255, 0.05);
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orchid);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 179, 255, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(252, 179, 255, 0);
  }
}

.hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
}

/* One sentence per line: "Show your art." / "Grow your fans." / "Get paid." */
.hero h1 > span,
.hero h1 > em {
  display: block;
}

/* On a line of its own the gradient only fills the tight line height, which
   cuts the descenders of "paid" and "pagare"; the padding gives them room and
   the negative margin keeps the spacing as it was. */
.hero h1 > em {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* The Italian sentences run longer ("Conquista nuovi fan."), so the title is sized
   to the column to keep one sentence per line. On the narrowest phones even the
   minimum would wrap it, so there the minimum gives way to 11cqi, which fits. */
.hero-copy {
  container-type: inline-size;
}

.hero h1:lang(it) {
  font-size: clamp(min(2.1rem, 11cqi), 9.6cqi, 4.4rem);
}

.lede {
  max-width: 34rem;
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.65;
}

.hero-note {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--fg-subtle);
  font-size: 0.875rem;
}

/* --- Signup form ---------------------------------------------------------- */

.hero-form {
  position: relative;
  scroll-margin-top: 96px;
}

.form-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(50, 12, 52, 0.95), rgba(32, 2, 35, 0.97));
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.form-card::before {
  content: "";
  position: absolute;
  inset: -1px 16% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--orchid), transparent);
}

/* On phones the backdrop fairy would sit behind the text, so she sits on
   the card's top edge instead, in the room the extra margin makes. */
.fairy-perch {
  display: none;
}

@media (max-width: 759px) {
  .hero-form {
    margin-top: 3.5rem;
    scroll-margin-top: 196px;
  }

  .fairy-perch {
    display: block;
    position: absolute;
    right: -6px;
    top: -118px;
    width: auto;
    height: 140px;
    transform: scaleX(-1);
    pointer-events: none;
  }
}

.form-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.form-lede {
  margin: 0 0 1.5rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.form-error {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 150, 180, 0.35);
  border-radius: 10px;
  background: rgba(255, 110, 150, 0.1);
  color: var(--danger);
  font-size: 0.875rem;
}

.field {
  min-width: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  color: #f1e3ee;
  font-size: 0.875rem;
  font-weight: 500;
}

.optional {
  color: var(--fg-subtle);
  font-weight: 400;
}

input[type="email"],
input[type="text"],
textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(14, 0, 16, 0.6);
  color: var(--fg);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-subtle);
}

input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--orchid);
  box-shadow: 0 0 0 3px rgba(252, 179, 255, 0.2);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(14, 0, 16, 0.6);
}

.segmented label {
  position: relative;
}

.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: var(--fg-muted);
  font-size: 0.9375rem;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented input:checked + span {
  background: var(--button);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(173, 33, 180, 0.9);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--orchid);
  outline-offset: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.3rem 0 1.4rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
  cursor: pointer;
}

.consent input {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  accent-color: var(--magenta);
}

.consent + .consent {
  margin-top: -0.55rem;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: 1rem 0 0;
  color: var(--fg-subtle);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.form-success p {
  color: var(--fg-muted);
}

/* An address moves to the next line whole, and is broken only if it is
   longer than the line itself (or at a hyphen, like any word). Inline, so
   the full stop after it stays on its last line. */
.form-success strong {
  color: var(--fg);
  overflow-wrap: anywhere;
}

.form-success:focus {
  outline: none;
}

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

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  scroll-margin-top: 68px;
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head .display {
  margin-bottom: 0.85rem;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.section-lede {
  margin: 0;
  color: var(--fg-muted);
  font-size: 1.0625rem;
}

/* --- Placards: three numbered labels ------------------------------------------ */

.placards {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .placards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.placard-no {
  margin: 0 0 0.35rem;
  color: var(--orchid);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.placard h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.placard p:last-child {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* --- Steps ------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  list-style: none;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(26, 0, 28, 0.92);
}

.step-numeral {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
}

.step h3 {
  margin: 0 0 0.45rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.step p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* --- FAQ: the heading holds still on the left while the answers open -------- */

@media (min-width: 960px) {
  .faq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }

  .faq .section-head {
    position: sticky;
    top: 96px;
    margin-bottom: 0;
  }
}

.faq-list {
  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: 1.25rem;
  padding-block: 1.25rem;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a cross while the answer is open. */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--orchid);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--orchid);
}

.faq-item p {
  max-width: 62ch;
  margin: 0;
  padding-bottom: 1.4rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* --- Closing call to action ------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block: 0.5rem clamp(4rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(173, 33, 180, 0.35), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, rgba(252, 179, 255, 0.14), transparent 60%),
    rgba(32, 2, 35, 0.92);
}

.cta-band .display {
  max-width: 20ch;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

/* --- Single-message pages (confirmation, unsubscribe, errors) --------------- */

.narrow {
  max-width: 42rem;
  padding-block: clamp(3rem, 10vw, 7rem);
}

.panel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(50, 12, 52, 0.95), rgba(32, 2, 35, 0.97));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}

.panel .display {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.panel p {
  margin: 0 0 0.75rem;
  color: var(--fg-muted);
}

.panel strong {
  display: inline-block;
  max-width: 100%;
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.panel .consent-statement {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(14, 0, 16, 0.45);
  color: var(--fg);
  font-size: 0.9375rem;
}

.panel-ok {
  border-color: rgba(142, 230, 192, 0.35);
}

.panel-ok .kicker {
  color: var(--success);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --- Long-form pages (privacy notice) --------------------------------------- */

.legal {
  max-width: 46rem;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.legal-head .display {
  margin-bottom: 0.75rem;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
}

.legal-head .subtle {
  margin: 0;
}

.legal-summary {
  margin: 2rem 0 2.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
}

.legal-summary p {
  margin: 0;
}

.legal h2 {
  margin: 2.75rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  color: var(--fg-muted);
}

.legal p {
  margin: 0 0 1rem;
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal strong {
  color: var(--fg);
  font-weight: 600;
}

.legal code {
  color: var(--fg);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

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

.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  background: rgba(19, 0, 21, 0.7);
}

.site-footer-inner {
  display: grid;
  gap: 1rem;
}

.wordmark-quiet img {
  height: 18px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-nav a {
  color: var(--fg-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

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

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-muted);
  transition: color 0.15s, border-color 0.15s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--line-strong);
  color: var(--fg);
}

.footer-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  color: var(--fg-subtle);
  font-size: 0.8125rem;
}

@media (min-width: 760px) {
  .site-footer-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .footer-nav {
    justify-content: flex-end;
  }

  .footer-note {
    grid-column: 1 / -1;
  }
}

/* --- Entrance --------------------------------------------------------------- */

/* Movement only, no fade: if the animation never runs (a crawler, a link
   preview, a stalled tab), the content is still there to read. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .hero-form {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero-copy > :nth-child(n + 4) {
    animation-delay: 0.24s;
  }

  .hero-form {
    animation-delay: 0.2s;
  }
}

@keyframes rise {
  from {
    transform: translateY(20px);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .glow,
  .pulse,
  .spinner {
    animation: none;
  }

  .btn,
  .faq-item summary::after {
    transition: none;
  }
}