/*
 * Whitelist page styles. Extracted from an inline <style> block so the markup
 * stays readable; it was 30KB of the page's 49KB.
 *
 * Served same-origin, which the CSP allows via style-src 'self'. Every url()
 * in here is a data: URI, so nothing depends on this file's location.
 */
:root {
  --paper: #f2efe4;
  --card: #fffef9;
  --ink: #26231e;
  --stone: #817a6e;
  --coral: #ff4b33;
  --coral-deep: #c92c14;
  --cobalt: #3f63f0;
  --cobalt-dark: #2b48c8;
  --gold: #ffb02e;
  --grid: rgba(38, 35, 30, .07);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1H0z' fill='%2326231e'/%3E%3Cpath d='M1 3h1v1h1v1h1v1h1v1h1v1h1v1H1z' fill='%23fffef9'/%3E%3C/svg%3E") 2 2, auto;
}
button, input, a {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='43' viewBox='0 0 12 13'%3E%3Cg fill='%2326231e'%3E%3Crect x='2' y='0' width='2' height='1'/%3E%3Crect x='1' y='1' width='1' height='5'/%3E%3Crect x='4' y='1' width='1' height='4'/%3E%3Crect x='5' y='4' width='4' height='1'/%3E%3Crect x='9' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='2' height='1'/%3E%3Crect x='11' y='6' width='1' height='3'/%3E%3Crect x='0' y='7' width='1' height='2'/%3E%3Crect x='1' y='9' width='1' height='1'/%3E%3Crect x='10' y='9' width='1' height='1'/%3E%3Crect x='2' y='10' width='1' height='1'/%3E%3Crect x='9' y='10' width='1' height='1'/%3E%3Crect x='2' y='11' width='8' height='1'/%3E%3C/g%3E%3Cg fill='%23fffef9'%3E%3Crect x='2' y='1' width='2' height='4'/%3E%3Crect x='2' y='5' width='7' height='1'/%3E%3Crect x='2' y='6' width='9' height='1'/%3E%3Crect x='1' y='7' width='10' height='2'/%3E%3Crect x='2' y='9' width='8' height='1'/%3E%3Crect x='3' y='10' width='6' height='1'/%3E%3C/g%3E%3C/svg%3E") 9 1, pointer;
}
button:disabled {
  cursor: not-allowed;
}
body {
  min-height: 100vh;
  /* Kept as a guard against sideways scroll from the rotated hero art. The
     full-bleed ticker that originally forced this is gone, and nothing
     currently overflows at any width, so this is belt and braces now.
     It does make body a scroll container, which stops plain #fragment links
     from scrolling, so whitelist.js drives the anchor clicks instead. */
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--paper);
  /* Tiled rather than a repeating gradient: at fractional device pixel
     ratios (Windows 125%/150%) a repeating gradient accumulates rounding
     error across the width, so the columns visibly drift. A background-size
     tile is positioned independently each repeat, keeping the grid even. */
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 4px solid var(--cobalt);
  outline-offset: 4px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.px { font-family: 'Press Start 2P', monospace; }
.display {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
.page-shell { position: relative; z-index: 2; }
.wrap {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 42px) 64px;
}

.top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 56px;
  height: 56px;
  display: block;
  image-rendering: pixelated;
  border: 3px solid var(--ink);
  background: var(--gold);
  box-shadow: 3px 3px 0 var(--ink);
}
.brand-copy { font-size: 14px; line-height: 1.6; letter-spacing: .04em; }
.brand-copy small {
  display: block;
  color: var(--stone);
  font: 700 11px/1.3 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .08em;
}
.spacer { flex: 1; }

/* ---- collapsing header ---- */
/* display:contents so the wrapper vanishes from layout above the breakpoint
   and nav, X and chain pill stay direct flex children of .top exactly as
   before. The spacer lives inside the group, which is what keeps the chain
   pill pinned right without the wrapper needing to know about it. */
