/* ============================================================
   diferent labs, apply
   brand: #121212 ground, #D4FE5E lime, Roboto Thin + VP Pixel
   ============================================================ */

@font-face {
  font-family: "VP Pixel";
  src: url("../fonts/VPPixel-Standard.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg:        #121212;
  --lime:      #D4FE5E;
  --green:     #A4D420;
  --green-dim: #5E8B2A;
  --white:     #FFFFFF;

  --txt:       rgba(255,255,255,.92);
  --txt-soft:  rgba(255,255,255,.58);
  --txt-faint: rgba(255,255,255,.34);
  --line:      rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --danger:    #FF6B5E;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --maxw: 940px;
  --pad:  clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* `clip` rather than `hidden`: `overflow-x: hidden` makes the element a
     scroll container, which desyncs position:fixed layers from the scroll. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--txt);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.pixel {
  font-family: "VP Pixel", "Roboto", monospace;
  font-weight: 400;
  letter-spacing: .02em;
}

/* gradient pixel type, mid green → bright lime, as on the homepage */
.grad {
  background: linear-gradient(100deg, var(--green-dim) 0%, var(--green) 38%, var(--lime) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: var(--lime); color: #0B0B0B; }

a { color: inherit; }

/* ── ambient background ───────────────────────────────────── */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* own compositing layer: keeps the animated blooms and the blended grain
     from forcing repaints of (and paint artifacts in) the scrolling content */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Lamp blobs. The morphing border-radius plus a heavy blur is what gives the
   gel-lamp read: the mass deforms as it travels rather than sliding rigidly.
   Long, prime-ish durations keep the three from visibly resyncing.

   Olive/moss rather than bright lime, since the lime is reserved for type and
   buttons. Heavy blur and generous overlap read as one gradient mesh rather
   than separate circles. */
.bloom {
  position: absolute;
  filter: blur(96px) saturate(125%);
  will-change: transform, border-radius;
  opacity: .95;
}

/* The masses sit mostly off-canvas and spill inward, so the middle of the page
   stays genuinely black and the green reads as light entering from the edges.
   Overlapping them fully just floods the page. */

/* brightest mass, left, the light source everything else falls away from */
.bloom--a {
  width: 50vmax; height: 74vmax;
  top: 2vmax; left: -24vmax;
  background: radial-gradient(circle at 44% 48%,
    rgba(152,190,50,.92) 0%,
    rgba(116,150,34,.60) 26%,
    rgba(70,94,20,.28) 48%,
    rgba(13,13,13,0) 72%);
  animation: driftA 58s ease-in-out infinite;
}

/* moss mass, upper right */
.bloom--b {
  width: 56vmax; height: 40vmax;
  top: -16vmax; right: -18vmax;
  background: radial-gradient(circle at 50% 58%,
    rgba(120,152,40,.62) 0%,
    rgba(84,112,26,.34) 30%,
    rgba(13,13,13,0) 66%);
  animation: driftB 71s ease-in-out infinite;
}

/* dim mass, lower right, keeps the bottom from going flat */
.bloom--c {
  width: 48vmax; height: 38vmax;
  bottom: -16vmax; right: -12vmax;
  background: radial-gradient(circle at 50% 45%,
    rgba(96,126,34,.44) 0%,
    rgba(58,78,20,.20) 36%,
    rgba(13,13,13,0) 66%);
  animation: driftC 47s ease-in-out infinite;
}

/* faint highlight drifting through the upper middle, so the dark channel
   between the left and right masses isn't a dead flat band */
.bloom--d {
  width: 38vmax; height: 30vmax;
  top: 20%; left: 40%;
  background: radial-gradient(circle,
    rgba(150,188,54,.22) 0%,
    rgba(88,116,28,.10) 44%,
    rgba(13,13,13,0) 70%);
  animation: driftD 63s ease-in-out infinite;
}

/* Each loop returns to its start frame so the cycle is seamless. */
@keyframes driftA {
  0%, 100% { transform: translate3d(0,0,0) scale(1);
             border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%; }
  25%      { transform: translate3d(5vmax,3vmax,0) scale(1.12);
             border-radius: 44% 56% 38% 62% / 62% 40% 60% 38%; }
  50%      { transform: translate3d(2vmax,7vmax,0) scale(1.04);
             border-radius: 62% 38% 60% 40% / 38% 62% 38% 62%; }
  75%      { transform: translate3d(-4vmax,3vmax,0) scale(1.13);
             border-radius: 40% 60% 46% 54% / 56% 44% 58% 42%; }
}
@keyframes driftB {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05);
             border-radius: 52% 48% 42% 58% / 44% 56% 44% 56%; }
  33%      { transform: translate3d(-6vmax,-4vmax,0) scale(1);
             border-radius: 38% 62% 58% 42% / 60% 38% 62% 40%; }
  66%      { transform: translate3d(-3vmax,-8vmax,0) scale(1.11);
             border-radius: 60% 40% 44% 56% / 40% 60% 40% 60%; }
}
@keyframes driftC {
  0%, 100% { transform: translate3d(0,0,0) scale(.98);
             border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%; }
  40%      { transform: translate3d(-5vmax,-3vmax,0) scale(1.14);
             border-radius: 62% 38% 56% 44% / 40% 60% 42% 58%; }
  70%      { transform: translate3d(3vmax,-6vmax,0) scale(1.03);
             border-radius: 40% 60% 38% 62% / 60% 40% 58% 42%; }
}
@keyframes driftD {
  0%, 100% { transform: translate3d(-50%,-50%,0) scale(.9);
             border-radius: 54% 46% 50% 50% / 48% 52% 48% 52%;
             opacity: .5; }
  35%      { transform: translate3d(-34%,-64%,0) scale(1.2);
             border-radius: 40% 60% 58% 42% / 62% 38% 60% 40%;
             opacity: .9; }
  70%      { transform: translate3d(-64%,-40%,0) scale(1.04);
             border-radius: 62% 38% 40% 60% / 38% 62% 40% 60%;
             opacity: .66; }
}

/* Pushes the unlit areas to true black so the lime reads as light against it -
   this is what makes the contrast feel deep rather than muddy grey. */
.vignette {
  position: absolute; inset: 0;
  background:
    /* dark core: pushes the centre-right of the page to true black so the card
       sits on ground rather than on glow */
    radial-gradient(68% 58% at 58% 56%,
      rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 42%, rgba(10,10,10,0) 78%),
    /* edge falloff */
    radial-gradient(120% 86% at 50% 34%,
      rgba(8,8,8,0) 34%, rgba(8,8,8,.34) 64%, rgba(5,5,5,.78) 88%, rgba(4,4,4,.92) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,.50) 0%, rgba(8,8,8,0) 22%, rgba(8,8,8,0) 56%, rgba(5,5,5,.92) 100%);
}

