:root {
  --ink: #000;
  --paper: #fff;
  --acid: #e6ff00;
  --pink: #ff2e88;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.22);
  --raise: #0f0f0f;

  --font: "Archivo", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: 16px;
  --max: 1240px;
  --section: clamp(5rem, 12vw, 10rem);

  color-scheme: dark;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--acid); color: var(--ink); }
input { caret-color: var(--acid); }

html { scrollbar-color: #333 var(--ink); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid var(--ink); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--acid); }

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

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--acid);
  color: var(--ink);
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.acid { color: var(--acid); }
.pink { color: var(--pink); }

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

.h2 {
  font-size: clamp(2.5rem, 7.4vw, 6rem);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 16ch;
}

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

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.85rem 1.5rem;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 800;
  font-stretch: 105%;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 200ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.4; }

.btn--acid { --btn-bg: var(--acid); --btn-fg: var(--ink); }
.btn--pink { --btn-bg: var(--pink); --btn-fg: var(--ink); }
.btn--ghost { border-color: var(--line); }
.btn--block { width: 100%; }
.btn--big { min-height: 68px; font-size: 1.25rem; }

@media (hover: hover) and (pointer: fine) {
  .btn--acid:hover:not(:disabled),
  .btn--pink:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px var(--btn-bg);
  }
  .btn--ghost:hover:not(:disabled) { border-color: var(--text); }
}

/* ---------- Top bar ---------- */

.bar,
.hero {
  background: var(--pink);
  color: var(--ink);
}
.bar ::selection,
.hero ::selection { background: var(--ink); color: var(--pink); }
.bar :focus-visible,
.hero :focus-visible { outline-color: var(--ink); }