.top-menu { display: contents; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .top { position: relative; justify-content: space-between; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 3px solid var(--ink);
    background: var(--gold);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 12px 14px;
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--ink);
  }
  .nav-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
  .nav-toggle-bars { display: grid; gap: 3px; }
  .nav-toggle-bars i { display: block; width: 16px; height: 3px; background: var(--ink); }
  /* the bars become an X once open, so the button states its own state */
  .nav-toggle[aria-expanded="true"] { background: var(--coral); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .top-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
  }
  .top-menu.open { display: flex; }
  .topnav { flex-direction: column; gap: 10px; }
  .topnav a, .nav-mint { justify-content: center; font-size: 10px; padding: 14px 13px 13px; }
  .top-menu .social-x { width: auto; height: auto; padding: 13px; justify-content: center; }
  /* the tooltip is a hover affordance and there is no hover here */
  .nav-tip { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle-bars i { transition: transform .16s ease, opacity .12s ease; }
}

/* ---- section nav ---- */
.topnav {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 13px 9px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, transform .08s, box-shadow .08s;
}
.topnav a.nav-apply { color: var(--ink); background: var(--gold); }
.topnav a.nav-apply:hover { background: var(--t-legend, #ffc45e); }
.topnav a.nav-spots { color: var(--card); background: var(--coral); }
.topnav a.nav-spots:hover { background: var(--coral-deep); }
.topnav a.nav-about { color: var(--card); background: var(--cobalt); }
.topnav a.nav-about:hover { background: var(--cobalt-dark); }
.topnav a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
/* mint is coming, but not yet: same chip, drained of colour and inert */
.nav-mint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px dashed var(--stone);
  background: transparent;
  padding: 10px 13px 9px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--stone);
  white-space: nowrap;
  cursor: not-allowed;
}
.nav-mint i { font-style: normal; font-size: 9px; }
.nav-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  padding: 8px 10px 7px;
  color: var(--card);
  background: var(--ink);
  border: 2px solid var(--ink);
  font-style: normal;
  font-size: 7px;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, transform .12s;
  z-index: 5;
}
.nav-mint:hover .nav-tip,
.nav-mint:focus-visible .nav-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .nav-tip { transition: none; } }
/* anchors land clear of the top edge */
.signup-section, .about, .spots { scroll-margin-top: 26px; }
/* ---- X ---- */
.social-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--card);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background .12s, transform .08s, box-shadow .08s;
}
.social-x:hover { background: var(--cobalt); }
.social-x:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
/* the footer sits on ink, so the X link inverts rather than using --ink */
.foot-x {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.foot-x:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.foot-x span { font-size: 12px; }

/* ---- scroll to top ---- */
/* visibility, not just opacity: opacity alone leaves the button in the tab
   order while it is invisible, so a keyboard user tabs onto nothing. */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s, background .12s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--coral); color: var(--card); }
.to-top:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.to-top:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (max-width: 620px) {
  .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* Moved out of the header and into the hero, so it needs its own top margin
   and has to stop being a flex child stretching to fill. */
.chain-pill {
  margin: 24px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--ink);
  padding: 9px 12px 8px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  /* Robinhood's signature green, used only as a chain signifier so it
     stays out of the coral/gold/cobalt palette everywhere else. */
  color: var(--ink);
  background: #c8f169;
  box-shadow: 3px 3px 0 var(--ink);
}
.chain-pill i {
  width: 7px;
  height: 7px;
  background: #1c7c2e;
  animation: blink 2.2s infinite;
}
@keyframes blink {
  0%, 92%, 100% { opacity: 1; }
  96% { opacity: .15; }
}

/* min-width:0 lets the column actually shrink. Grid items default to
   min-width:auto, which floors them at min-content, so without this the
   widest word in the headline sets a floor the viewport cannot go below. */
.hero-copy { min-width: 0; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 7vw, 88px);
  padding: clamp(26px, 4.4vw, 54px) 0 38px;
}
.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 9px 11px 8px;
  color: var(--paper);
  background: var(--coral);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 8px;
  letter-spacing: .1em;
  transform: rotate(-1.5deg);
}
h1 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(64px, 9vw, 112px);
  line-height: .84;
  letter-spacing: .035em;
  /* A grid item will not shrink below its content's minimum width, so an
     oversized headline widens the whole column and every paragraph in it
     inherits that width and gets clipped by the overflow-x guard on body.
     These two stop the headline from being able to force that. */
  overflow-wrap: break-word;
}
h1 span {
  display: block;
  color: var(--coral);
  text-shadow: 7px 7px 0 var(--ink);
  white-space: nowrap;
}
.lede {
  max-width: 560px;
  margin: 26px 0 0;
  color: #57534a;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  line-height: 1.7;
}
.lede b { color: var(--coral-deep); }
.microline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--stone);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .08em;
}
.microline::before {
  content: '';
  flex: 0 0 34px;
  height: 4px;
  background: var(--gold);
  border: 1px solid var(--ink);
}