/* film grain, the noise texture from the homepage.
   Kept just larger than the viewport (not 400%) so the blended layer stays
   cheap to composite; it shuffles by a few px to read as moving film grain. */
/* Coarse grain: a low baseFrequency makes big soft clumps rather than fine
   sand, and the tile is then upscaled ~2x so each clump reads as a visible
   speck. Two layers, a chunky one over a finer one, stop it looking like a
   flat pattern. */
.grain {
  position: absolute;
  inset: -80px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 200px 200px, 140px 140px;
  opacity: .30;
  mix-blend-mode: overlay;
  animation: grainShift .6s steps(1) infinite;
  will-change: transform;
}

@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-22px,10px,0); }
  40%  { transform: translate3d(16px,-18px,0); }
  60%  { transform: translate3d(-12px,-10px,0); }
  80%  { transform: translate3d(12px,16px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* ── nav ──────────────────────────────────────────────────── */

.nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px var(--pad);
  font-size: 14.5px;
  letter-spacing: .01em;
}
/* the wordmark sits in the middle column; the empty third column keeps it
   optically centred against the back link */
.nav__mark { grid-column: 2; }

.nav__back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--txt-soft);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.nav__back:hover { color: var(--txt); }
.nav__arrow { transition: transform .35s var(--ease-out); display: inline-block; }
.nav__back:hover .nav__arrow { transform: translateX(-4px); }

.nav__mark {
  justify-self: center;
  font-family: "VP Pixel", monospace;
  font-size: 15px;
  color: var(--lime);
  text-decoration: none;
  letter-spacing: .03em;
  text-shadow: 0 0 26px rgba(212,254,94,.35);
}

/* ── layout ───────────────────────────────────────────────── */

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 68px) var(--pad) 64px;
}

/* ── hero ─────────────────────────────────────────────────── */

.hero { text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }

.hero__title {
  margin: 0 0 26px;
  font-weight: 100;
  font-size: clamp(40px, 8.4vw, 88px);
  line-height: 1.06;
  letter-spacing: -.012em;
}
.hero__title .line { display: block; }
.hero__title .pixel {
  font-size: .82em;
  line-height: 1.24;
  letter-spacing: .01em;
}