.bar > .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-block: 1.25rem;
}
.wordmark .wl--r { color: var(--paper); }
.bar__join {
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

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

.hero {
  padding-top: clamp(0.5rem, 3vw, 2rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.hero > .wrap { container-type: inline-size; }
/* The bar ends on a fractional pixel; this hides the black seam where they meet. */
.hero { box-shadow: 0 -2px 0 var(--pink); }

.wordmark {
  font-weight: 900;
  font-stretch: 125%;
  /* CLEARR measures 5.1em at this width and tracking, so this spans the column exactly */
  font-size: min(18vw, 14rem);
  font-size: calc(100cqi / 5.15);
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: var(--ink);
  margin-left: -0.04em;
  white-space: nowrap;
  user-select: none;
}

/* Each letter slides out from behind the one before it: the outer box clips
   only its left edge, so the inner letter is hidden until it crosses that seam. */
.wl {
  display: inline-block;
  clip-path: inset(-0.3em -0.3em -0.3em 0);
}
.wl > span {
  display: inline-block;
  animation: wl-out 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wl:nth-child(1) > span { animation: none; }
.wl:nth-child(2) > span { animation-delay: 250ms; }
.wl:nth-child(3) > span { animation-delay: 340ms; }
.wl:nth-child(4) > span { animation-delay: 430ms; }
.wl:nth-child(5) > span { animation-delay: 520ms; }
.wl:nth-child(6) > span { animation-delay: 610ms; }
/* -100% alone leaves a sliver showing: tight tracking makes each glyph wider than its box. */
@keyframes wl-out {
  from { transform: translateX(calc(-100% - 0.2em)); }
}

.hero__grid {
  display: grid;
  gap: 3rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 4rem; }
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  text-wrap: balance;
  font-weight: 900;
  font-stretch: 100%;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.hero__title em {
  font-style: normal;
  color: var(--paper);
  display: inline-block;
}

.hero__lede {
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  max-width: 38ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
@media (max-width: 479px) {
  .hero__ctas .btn { width: 100%; }
}

.hero__stage { display: grid; justify-items: center; gap: 1rem; }

.hero__bill {
  display: block;
  width: min(100%, 420px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.hero__bill .bill { transform: rotate(2.5deg); }
.hero__hint { font-size: 0.875rem; color: var(--ink); }

/* On pink, the "need help" button goes black and the yellow one gets an edge. */
.hero .btn--pink { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.hero .btn--acid { border-color: var(--ink); }

/* ---------- Bill (the villain) ---------- */

.bill {
  position: relative;
  display: grid;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.06);
  transition: transform 300ms var(--ease-out), opacity 200ms ease, filter 200ms ease;
}

.bill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--ink);
}
.bill__co { font-weight: 800; font-stretch: 90%; font-size: 1.0625rem; letter-spacing: -0.01em; }
.bill__type {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}

.bill__body { display: grid; padding: 1.25rem 1.25rem 1.5rem; }
.bill__label { font-size: 0.8125rem; font-weight: 600; color: #444; }
.bill__amt {
  font-weight: 900;
  font-stretch: 110%;
  font-size: clamp(3rem, 12vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
  text-decoration: line-through transparent 0.09em;
  transition: text-decoration-color 200ms ease 160ms;
}
.bill__meta { margin-top: 0.5rem; font-size: 0.875rem; color: #444; font-variant-numeric: tabular-nums; }

.bill__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.25rem;
  background: #f0f0f0;
  font-size: 0.8125rem;
  font-weight: 600;
}
.bill__ok { display: inline-flex; align-items: center; gap: 0.35rem; }
.bill__ok::before {
  content: "";
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23E6FF00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.is-clearred .bill__amt { text-decoration-color: var(--pink); }

/* The rubber stamp */
.stamp {
  position: absolute;
  top: 56%;
  left: 66%;
  z-index: 2;
  padding: 0.12em 0.4em 0.08em;
  border: 0.13em solid currentColor;
  border-radius: 0.14em;
  color: var(--pink);
  font-weight: 900;
  font-stretch: 70%;
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1.7);
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 0.08em;
  border: 0.04em solid currentColor;
  border-radius: 0.08em;
}

.is-clearred .stamp {
  opacity: 0.94;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1);
  animation: stamp-slam 340ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.is-clearred { animation: bill-thud 340ms var(--ease-out) both; }
.hero__bill .is-clearred { animation-name: bill-thud-tilt; }

@keyframes stamp-slam {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(1.8); }
  55%  { opacity: 0.94; transform: translate(-50%, -50%) rotate(-13deg) scale(0.93); }
  100% { opacity: 0.94; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
@keyframes bill-thud {
  0%, 40% { transform: scale(1); }
  55% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes bill-thud-tilt {
  0%, 40% { transform: rotate(2.5deg) scale(1); }
  55% { transform: rotate(2.5deg) scale(0.96); }
  100% { transform: rotate(2.5deg) scale(1); }
}

.bill.is-leaving { opacity: 0; filter: blur(4px); transition-duration: 160ms; }
.hero__bill .bill.is-leaving { transform: rotate(-6deg) translateX(-24px) scale(0.96); }
.hero__bill .bill.is-entering { opacity: 0; transform: rotate(8deg) translateX(30px) scale(0.96); transition: none; }

/* ---------- How it works ---------- */

/* The hero is pink now, so this section needs its own space above the heading. */
.how { padding-block: var(--section); }
.how__grid {
  display: grid;
  gap: 3.5rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 960px) {
  .how__grid { grid-template-columns: 1fr minmax(0, 440px); gap: 5rem; align-items: start; }
}

.steps { display: grid; gap: 2.25rem; counter-reset: none; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.steps__n {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--acid);
  min-width: 1ch;
}
.steps h3 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
  font-stretch: 105%;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.steps p { margin-top: 0.5rem; color: var(--text-2); max-width: 42ch; }

/* Demo deck */
.demo {
  display: grid;
  gap: 1.25rem;
}
.demo__title { font-size: 1rem; font-weight: 700; color: var(--text-2); }

.deck {
  position: relative;
  height: 300px;
  touch-action: pan-y;
}
.deck .bill {
  position: absolute;
  inset: 0 0 auto 0;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.deck .bill[data-depth="0"] { cursor: grab; }
.deck .bill[data-depth="0"]:active { cursor: grabbing; }
.deck .bill.is-dragging { transition: none; }

.deck__hint {
  position: absolute;
  top: 1rem;
  z-index: 3;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
}
.deck__hint--add { right: 1rem; background: var(--acid); color: var(--ink); }
.deck__hint--pass { left: 1rem; background: var(--ink); color: var(--paper); }

.deck__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  border: 2px dashed var(--line);
  border-radius: 16px;
  text-align: center;
  padding: 1.5rem;
  color: var(--text-2);
}

.demo__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.75rem; }

.pile {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1.25rem;
  border: 2px solid var(--line);
  border-radius: 16px;
}
.pile__head { display: flex; justify-content: space-between; align-items: baseline; }
.pile__label { font-weight: 800; }
.pile__count { color: var(--text-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

.pile__sum { display: grid; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.pile__sum > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-2); }
.pile__sum dd { color: var(--text); font-weight: 700; }
.pile__sum .pile__grand {
  align-items: baseline;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--line);
  color: var(--text);
  font-weight: 800;
}
.pile__grand dd {
  font-weight: 900;
  font-stretch: 110%;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--acid);
}
.pile__note { margin-top: -0.25rem; font-size: 0.875rem; color: var(--text-2); }
.pile__list { display: grid; gap: 0.5rem; }
.pile__empty { color: var(--text-2); font-size: 0.9375rem; }
.pile__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
@starting-style {
  .pile__item { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.pile__item small { font-weight: 500; color: #555; }
.pile__item .stamp { font-size: 1.15rem; top: 50%; left: 60%; background: rgba(255, 255, 255, 0.8); }

.pile__status { min-height: 1.5em; font-size: 0.9375rem; color: var(--text-2); }
.pile__status strong { color: var(--acid); }

/* ---------- Trust ---------- */

.trust {
  background: var(--pink);
  color: var(--ink);
  padding-block: var(--section);
}
.trust ::selection { background: var(--ink); color: var(--pink); }
.trust__hi { color: var(--paper); }
.trust__intro { margin-top: 1.25rem; font-size: 1.1875rem; font-weight: 600; max-width: 40ch; }

.flow { margin-top: clamp(2.5rem, 6vw, 4rem); }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow__node rect { fill: var(--ink); stroke: var(--ink); stroke-width: 3; }
.flow__node text {
  fill: var(--paper);
  font-family: var(--font);
  font-weight: 800;
  font-size: 26px;
  text-anchor: middle;
  letter-spacing: -0.5px;
}
.flow__node--acid rect { fill: var(--acid); stroke: var(--ink); }
.flow__node--acid text { fill: var(--ink); font-weight: 900; font-stretch: 125%; }
.flow__node--mid rect { fill: none; stroke: var(--ink); }
.flow__node--mid text { fill: var(--ink); }
.flow__tall .flow__node--mid text { font-size: 21px; }
.flow__node--no rect { stroke: var(--paper); stroke-dasharray: 8 8; fill: none; }
.flow__node--no text { fill: var(--paper); text-decoration: line-through; }
.flow__line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.flow__head { fill: var(--ink); }
.flow__line--no { stroke: var(--paper); stroke-dasharray: 2 12; }
.flow__x path { fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: round; }

.flow__tall { max-width: 420px; margin-inline: auto; }
.flow__tall .flow__node text { font-size: 22px; }
.flow__tall .flow__node--acid text { font-stretch: 100%; }
.flow__wide { display: none !important; }
@media (min-width: 640px) {
  .flow__tall { display: none !important; }
  .flow__wide { display: block !important; }
}

.pledges {
  position: relative;
  display: grid;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
/* Rules are pseudo-elements so they can draw in from the left. */
.pledges::before,
.pledges > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.3);
  transform-origin: left center;
}
.pledges::before { top: 0; }
.pledges > div::after { bottom: 0; }
.pledges > div {
  position: relative;
  display: grid;
  gap: 0.5rem 3rem;
  padding-block: 1.5rem;
}
@media (min-width: 800px) {
  .pledges > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; padding-block: 2rem; }
}
.pledges dt {
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.pledges dt { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pledges > div:hover dt { color: var(--paper); }
}
.pledges dd { color: var(--ink); max-width: 52ch; font-size: 1.0625rem; font-weight: 500; }

.trust__line {
  margin-top: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--paper);
  text-wrap: balance;
}

/* ---------- Counter ---------- */

.count {
  background: var(--acid);
  color: var(--ink);
  padding-block: clamp(4rem, 10vw, 8rem);
}
.count ::selection { background: var(--ink); color: var(--acid); }

.odo {
  display: flex;
  font-weight: 900;
  font-stretch: 125%;
  font-size: min(18vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.odo__d {
  display: inline-block;
  height: 0.82em;
  overflow: hidden;
}
.odo__strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.8s var(--ease-out);
}
.odo__strip span { height: 0.82em; display: block; }
.odo__sep { display: inline-block; width: 0.22em; }

.count__label {
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 0.75rem;
}
.count__demo {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.6rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-size: 1rem;
  max-width: 60ch;
}

/* ---------- Waitlist ---------- */

.join {
  display: grid;
  gap: 2.5rem;
  padding-block: var(--section);
}
@media (min-width: 960px) {
  .join { grid-template-columns: 1fr minmax(0, 520px); gap: 5rem; align-items: start; }
}
.join__intro p { margin-top: 1.25rem; color: var(--text-2); font-size: 1.1875rem; max-width: 36ch; }

.form { display: grid; gap: 1.25rem; }

.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.roles legend { padding: 0; margin-bottom: 0.6rem; font-weight: 700; }
.role { position: relative; cursor: pointer; }
.role input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.role span {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 0.75rem;
  border: 3px solid var(--line);
  border-radius: 14px;
  font-weight: 800;
  font-stretch: 105%;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.role:active span { transform: scale(0.97); }
.role--pink input:checked + span { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.role--acid input:checked + span { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.role input:focus-visible + span { outline: 3px solid var(--acid); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .role:hover input:not(:checked) + span { border-color: var(--text); }
}
.roles[aria-invalid="true"] .role span { border-color: var(--pink); }

.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 700; }
.field input,
.field select {
  width: 100%;
  min-height: 60px;
  padding: 0.75rem 1rem;
  background: var(--raise);
  color: var(--text);
  border: 3px solid var(--line);
  border-radius: 14px;
  font: inherit;
  font-size: 1.125rem;
  transition: border-color 160ms ease;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23E6FF00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
}
.field select option { background: var(--raise); color: var(--text); }
.field input:focus-visible,
.field select:focus-visible { outline: none; border-color: var(--acid); }
.field input[aria-invalid="true"] { border-color: var(--pink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__privacy { font-size: 0.875rem; color: var(--text-2); max-width: 60ch; }
.form__privacy a { color: var(--text); }

.form__error { min-height: 0; color: var(--pink); font-weight: 700; }
.form__error:empty { display: none; }

.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.done { outline: none; }
.done .bill { max-width: 460px; transform: rotate(-1.5deg); }
.done .bill__amt { font-size: clamp(2.4rem, 9vw, 3.5rem); text-decoration: none; }
.done .bill__meta { font-size: 1rem; color: #333; }
.done .bill__body { padding-bottom: 5.5rem; }
.done .stamp { top: auto; bottom: 0.9rem; left: auto; right: -0.6rem; font-size: clamp(2rem, 8vw, 2.75rem); transform-origin: center; }

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

.foot {
  display: grid;
  gap: 0.75rem;
  padding-block: 3rem 4rem;
  border-top: 2px solid var(--line);
}
.foot__demo {
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acid);
}
.foot__small { color: var(--text-2); font-size: 0.875rem; }

/* ---------- Confetti ---------- */

.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

/* ---------- Motion ----------
   One idea throughout: things come out from behind something. The wordmark
   letters slide from behind each other, words rise from behind their baseline,
   rules draw out from the left, and the diagram draws itself. */

/* Words rise from behind a mask that only clips their bottom edge. */
.w {
  display: inline-block;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
  clip-path: inset(-0.6em -0.4em 0 -0.4em);
}
.w > span { display: inline-block; }

@keyframes rise { from { transform: translateY(118%); } }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-48px) rotate(-7deg) scale(0.96); }
}

/* Hero, choreographed to follow the wordmark */
.hero__title .w > span { animation: rise 900ms var(--ease-expo) both; }
.hero__title .d1 { animation-delay: 420ms; }
.hero__title .d2 { animation-delay: 470ms; }
.hero__title .d3 { animation-delay: 520ms; }
.hero__title .d4 { animation-delay: 570ms; }
.hero__title .d5 { animation-delay: 660ms; }
.hero__title .d6 { animation-delay: 710ms; }
.hero__title .d7 { animation-delay: 760ms; }
.hero__title .d8 { animation-delay: 810ms; }
.hero__title .d9 { animation-delay: 860ms; }
.hero__lede { animation: settle 800ms var(--ease-expo) 980ms both; }
.hero__ctas { animation: settle 800ms var(--ease-expo) 1080ms both; }
/* backwards only, so the pointer tilt can take over the transform afterwards */
.hero__bill { animation: drop-in 1000ms var(--ease-expo) 900ms backwards; }
.hero__hint { animation: settle 600ms ease 1700ms both; }

/* Section headings: split into words by app.js, revealed on scroll */
.h2.split .w > span {
  transform: translateY(118%);
  transition: transform 900ms var(--ease-expo);
}
.h2.split.is-in .w > span { transform: none; }

/* Trust promises: rules draw, rows rise */
.pledges.reveal::before,
.pledges.reveal > div::after {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-expo);
}
.pledges.reveal > div {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 900ms var(--ease-expo);
}
.pledges.reveal.is-in::before,
.pledges.reveal.is-in > div::after { transform: none; }
.pledges.reveal.is-in > div { opacity: 1; transform: none; }
.pledges > div:nth-child(2) { transition-delay: 90ms; }
.pledges > div:nth-child(3) { transition-delay: 180ms; }
.pledges > div:nth-child(4) { transition-delay: 270ms; }
.pledges > div:nth-child(5) { transition-delay: 360ms; }
.pledges > div:nth-child(1)::after { transition-delay: 120ms; }
.pledges > div:nth-child(2)::after { transition-delay: 210ms; }
.pledges > div:nth-child(3)::after { transition-delay: 300ms; }
.pledges > div:nth-child(4)::after { transition-delay: 390ms; }
.pledges > div:nth-child(5)::after { transition-delay: 480ms; }

/* Trust diagram draws itself: bank, line, bill company, then the crossed-out path */
.flow.reveal .flow__node,
.flow.reveal .flow__line--no,
.flow.reveal .flow__head {
  opacity: 0;
  transition: opacity 500ms ease, transform 800ms var(--ease-expo);
}
.flow.reveal .flow__node {
  transform: translateY(14px);
  transform-box: fill-box;
}
.flow.reveal .flow__line:not(.flow__line--no) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms var(--ease-in-out);
}
.flow.reveal .flow__x {
  opacity: 0;
  transform: scale(1.9) rotate(-20deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 120ms ease 2100ms, transform 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 2100ms;
}
.flow.reveal.is-in .flow__node,
.flow.reveal.is-in .flow__line--no,
.flow.reveal.is-in .flow__head { opacity: 1; transform: none; }
.flow.reveal.is-in .flow__line { stroke-dashoffset: 0; }
.flow.reveal.is-in .flow__x { opacity: 1; transform: none; }
/* Order: you, line, partner, line, bill company, then the crossed-out path */
.flow.reveal .flow__line.flow__line--a { transition-delay: 200ms; }
.flow.reveal .flow__head--a { transition-delay: 800ms; }
.flow.reveal .flow__node--mid { transition-delay: 750ms; }
.flow.reveal .flow__line.flow__line--b { transition-delay: 1000ms; }
.flow.reveal .flow__head--b { transition-delay: 1600ms; }
.flow.reveal .flow__node--acid { transition-delay: 1550ms; }
.flow.reveal .flow__line--no { transition-delay: 1750ms; }
.flow.reveal .flow__node--no { transition-delay: 1850ms; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .bill, .odo__strip, .pile__item, .btn, .role span {
    transition-property: opacity, background-color, color, border-color, text-decoration-color !important;
  }
  .btn:active:not(:disabled), .role:active span { transform: none; }
}