.family-wall {
  position: relative;
  min-height: 500px;
}
.photo {
  position: absolute;
  width: clamp(150px, 18vw, 210px);
  padding: 9px 9px 25px;
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transition: opacity .18s, transform .2s;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--ink);
  image-rendering: pixelated;
}
.photo b {
  display: block;
  margin-top: 13px;
  text-align: center;
  font-size: 8px;
  letter-spacing: .08em;
}
.photo.swapping { opacity: .05; transform: scale(.8) rotate(0deg) !important; }
.photo:nth-child(1) { left: 1%; top: 3%; transform: rotate(-8deg); z-index: 2; }
.photo:nth-child(2) { right: 2%; top: 0; transform: rotate(7deg); z-index: 1; }
.photo:nth-child(3) { left: 7%; bottom: 0; transform: rotate(5deg); z-index: 3; }
.photo:nth-child(4) { right: 0; bottom: 3%; transform: rotate(-6deg); z-index: 4; }
.burst {
  position: absolute;
  left: 42%;
  top: 39%;
  width: 110px;
  aspect-ratio: 1;
  filter: drop-shadow(6px 6px 0 var(--ink));
  transform: rotate(10deg);
  z-index: 0;
}
.burst::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 20%, 83% 9%, 80% 33%, 100% 38%, 87% 57%, 100% 76%, 77% 76%, 72% 100%, 50% 84%, 28% 100%, 23% 76%, 0 76%, 13% 57%, 0 38%, 20% 33%, 17% 9%, 39% 20%);
}
.burst span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 8px;
  line-height: 1.7;
  transform: rotate(-10deg);
}

/* Section divider. Built from motifs already on the page: the dashed run
   picks up the receipt's dashed border, and the three squares are the
   signup card's titlebar lights, blinking on the same clock as the chain
   pill so the page has one heartbeat rather than three. */
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0;
}
.rule-line {
  flex: 1;
  height: 4px;
  /* Percentage stops, not pixels. A pixel period leaves a remainder on any
     width that is not a multiple of it, and that remainder renders as an ink
     sliver at the end of the line. 2.5% divides into 100 exactly 40 times,
     so the pattern always lands flush whatever the width. */
  background-image: repeating-linear-gradient(
    to right, var(--ink) 0 1.5%, transparent 1.5% 2.5%);
}
/* mirrored, so both runs start with a dash against the squares and fade
   outward rather than both marching the same way */
.rule-line:first-child {
  background-image: repeating-linear-gradient(
    to left, var(--ink) 0 1.5%, transparent 1.5% 2.5%);
}
.rule-dots { display: inline-flex; gap: 7px; }
.rule-dots i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  animation: blink 2.2s infinite;
}
.rule-dots i:nth-child(1) { background: var(--coral); }
.rule-dots i:nth-child(2) { background: var(--gold); animation-delay: .24s; }
.rule-dots i:nth-child(3) { background: var(--cobalt); animation-delay: .48s; }
/* A divider owns the whole gap it introduces. Leaving the next section's own
   top margin in place stacks two spacings, so the dashes sit closer to the
   block above than the one below and the rhythm drifts down the page. */
.rule + .about,
.rule + .fine-print { margin-top: 0; }
/* same idea, but this one opens its gap with padding rather than margin, so
   zeroing margin-top would have missed it and left it 110px adrift */
.rule + .signup-section { padding-top: 0; }

.signup-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  gap: clamp(28px, 7vw, 86px);
  align-items: start;
  padding: clamp(66px, 9vw, 110px) 0 60px;
}
.signup-copy h2 {
  margin: 0;
  font-size: clamp(48px, 7vw, 82px);
  line-height: .95;
  letter-spacing: .035em;
}
.signup-copy h2 em {
  display: block;
  color: var(--cobalt);
  font-style: normal;
}
.signup-copy p {
  max-width: 470px;
  margin: 20px 0 0;
  color: #57534a;
  font-weight: 700;
  line-height: 1.7;
}