.hero__pill {
  display: inline-block;
  margin: 0;
  padding: 10px 26px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: clamp(12.5px, 1.6vw, 14px);
  color: var(--txt-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── card ─────────────────────────────────────────────────── */

.card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  padding: clamp(24px, 4.4vw, 48px);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 80px -30px rgba(0,0,0,.8);
  overflow: hidden;
}

/* faint lime hairline across the top edge */
.card::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,254,94,.42), transparent);
}

/* ── progress ─────────────────────────────────────────────── */

.steps { margin-bottom: clamp(26px, 4vw, 40px); }

.steps__bar {
  height: 2px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.steps__fill {
  display: block;
  height: 100%;
  width: 33.333%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--lime) 100%);
  box-shadow: 0 0 16px rgba(212,254,94,.55);
  transition: width .62s var(--ease-out);
}

.steps__list {
  display: flex;
  gap: clamp(16px, 4vw, 38px);
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--txt-faint);
  letter-spacing: .04em;
}
.steps__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  transition: color .45s var(--ease);
}
.steps__item .pixel { font-size: 13px; opacity: .7; }
.steps__item.is-active { color: var(--lime); }
.steps__item.is-active .pixel { opacity: 1; }
.steps__item.is-done { color: var(--txt-soft); }

/* ── steps ────────────────────────────────────────────────── */

.step {
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.step[hidden] { display: none; }

.step.is-current { animation: stepIn .5s var(--ease-out) both; }
.step.is-leaving  { animation: stepOut .26s var(--ease) both; }

@keyframes stepIn {
  from { opacity: 0; transform: translate3d(0,14px,0); }
  to   { opacity: 1; transform: none; }
}
@keyframes stepOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0,-10px,0); }
}

.step__legend {
  padding: 0;
  margin: 0 0 clamp(22px, 3.4vw, 32px);
  font-weight: 100;
  font-size: clamp(21px, 3.1vw, 29px);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--txt);
}

/* ── fields ───────────────────────────────────────────────── */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 30px);
  margin-bottom: clamp(18px, 2.6vw, 26px);
}

.field { position: relative; }

.field input,
.field textarea {
  width: 100%;
  padding: 22px 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 0;
  transition: border-color .35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; padding-top: 24px; }

.field input:focus,
.field textarea:focus { outline: none; }

/* floating label */
.field label {
  position: absolute;
  left: 2px; top: 20px;
  font-size: 16px;
  font-weight: 300;
  color: var(--txt-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .34s var(--ease-out), color .34s var(--ease);
}
.field label em { font-style: normal; opacity: .6; }

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-19px) scale(.72);
  color: var(--txt-soft);
}
.field input:focus + label,
.field textarea:focus + label { color: var(--lime); }

/* lime underline that draws in on focus */
.field__line {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--lime) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .48s var(--ease-out);
  box-shadow: 0 0 12px rgba(212,254,94,.5);
}
.field input:focus ~ .field__line,
.field textarea:focus ~ .field__line { transform: scaleX(1); }

.field--area { margin-bottom: 8px; }

.counter {
  position: absolute; right: 2px; bottom: -20px;
  font-size: 13px;
  color: var(--txt-faint);
  letter-spacing: .03em;
}

/* Autofill: Chrome paints its own opaque background over the glass card. The
   absurd transition delay is the standard defeat, the background never
   reaches the autofill colour, so nothing is painted and the card shows
   through. (`background-clip: text` also hides it, but it clips the glyph fill
   too, which rendered spellchecked words as unreadable dark text.) */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  border-radius: 0;
  transition: background-color 100000s ease-in-out 0s;
}

/* ── chips ────────────────────────────────────────────────── */

.block { margin-bottom: clamp(22px, 3.2vw, 30px); }

.block__label {
  display: block;
  margin-bottom: 14px;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--txt-soft);
}
.block__label em { font-style: normal; color: var(--txt-faint); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* Not selectable: a click that drifted a pixel was starting a text selection
   on the label instead of toggling the input, which read as the chip failing
   to respond and left the word highlighted. */
.chip {
  position: relative;
  display: inline-flex;
  -webkit-user-select: none;
  user-select: none;
}
.chip input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 15px;
  color: var(--txt-soft);
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease), transform .3s var(--ease-out),
              box-shadow .3s var(--ease);
}
.chip span i { font-style: normal; opacity: .55; font-size: .88em; }

.chip input:hover + span {
  color: var(--txt);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-1px);
}
.chip input:focus-visible + span {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(212,254,94,.18);
}
.chip input:checked + span {
  color: #0D0D0D;
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 24px rgba(212,254,94,.28);
}
.chip input:checked + span i { opacity: .6; }

/* ── buttons ──────────────────────────────────────────────── */

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: clamp(26px, 3.6vw, 36px);
}