/* ---- about ---- */
.about { margin: 74px 0 0; }
.about > h2 {
  margin: 0;
  font-size: clamp(44px, 6.4vw, 74px);
  line-height: .95;
  letter-spacing: .035em;
}
.about > h2 em { color: var(--coral-deep); font-style: normal; }
.about-lede {
  margin: 22px 0 0;
  color: #57534a;
  font-weight: 700;
  line-height: 1.75;
}
.about-lede + .about-lede { margin-top: 14px; }
.about-lede b { color: var(--ink); }
/* Sits between the lede and the cards, because the cards ARE the thread in
   short form. Same chip vocabulary as .spot-num so it reads as part of the
   page rather than a pasted-in social button. */
.thread-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 12px 15px 11px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .06em;
}
.thread-link span { font-size: 13px; }
.thread-link:hover { background: var(--card); }
.thread-link:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.about-card {
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px 20px 22px;
}
.about-card h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .09em;
  color: var(--cobalt);
}
.about-card p {
  margin: 0;
  color: #57534a;
  font-weight: 700;
  line-height: 1.7;
  font-size: 15px;
}
.about-card p + p { margin-top: 10px; }
.about-card b { color: var(--ink); }
/* the routes onto the list, numbered so the order reads as a hierarchy */
.spot-num {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 10px 7px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 10px;
  letter-spacing: .06em;
}
/* gold, cobalt, coral across the three routes, so the badges read as a run
   rather than three of the same chip */
.spots .about-card:nth-child(2) .spot-num { background: var(--cobalt); color: var(--card); }
.spots .about-card:nth-child(3) .spot-num { background: var(--coral); color: var(--card); }
@media (max-width: 560px) {
  .about { margin-top: 52px; }
  .about-card { box-shadow: 4px 4px 0 var(--ink); }
}
.step.optional i { color: var(--ink); background: var(--gold); }

.signup-card {
  position: relative;
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.signup-card::before {
  content: 'WHITELIST CLOSED';
  position: absolute;
  right: -25px;
  top: -17px;
  padding: 9px 11px 8px;
  color: var(--paper);
  background: var(--coral);
  border: 3px solid var(--ink);
  font: 8px/1.4 'Press Start 2P', monospace;
  letter-spacing: .06em;
  transform: rotate(3deg);
  z-index: 2;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 15px;
  color: var(--gold);
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
  font-size: 8px;
  letter-spacing: .1em;
}
.card-head i { width: 10px; height: 10px; border: 2px solid var(--paper); }
.card-head i:nth-child(1) { background: var(--coral); }
.card-head i:nth-child(2) { background: var(--cobalt); }
.card-head i:nth-child(3) { background: var(--gold); }
.card-head b { margin-left: auto; }
.card-body { padding: clamp(20px, 4vw, 32px); }
.field-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 9px;
  color: var(--stone);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: .08em;
}
/* Blue, not red. These are just labels, and a card full of red reads as a
   page full of errors. Only the required marker earns the alarm colour. */
.field-label span { color: var(--cobalt); }
.field-label span b { color: var(--coral-deep); font-weight: inherit; }
.wallet-button, .primary-button, .tweet-button {
  width: 100%;
  border: 3px solid var(--ink);
  padding: 18px 16px 16px;
  box-shadow: 5px 5px 0 var(--ink);
  font: 10px/1.5 'Press Start 2P', monospace;
  letter-spacing: .04em;
  transition: transform .08s, box-shadow .08s, filter .15s, background .15s;
}
.wallet-button { color: var(--ink); background: var(--gold); }
/* connected reads as a settled state: cool, outlined, with a live dot */
.wallet-button.connected {
  color: var(--card);
  background: var(--cobalt);
  box-shadow: 4px 4px 0 var(--ink);
}
.wallet-button.connected::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  background: var(--gold);
  vertical-align: middle;
  animation: blink 2.6s infinite;
}
.wallet-button.connected:hover { background: var(--cobalt-dark); }
.primary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--gold);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --hold-progress: 0;
}
.primary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--coral);
  transform: scaleX(var(--hold-progress));
  transform-origin: left center;
  pointer-events: none;
}
.primary-button > span { position: relative; z-index: 1; }
.primary-button.holding { box-shadow: 2px 2px 0 var(--ink); transform: translate(3px, 3px); }
.tweet-button { color: var(--card); background: var(--cobalt); }
.tweet-button.shared { background: var(--cobalt-dark); }
.wallet-button:hover, .primary-button:hover, .tweet-button:hover { filter: brightness(1.06); }
.wallet-button:active, .primary-button:active, .tweet-button:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--ink);
}
.primary-button:disabled {
  color: var(--stone);
  background: #d4cebd;
  filter: none;
  transform: none;
  box-shadow: 5px 5px 0 var(--ink);
}
.primary-button:disabled::before { display: none; }
/* the human check is usually invisible, so the hint carries the signal
   that something is actually happening */
.hold-hint.working { color: var(--cobalt-dark); animation: hintPulse 1.1s ease-in-out infinite; }
@keyframes hintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-hint.working { animation: none; }
}
.hold-hint {
  margin: 12px 2px 0;
  color: var(--stone);
  font-size: 7px;
  line-height: 1.7;
  letter-spacing: .06em;
  text-align: center;
}
.field { margin-top: 24px; }
.x-wrap { position: relative; }
.x-wrap::before {
  content: '@';
  position: absolute;
  left: 16px;
  top: 50%;
  color: var(--stone);
  font: 10px/1 'Press Start 2P', monospace;
  transform: translateY(-50%);
}
#xUsername {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px 13px 42px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  font: 800 16px/1.4 'Plus Jakarta Sans', sans-serif;
}
#xUsername::placeholder { color: #9b9487; opacity: 1; }

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

/* a readout, not a field: no box, no fill, so it never reads as an input */
/* connected wallets get a live dot so the state reads at a glance */
#turnstileSlot {
  margin: 0;
  overflow: hidden;
}
#turnstileSlot:not(:empty) { margin-top: 18px; }
#turnstileSlot.setup {
  display: grid;
  place-items: center;
  color: var(--stone);
  background: var(--paper);
  border: 2px dashed var(--stone);
  font: 7px/1.7 'Press Start 2P', monospace;
  text-align: center;
}
#signupStatus {
  min-height: 2.8em;
  margin: 14px 2px 0;
  color: var(--stone);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .03em;
}
/* An error at 8px in stone grey is invisible next to a full width button, so
   failures get promoted into a real notice with somewhere to click. Progress
   messages stay quiet: only .bad becomes a box. */