.hint {
  margin-right: auto;
  font-size: 13.5px;
  color: var(--txt-faint);
  letter-spacing: .02em;
}
.hint kbd {
  font-family: "VP Pixel", monospace;
  font-size: 13px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--txt-soft);
}

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px;
  border: 1px solid var(--lime);
  border-radius: 100px;
  background: var(--lime);
  color: #0D0D0D;
  font-family: inherit;
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .35s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
  box-shadow: 0 0 0 rgba(212,254,94,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -8px rgba(212,254,94,.5);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.btn__arrow { transition: transform .38s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--txt-soft);
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--txt);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  box-shadow: none;
}
.btn--ghost:hover .btn__arrow { transform: translateX(-4px); }

.btn--send { padding-left: 30px; padding-right: 30px; }
.btn--send .btn__text { font-size: 15px; }

/* sheen sweep on the submit button */
.btn--send::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .75s var(--ease-out);
}
.btn--send:hover::after { left: 125%; }

/* loading state */
.btn__spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border: 2px solid rgba(13,13,13,.25);
  border-top-color: #0D0D0D;
  border-radius: 50%;
  opacity: 0;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__text,
.btn.is-loading .btn__arrow { opacity: 0; }
.btn.is-loading .btn__spinner { opacity: 1; }
.btn.is-loading::after { display: none; }

/* ── notes & errors ───────────────────────────────────────── */

.formnote {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--txt-faint);
  text-align: right;
}

.err {
  margin: 7px 0 0;
  min-height: 0;
  font-size: 14px;
  color: var(--danger);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* Taken out of flow inside a field: in flow, its top margin made .field taller
   than the input, so .field__line (pinned to the field's bottom) drew a second
   line a few px below the input's own border. Errors under chip groups stay in
   flow, they have no underline to collide with. */
.field .err {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 5px 0 0;
}
.err.is-on { opacity: 1; transform: none; }

.err--form { text-align: right; margin-top: 12px; }

.field.has-err input,
.field.has-err textarea { border-bottom-color: var(--danger); }
.field.has-err label,
.field.has-err input:focus + label,
.field.has-err textarea:focus + label { color: var(--danger); }
/* keep the focus underline red while the field is still invalid */
.field.has-err .field__line {
  background: var(--danger);
  box-shadow: 0 0 12px rgba(255,107,94,.45);
}

.step.shake { animation: shake .42s var(--ease); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22%     { transform: translateX(-7px); }
  46%     { transform: translateX(6px); }
  70%     { transform: translateX(-3px); }
}

/* honeypot */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── success ──────────────────────────────────────────────── */

.done { text-align: center; padding: clamp(14px, 3vw, 30px) 0; }
.done[hidden] { display: none; }
.done.is-on { animation: stepIn .6s var(--ease-out) both; }

.done__mark {
  width: 66px; height: 66px;
  margin: 0 auto 26px;
  border: 1px solid rgba(212,254,94,.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--lime);
  box-shadow: 0 0 42px rgba(212,254,94,.22);
  animation: markPop .55s var(--ease-out) both;
}
.done__mark svg { width: 34px; height: 34px; }
.done__check {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: draw .5s var(--ease-out) .28s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes markPop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

.done__title {
  margin: 0 0 12px;
  font-weight: 100;
  font-size: clamp(27px, 4.6vw, 40px);
  line-height: 1.2;
}
.done__title .pixel { font-size: .8em; }

.done__copy {
  margin: 0 auto 30px;
  max-width: 44ch;
  color: var(--txt-soft);
  font-size: 15px;
}

/* ── footer ───────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: clamp(30px, 5vw, 48px);
  font-size: 14px;
  color: var(--txt-faint);
}
.foot a {
  color: var(--txt-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.foot a:hover { color: var(--lime); border-color: rgba(212,254,94,.55); }

/* ── entrance reveal ──────────────────────────────────────── */

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

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 680px) {
  .row { grid-template-columns: 1fr; }

  /* both items fit once the apply pill is gone: link left, wordmark right */
  .nav { grid-template-columns: auto 1fr; }
  .nav__mark { grid-column: 2; justify-self: end; }

  .hero__title { font-size: clamp(36px, 12vw, 56px); }

  .actions { flex-wrap: wrap; }
  .hint { display: none; }
  .btn { flex: 1 1 auto; justify-content: center; }

  .formnote { text-align: center; }
  .err--form { text-align: center; }

  .card { border-radius: 20px; }
}

@media (max-width: 400px) {
  .chip span { font-size: 14px; padding: 8px 14px; }
}

/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .bloom, .grain { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .done__check { stroke-dashoffset: 0; }
}