#signupStatus.bad {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 12px 12px 14px;
  font-size: 11px;
  line-height: 1.6;
  background: #fff1ee;
  border: 3px solid var(--coral-deep);
  box-shadow: 4px 4px 0 var(--ink);
}
#signupStatus.bad #signupStatusText { flex: 1; }
.status-dismiss {
  flex: none;
  padding: 2px 6px;
  border: 2px solid var(--coral-deep);
  background: transparent;
  color: var(--coral-deep);
  font-size: 11px;
  line-height: 1;
}
.status-dismiss:hover { background: var(--coral-deep); color: var(--card); }
#signupStatus.bad { color: var(--coral-deep); }
#signupStatus.good { color: var(--cobalt-dark); }
.or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 25px 0 15px;
  color: var(--stone);
  font-size: 7px;
  letter-spacing: .08em;
}
.or::before, .or::after { content: ''; height: 2px; background: #ded8c8; }
.signup-success {
  padding: clamp(34px, 7vw, 62px) clamp(22px, 6vw, 46px);
  text-align: center;
}
.signup-success .stamp {
  display: inline-block;
  padding: 12px 13px 10px;
  color: var(--paper);
  background: var(--coral);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 10px;
  transform: rotate(-4deg);
}
.signup-success h3 { margin: 28px 0 10px; font-size: clamp(38px, 7vw, 62px); line-height: .95; }
.signup-success h3 em { color: var(--coral-deep); font-style: normal; }
.signup-success p { color: #57534a; font-weight: 700; line-height: 1.7; }
.success-receipt {
  margin-top: 25px;
  margin-bottom: 22px; /* the X button was sitting flush against this */
  padding: 15px;
  color: var(--ink);
  background: #ffeccc;
  border: 2px dashed var(--ink);
  font-size: 8px;
  line-height: 2.2;
  overflow-wrap: anywhere;
}

/* ---- the closed state: the machine is off, the sign hangs over it ---- */
/* The form stays visible under the sign at reduced strength, an honest
   museum piece of what stood here. inert in the markup keeps it out of the
   tab order; pointer-events backs that up for anything older. */
.signup-card.is-closed .card-body {
  opacity: .32;
  filter: grayscale(.4);
  pointer-events: none;
}
.closed-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 40px);
}
.closed-panel {
  max-width: 430px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(26px, 5vw, 40px) clamp(20px, 4vw, 34px);
  transform: rotate(-2deg);
}
.closed-panel .stamp {
  display: inline-block;
  padding: 12px 13px 10px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 10px;
  transform: rotate(3deg);
}
.closed-panel h3 {
  margin: 24px 0 10px;
  font-size: clamp(36px, 6.5vw, 56px);
  line-height: .95;
}
.closed-panel h3 em { color: var(--coral-deep); font-style: normal; }
.closed-panel p { margin: 0; color: #57534a; font-weight: 700; line-height: 1.7; }
.closed-panel .thread-link { margin-top: 20px; }

/* ---- the checker, mounted in the panel window ---- */
.check-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.check-input {
  flex: 1;
  min-width: 0;
  padding: 13px 12px 12px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  border-radius: 0;
}
.check-input:focus-visible { outline: 4px solid var(--cobalt); outline-offset: 2px; }
.check-input::placeholder { color: #a29b89; }
.check-button {
  padding: 13px 18px 12px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
.check-button:hover { background: var(--card); }
.check-button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.check-button:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: 4px 4px 0 var(--ink); }
/* zero footprint until Turnstile actually draws a challenge in it */
#checkTurnstileSlot:not(:empty) { margin-top: 16px; }
/* the display override would otherwise beat the UA's [hidden] rule */
.check-result[hidden] { display: none; }
.check-result {
  display: inline-block;
  margin: 20px 0 0;
  padding: 12px 14px 10px;
  font-size: 11px;
  letter-spacing: .05em;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1deg);
}
/* on the list wears the same coral as ENTRY CONFIRMED; a no stays calm
   paper-and-ink (it is a fact, not an alarm); only a broken check goes red */
.check-result.good { background: var(--coral); color: var(--paper); }
.check-result.bad { background: var(--card); color: var(--ink); }
.check-result.err { background: var(--paper); color: var(--coral-deep); }
.check-note { margin: 12px 0 0; color: #57534a; font-weight: 700; font-size: 14px; line-height: 1.6; }
@media (max-width: 560px) {
  .closed-panel { transform: rotate(-1.2deg); box-shadow: 6px 6px 0 var(--ink); }
  .check-row { flex-direction: column; }
}

.fine-print {
  max-width: 890px;
  margin: 18px auto 0;
  padding: 25px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  text-align: center;
}
.fine-print h2 { margin: 0 0 12px; font-size: 10px; letter-spacing: .09em; }
.fine-print p { margin: 0; color: #5f5a51; font-size: 12px; font-weight: 700; line-height: 1.7; }
footer {
  position: relative;
  z-index: 2;
  padding: 24px 18px;
  color: var(--paper);
  background: var(--ink);
  text-align: center;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: .08em;
}
footer b { color: var(--gold); }

@media (max-width: 900px) {
  .hero, .signup-section { grid-template-columns: 1fr; }
  .hero { padding-top: 58px; }
  .hero-copy { text-align: center; }
  .lede { margin-inline: auto; }
  .microline { justify-content: center; }
  .family-wall { width: min(560px, 100%); min-height: 490px; margin: 0 auto; }
  .signup-copy { text-align: center; }
  .signup-copy p { margin-inline: auto; }
  .signup-card { width: min(620px, 100%); margin: 0 auto; }
}
@media (max-width: 580px) {
  .wrap { padding-inline: 14px; }
  .top { justify-content: center; }
  .spacer { display: none; }
  .chain-pill { font-size: 7px; }
  /* 23vw put FAMILY. at ~90px on a 390px phone, wider than the screen.
     17vw lands it near 66px, which fits with room to spare. */
  h1 { font-size: clamp(42px, 17vw, 96px); }
  h1 span { text-shadow: 5px 5px 0 var(--ink); }
  .family-wall { min-height: 390px; }
  .photo { width: 45%; padding: 6px 6px 18px; }
  .photo b { margin-top: 8px; font-size: 6px; }
  .burst { width: 80px; left: 39%; }
  .burst span { font-size: 6px; }
  .signup-card::before { right: -7px; top: -15px; font-size: 6px; }
  .signup-section { padding-top: 64px; }
  .wallet-button, .primary-button, .tweet-button { padding-inline: 10px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rule-dots i { animation: none; }
}

/* The one thing on this page that used to be a style="" attribute. Moved here
   so the CSP can keep style-src at 'self' with no 'unsafe-inline'. */
.noscript-note { padding: 20px; text-align: center; font-weight: 800; }