@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap");
:root {
  --green: #7aff01;
  --ink: #10110d;
  --paper: #f5f2e8;
  --white: #fffdf7;
  --muted: #53564a;
  --line: #c8c8b8;
  --display: "Barlow Condensed", "Impact", "Arial Narrow", sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
.fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
header,
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 5vw;
  padding: 23px 0;
  border-bottom: 2px solid var(--ink);
}
header a {
  font-family: var(--display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: var(--green);
  background: var(--ink);
  padding: 12px 16px;
  transform: rotate(-1deg);
}
header a span {
  display: block;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.9px;
  color: var(--paper);
  margin-top: 8px;
}
.status {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.status i {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--green);
  border: 1px solid var(--ink);
}
main {
  max-width: 1440px;
  margin: auto;
  padding: 0 5vw;
}
nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 26px 0 34px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--muted);
}
nav span {
  border-bottom: 2px solid var(--line);
  padding: 7px 12px;
}
nav .active {
  background: var(--green);
  border-color: var(--ink);
  color: var(--ink);
}
nav .active:before {
  content: "↗ ";
  font-family: var(--body);
}
.hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: center;
  gap: 5vw;
  padding: 12px 0 65px;
  min-height: 650px;
}
.campaign-visual {
  position: relative;
  min-width: 0;
}
.key-art {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--green);
}
.hero-art {
  transform: rotate(-2deg);
}
.wolf-wrap {
  display: grid;
  grid-template-columns: 74px 132px;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 25px;
  padding: 20px 0 0;
  position: relative;
}
.wolf-wrap:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 170px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) rotate(-9deg);
  background: var(--green);
  border: 2px solid var(--ink);
  z-index: -1;
}
.wolf {
  width: 74px;
  height: auto;
  color: var(--ink);
  filter: none;
}
.atm-image {
  display: block;
  width: 132px;
  height: auto;
  border: 3px solid var(--ink);
  transform: rotate(4deg);
  box-shadow: 5px 5px 0 var(--ink);
}
.wolf-label {
  grid-column: 1/-1;
  text-align: center;
  margin: 0 !important;
  font-size: 9px !important;
  letter-spacing: 1.3px !important;
}
.hero-copy {
  padding: 10px 0;
}
.micro {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.3px;
  line-height: 1.4;
  margin: 0 0 18px;
}
.hero-copy > .micro {
  display: inline-block;
  background: var(--green);
  padding: 6px 11px;
  transform: rotate(-1deg);
}
h1 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -1px;
  font-size: clamp(75px, 8.3vw, 122px);
  margin: 14px 0 28px;
  display: table;
  background: var(--ink);
  color: var(--green);
  padding: 5px 14px 14px;
  transform: rotate(-1deg);
}
.question {
  color: var(--green);
}
.lead {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.13;
  margin: 25px 0;
  text-transform: uppercase;
}
.body-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 490px;
  margin-bottom: 30px;
}
button {
  cursor: pointer;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: 0.4px;
  transition:
    background 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}
.primary {
  width: 100%;
  background: var(--green);
  color: var(--ink);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 24px;
  box-shadow: 5px 5px 0 var(--ink);
}
.primary:hover {
  background: var(--ink);
  color: var(--green);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--green);
}
.primary:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}
.primary span {
  font-family: var(--body);
  font-size: 19px;
}
.disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 26px 0 0;
}
.disclaimer strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}
.narrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 5vw;
  align-items: start;
  margin: 15px auto 75px;
  width: 100%;
  max-width: 1230px;
}
.page-content {
  min-width: 0;
}
.page-art {
  display: grid;
  gap: 40px;
  padding: 22px 7px 0;
  position: sticky;
  top: 25px;
}
.page-art .key-art:first-child {
  transform: rotate(-2deg);
}
.page-art .companion-art {
  transform: rotate(2deg);
  box-shadow: 8px 8px 0 var(--ink);
  border-color: var(--ink);
}
.narrow h1 {
  font-size: clamp(47px, 5.2vw, 75px);
  padding: 7px 12px 12px;
  white-space: normal;
}
.narrow .lead {
  font-size: 28px;
}
.back {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 0 0 4px;
  margin: 0 0 30px;
}
.back:hover {
  background: var(--green);
}
.terminal {
  border: 2px solid var(--ink);
  background: var(--white);
  margin: 25px 0;
  box-shadow: 7px 7px 0 var(--green);
}
.bar {
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 10px 18px;
}
.bar span {
  color: var(--green);
  font-size: 8px;
  letter-spacing: 4px;
  margin-right: 14px;
}
form {
  padding: 25px;
}
form > label {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
input:not([type="checkbox"]) {
  width: 100%;
  border: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  padding: 13px 14px;
  margin-bottom: 22px;
  min-height: 49px;
}
input::placeholder {
  color: #6a6c62;
}
input:not([type="checkbox"]):focus {
  background: #eeffd9;
}
.form-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
}
form .check {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.check input {
  accent-color: var(--ink);
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin: 2px 0 0;
}
form .primary {
  font-size: 21px;
  padding: 17px 19px;
}
.pin-terminal {
  background: var(--green);
  box-shadow: 7px 7px 0 var(--ink);
}
.pin-content {
  text-align: center;
  padding: 26px 20px 22px;
}
.pin-content .micro {
  margin-bottom: 12px;
}
.pin {
  font-family: var(--display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-size: clamp(78px, 8vw, 118px);
  letter-spacing: 12px;
  margin: 16px 0 25px;
  color: var(--ink);
  text-shadow: none;
}
.secondary {
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--green);
  padding: 13px 26px;
  font-size: 20px;
}
.secondary:hover {
  background: var(--paper);
  color: var(--ink);
}
#confirmation-message {
  font-size: 12px;
  line-height: 1.6;
  margin: 18px 0 0;
  min-height: 20px;
}
.instructions {
  margin: 35px 0;
}
.instructions .micro {
  font-size: 14px;
  margin-bottom: 10px;
}
h2 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.4px;
  margin: 10px 0 20px;
}
.instructions p {
  font-size: 15px;
  line-height: 1.65;
}
.location-note {
  font-size: 12px !important;
  color: var(--muted);
}
.warning {
  border: 2px solid var(--ink);
  padding: 22px;
  background: var(--white);
  margin: 0 0 32px;
  position: relative;
}
.warning:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: var(--green);
}
.warning strong {
  font-family: var(--display);
  font-weight: 800;
  display: block;
  font-size: 23px;
  line-height: 1.1;
  margin: 5px 0 12px;
}
.warning p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}
footer {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 23px 0 30px;
}
.cursor {
  color: var(--ink);
}
@media (min-width: 1600px) {
  header,
  footer {
    max-width: 1296px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 900px) {
  main {
    padding: 0 6vw;
  }
  .hero {
    gap: 4vw;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  h1 {
    font-size: 78px;
  }
  .lead {
    font-size: 28px;
  }
  .micro {
    font-size: 13px;
  }
  .body-copy {
    font-size: 15px;
  }
  .narrow {
    gap: 4vw;
  }
  .narrow h1 {
    font-size: 52px;
  }
  form {
    padding: 20px;
  }
  .page-art {
    gap: 32px;
  }
  .primary {
    font-size: 21px;
    padding: 17px 19px;
  }
}
@media (max-width: 650px) {
  header {
    margin: 0 6vw;
    padding: 20px 0;
    gap: 12px;
  }
  header a {
    font-size: 23px;
    padding: 10px 12px;
  }
  header a span {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .status {
    font-size: 12px;
    max-width: 110px;
    line-height: 1.2;
  }
  nav {
    gap: 5px;
    padding: 20px 0 25px;
    font-size: 13px;
    letter-spacing: 0.3px;
  }
  nav span {
    padding: 5px 7px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: 45px;
  }
  .hero-copy {
    grid-row: 1;
    padding: 0;
  }
  .hero h1 {
    font-size: clamp(70px, 20vw, 110px);
    margin: 12px 0 20px;
  }
  .hero-copy .lead {
    font-size: 30px;
    margin: 20px 0;
  }
  .body-copy {
    font-size: 16px;
    max-width: none;
  }
  .campaign-visual {
    margin-top: 12px;
    padding: 0 5px;
  }
  .wolf-wrap {
    grid-template-columns: 65px 114px;
    margin-top: 22px;
    padding-top: 12px;
    gap: 24px;
  }
  .wolf {
    width: 65px;
  }
  .atm-image {
    width: 114px;
  }
  .wolf-wrap:before {
    height: 140px;
    width: 190px;
    bottom: 30px;
  }
  .hero-copy > .micro {
    font-size: 13px;
  }
  .narrow {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 5px 0 45px;
  }
  .page-content {
    width: 100%;
    order: 0;
  }
  .page-art {
    position: static;
    order: 1;
    width: 100%;
    padding: 0 5px;
    gap: 25px;
  }
  .page-art .companion-art {
    display: none;
  }
  .narrow h1 {
    font-size: clamp(42px, 12vw, 68px);
    margin: 12px 0 20px;
  }
  .narrow .lead {
    font-size: 27px;
  }
  .back {
    margin-bottom: 24px;
  }
  form {
    padding: 22px;
  }
  .pin {
    font-size: 100px;
    letter-spacing: 9px;
  }
  .pin-content {
    padding: 25px 16px;
  }
  .warning {
    padding: 22px 18px;
  }
  h2 {
    font-size: 38px;
  }
  footer {
    margin: 0 6vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    padding: 20px 0;
  }
  .key-art {
    box-shadow: 5px 5px 0 var(--green);
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

.wolf-wrap {
  isolation: isolate;
}

/* ATM-led homepage and single vertical signup poster. */
.atm-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
  padding: 65px 0 0;
}
.atm-hero .atm-image {
  width: min(100%, 360px);
  height: auto;
  max-height: 600px;
  object-fit: contain;
  transform: none;
  border: 0;
  box-shadow: none;
}
.atm-headline {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.atm-headline .micro {
  display: table;
  background: var(--green);
  padding: 6px 11px;
  transform: rotate(-1deg);
  margin-bottom: 12px;
}
.atm-headline h1 {
  font-size: clamp(78px, 8vw, 118px);
  margin: 0;
  transform: rotate(-3deg);
}
.signup-poster {
  padding-top: 8px;
  position: sticky;
  top: 20px;
}
.signup-poster .vertical-poster {
  width: 100%;
  height: auto;
  max-height: 830px;
  object-fit: contain;
  box-shadow: 8px 8px 0 var(--green);
  transform: rotate(-1deg);
}
@media (max-width: 650px) {
  .hero-copy {
    grid-row: auto;
  }
  .atm-hero {
    grid-row: 1;
    min-height: 0;
    padding: 70px 0 0;
    margin-top: 10px;
  }
  .atm-hero .atm-image {
    width: min(85%, 310px);
    max-height: 490px;
  }
  .atm-headline h1 {
    font-size: clamp(74px, 20vw, 100px);
  }
  .atm-headline .micro {
    font-size: 12px;
  }
  .signup-poster {
    position: static;
    align-self: center;
    max-width: 400px;
    padding: 0 5px;
  }
  .signup-poster .vertical-poster {
    max-height: none;
  }
}

/* Full-image location clue, with editable copy above the photo. */
.clue-art {
  gap: 20px;
  padding-top: 0;
}
.clue-copy h2 {
  display: table;
  font-size: clamp(30px, 3.5vw, 47px);
  background: var(--ink);
  color: var(--green);
  padding: 8px 12px 12px;
  transform: rotate(-2deg);
  margin: 0 0 14px;
}
.clue-copy p {
  display: table;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 1.3px;
  font-weight: 800;
  background: var(--green);
  padding: 4px 10px;
  margin: 0;
}
.location-image {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--green);
}
@media (max-width: 650px) {
  .clue-art {
    order: 1;
    gap: 18px;
  }
  .clue-copy h2 {
    font-size: 36px;
  }
  .clue-copy p {
    font-size: 18px;
  }
  .location-image {
    box-shadow: 5px 5px 0 var(--green);
  }
}

/* Shared, full-width key-art header. */
header.film-header {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--ink);
}
header.film-header a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  transform: none;
  line-height: 0;
}
header.film-header img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20/3;
  object-fit: contain;
}
header.film-header a:focus-visible {
  outline-offset: -5px;
}
.signup-poster {
  padding-top: 48px;
}
@media (max-width: 650px) {
  .signup-poster {
    padding-top: 16px;
  }
}

/* PIN-first result flow: semantic order also matches the mobile layout. */
#result > .result-art {
  grid-column: 1;
  grid-row: 1 / span 5;
}
#result > #greeting {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}
#result > .pin-terminal {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
#result > .instructions {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
}
#result > .warning {
  grid-column: 2;
  grid-row: 4;
  margin: 0;
}
#result > #restart {
  grid-column: 2;
  grid-row: 5;
  justify-self: start;
}
#result {
  row-gap: 25px;
}
@media (max-width: 650px) {
  #result {
    gap: 0;
  }
  #result > * {
    order: 0;
  }
  #result > #greeting {
    margin: 0 0 25px;
  }
  #result > .pin-terminal {
    margin: 0 0 35px;
  }
  #result > .result-art {
    position: static;
    margin: 0 0 35px;
    width: 100%;
  }
  #result > .instructions {
    margin: 0 0 25px;
  }
  #result > .warning {
    margin: 0 0 32px;
  }
}

/* Match the mobile PIN box to the photo's inset and width. */
@media (max-width: 650px) {
  #result > .pin-terminal {
    width: calc(100% - 10px);
    align-self: center;
    box-shadow: 5px 5px 0 var(--ink);
  }
}

/* Branded legal holding view and inline terms link. */
.check a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.check a:hover {
  background: var(--green);
}
.terms-view {
  max-width: 850px;
  margin: 15px auto 75px;
  padding: 0 0 20px;
}
.terms-view h1 {
  font-size: clamp(48px, 7vw, 85px);
}
.terms-status {
  display: table;
  padding: 6px 11px;
  background: var(--green);
}
.terms-copy {
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--green);
  padding: 30px;
  margin-top: 30px;
}
.terms-copy h2 {
  font-size: 30px;
  line-height: 1.15;
}
.terms-copy p {
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 650px) {
  .terms-view {
    margin: 5px 0 45px;
  }
  .terms-copy {
    padding: 22px;
  }
  .terms-copy h2 {
    font-size: 26px;
  }
}

/* Three campaign states and their review navigation. */
.review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.6px;
}
.review-bar a {
  color: var(--ink);
  text-underline-offset: 4px;
}
.review-bar span {
  background: var(--green);
  padding: 4px 9px;
}
.review-view {
  padding: 38px 0 70px;
}
.review-view > .micro {
  margin-bottom: 16px;
}
.review-view h1 {
  font-size: clamp(48px, 6vw, 84px);
  margin: 0 0 22px;
}
.review-intro {
  color: var(--muted);
  margin: 0 0 38px;
}
.state-group {
  border-top: 2px solid var(--ink);
  padding: 22px 0 34px;
}
.state-group > h2 {
  font-size: clamp(25px, 3vw, 36px);
  margin: 0 0 22px;
  letter-spacing: 0.5px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.review-card {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.review-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--green);
}
.card-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper);
  padding: 18px;
  isolation: isolate;
}
.card-tag {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  display: table;
  background: var(--green);
  padding: 3px 7px;
}
.card-preview > p {
  position: relative;
  z-index: 1;
  display: table;
  font-family: var(--display);
  font-size: clamp(25px, 3.1vw, 43px);
  line-height: 0.97;
  font-weight: 900;
  letter-spacing: -0.4px;
  background: var(--ink);
  color: var(--green);
  padding: 6px 9px 10px;
  margin: 20px 0 0;
  transform: rotate(-2deg);
}
.card-preview > img {
  position: absolute;
  right: 5px;
  bottom: -25px;
  width: 38%;
  height: 85%;
  object-fit: contain;
  z-index: 0;
}
.card-caption {
  border-top: 2px solid var(--ink);
  padding: 14px 16px;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-caption strong {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.15;
}
.card-caption > span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.card-signup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 12px;
}
.card-signup .card-tag {
  width: 100%;
}
.card-signup > p {
  width: 47%;
  font-size: clamp(28px, 3vw, 42px);
}
.mini-form {
  margin-top: 20px;
  flex: 1;
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 10px;
}
.mini-form span {
  display: block;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
}
.mini-form i {
  display: block;
  border: 1px solid var(--ink);
  height: 16px;
  margin: 3px 0 8px;
  background: var(--paper);
}
.card-pin > b {
  display: table;
  margin-top: 15px;
  background: var(--green);
  padding: 0 12px;
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 6px;
}
.mini-clue {
  position: relative;
  display: table;
  margin-top: 15px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  background: var(--green);
  padding: 5px 8px;
}
.card-post {
  background: var(--green);
}
.card-post .card-tag,
.card-post .mini-clue {
  background: var(--white);
}
.holding-view {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 5vw;
  padding: 35px 0 65px;
  min-height: 650px;
}
.holding-copy {
  min-width: 0;
}
.holding-tag {
  display: table;
  background: var(--green);
  padding: 6px 11px;
  transform: rotate(-1deg);
}
.holding-copy h1 {
  font-size: clamp(46px, 6.5vw, 92px);
  line-height: 0.99;
  margin: 24px 0 32px;
  padding: 12px 15px 18px;
  max-width: 100%;
}
.holding-body {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  max-width: 630px;
  margin: 0 0 24px;
}
.holding-body .instagram-link {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.holding-art {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.pre-art:before {
  content: "";
  position: absolute;
  inset: 20% -4% 3% 0;
  background: var(--green);
  transform: rotate(4deg);
  z-index: -1;
}
.pre-art > img {
  display: block;
  width: 90%;
  max-height: 640px;
  object-fit: contain;
  margin: 0 auto;
}
.holding-stamp {
  position: absolute;
  right: -4%;
  top: 8%;
  z-index: 2;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.05;
  background: var(--ink);
  color: var(--green);
  padding: 12px 17px;
  transform: rotate(7deg);
}
.post-art > img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(2deg);
  border: 3px solid var(--ink);
  box-shadow: 9px 9px 0 var(--green);
}
.ticket-button {
  max-width: 500px;
  margin-top: 32px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
}
@media (max-width: 1000px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-preview > p {
    font-size: clamp(29px, 4.5vw, 43px);
  }
  .holding-view {
    gap: 4vw;
  }
  .holding-copy h1 {
    font-size: clamp(43px, 6vw, 70px);
  }
}
@media (max-width: 650px) {
  .review-bar {
    font-size: 12px;
    gap: 12px;
    align-items: flex-start;
  }
  .review-bar span {
    text-align: right;
  }
  .review-view {
    padding-top: 28px;
  }
  .review-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .card-preview {
    aspect-ratio: 4/3;
    max-height: 300px;
  }
  .card-preview > p {
    font-size: clamp(36px, 10vw, 52px);
  }
  .card-caption {
    min-height: 0;
  }
  .card-signup > p {
    font-size: 45px;
  }
  .mini-form {
    padding: 14px;
  }
  .mini-form span {
    font-size: 12px;
  }
  .mini-form i {
    height: 22px;
  }
  .holding-view {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 28px 0 50px;
    min-height: 0;
  }
  .holding-copy h1 {
    font-size: clamp(38px, 10.8vw, 66px);
    padding: 10px 11px 15px;
    letter-spacing: -0.5px;
  }
  .holding-body {
    font-size: 24px;
  }
  .holding-art {
    width: 85%;
    max-width: 400px;
    margin: auto;
  }
  .pre-art > img {
    max-height: 470px;
  }
  .holding-stamp {
    font-size: 24px;
  }
  .ticket-button {
    font-size: 23px;
  }
  .post-art {
    width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .review-card {
    transition: none;
  }
}

/* M6: the next heist, with the animated getaway over the green panel. */
.end-day-art {
  min-height: 510px;
  overflow: visible;
}
.end-day-green {
  position: absolute;
  inset: 19% -3% 9% 0;
  background: var(--green);
  transform: rotate(4deg);
  z-index: -1;
}
.end-day-art .heist-gif {
  position: absolute;
  top: 14%;
  left: -9%;
  width: 116%;
  height: auto;
  display: block;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-3deg);
  z-index: 1;
}
.end-day-art .heist-atm {
  position: absolute;
  bottom: 0;
  right: -2%;
  width: 50%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(8px 10px 0 rgba(16, 17, 13, 0.18));
}
.card-end-day > p {
  z-index: 2;
}
.card-end-day > .card-heist-gif {
  width: 68%;
  height: 48%;
  right: -5%;
  bottom: 0;
  object-fit: cover;
  transform: rotate(-3deg);
  border: 2px solid var(--ink);
  z-index: 0;
}
.card-end-day > .card-heist-atm {
  width: 22%;
  height: 56%;
  right: 5px;
  bottom: -12px;
  z-index: 1;
}
@media (max-width: 1000px) {
  .end-day-art {
    min-height: 420px;
  }
}
@media (max-width: 650px) {
  .end-day-art {
    width: 88%;
    min-height: clamp(300px, 95vw, 440px);
    margin: 5px auto 0;
  }
  .end-day-art .heist-gif {
    top: 12%;
    left: -7%;
    width: 112%;
    box-shadow: 5px 5px 0 var(--ink);
  }
  .end-day-art .heist-atm {
    width: 52%;
    right: 0;
    bottom: 0;
    max-height: 300px;
  }
  .end-day-green {
    inset: 17% -2% 10% 0;
  }
}

/* M2's new two-line headline retains the black-and-green ATM overlay. */
.atm-headline #hero-title {
  font-size: clamp(54px, 6.6vw, 96px);
  line-height: 0.96;
}
.atm-hero {
  padding-top: 105px;
}
@media (max-width: 650px) {
  .atm-headline #hero-title {
    font-size: clamp(52px, 16vw, 76px);
  }
  .atm-hero {
    padding-top: 100px;
  }
}

/* Updated ATM artwork and M4 urgency treatment. */
.atm-hero .atm-image {
  width: min(100%, 460px);
  max-height: 600px;
}
.pre-art > img {
  width: 100%;
}
#result > .urgency-art {
  position: sticky;
  top: 30px;
  align-content: center;
  gap: 22px;
  min-height: 390px;
  padding: 30px 5px;
}
.urgency-art h1 {
  font-size: clamp(80px, 9vw, 135px);
  line-height: 0.94;
  padding: 10px 16px 20px;
  margin: 0;
  justify-self: start;
}
.urgency-subhead {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(31px, 4vw, 54px);
  line-height: 1.04;
  background: var(--green);
  padding: 10px 14px;
  margin: 0;
  justify-self: start;
  transform: rotate(1deg);
}
.legal-draft h2 {
  font-size: 26px;
  margin: 32px 0 12px;
}
.legal-draft h2:first-child {
  margin-top: 0;
}
.legal-draft p,
.legal-steps {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.legal-steps {
  padding-left: 24px;
}
.legal-steps li {
  padding-left: 5px;
  margin: 12px 0;
}
.legal-checkbox-reference {
  border-top: 2px solid var(--line);
  margin-top: 35px;
  padding-top: 8px;
}
.terms-view #terms-title {
  font-size: clamp(40px, 5.5vw, 72px);
}
@media (max-width: 650px) {
  .atm-hero .atm-image {
    width: min(100%, 360px);
    max-height: 490px;
  }
  #result > .urgency-art {
    order: -1;
    position: static;
    min-height: 0;
    margin: 0 0 32px;
    padding: 12px 5px;
    gap: 18px;
  }
  .urgency-art h1 {
    font-size: clamp(78px, 24vw, 115px);
  }
  .urgency-subhead {
    font-size: clamp(31px, 8.5vw, 43px);
  }
  .legal-draft h2 {
    font-size: 24px;
  }
  .legal-draft p,
  .legal-steps {
    font-size: 14px;
  }
  .terms-view #terms-title {
    font-size: clamp(34px, 8.5vw, 52px);
  }
}

/* M4: animated Pack footage beneath the urgency headline. */
.urgency-art .urgency-gif {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--green);
  margin-top: 5px;
}
@media (max-width: 650px) {
  .urgency-art .urgency-gif {
    box-shadow: 5px 5px 0 var(--green);
  }
}

/* M1 contrast and stronger M4 prize disclaimer. */
#pre-campaign .pre-art:before {
  background: #000;
}
#result .warning strong {
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.02;
  font-weight: 900;
  margin-bottom: 16px;
}

/* M4 mobile: saved PIN, next move, GIF block, then prize disclaimer. */
@media (max-width: 650px) {
  #result > .urgency-art {
    order: 0;
  }
}

/* Approved M2 cast-and-ATM artwork includes the campaign headline. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.teaser-hero {
  display: block;
  position: relative;
  min-width: 0;
  padding: 0;
}
.teaser-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.card-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.card-teaser .card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
}
.card-teaser > img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 100%;
}
@media (max-width: 650px) {
  .teaser-hero {
    grid-row: 1;
    margin-top: 0;
    padding: 0;
  }
}

/* API integration: email confirmation, verification and accessible feedback. */
.confirmation-terminal #result-title {
  font-family: var(--display);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.05;
  margin: 0 0 18px;
}
.confirmation-terminal .pin-content > p {
  font-size: 15px;
  line-height: 1.6;
  margin: 15px 0 0;
}
.form-status:empty {
  display: none;
}
.form-status {
  font-size: 14px;
  line-height: 1.5;
  margin: 18px 0;
}
.form-status.is-error {
  padding: 12px;
  border-left: 4px solid #8c2424;
  background: #fff0eb;
  color: #6c1e1e;
}
.field-error {
  display: block;
  color: #7b1c1c;
  font-size: 13px;
  margin: -12px 0 20px;
}
.check + .field-error {
  margin: 8px 0 20px;
}
input[aria-invalid="true"] {
  border-color: #8c2424 !important;
}
#turnstile-container {
  margin: 20px 0;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}
.resend-panel {
  max-width: 650px;
  margin: 0 auto 55px;
  padding: 24px;
  border: 2px solid var(--ink);
  background: var(--white);
}
.resend-panel summary {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  cursor: pointer;
}
.resend-panel form {
  padding: 15px 0 0;
}
.resend-panel form > label {
  display: block;
}
.resend-panel p {
  font-size: 14px;
}
.noscript-note {
  padding: 20px;
  background: var(--green);
  font-weight: 700;
}
.card-pin > .email-mark {
  font-size: 40px;
  letter-spacing: 0;
}
.form-note a {
  color: inherit;
  text-underline-offset: 3px;
}
@media (max-width: 650px) {
  .resend-panel {
    padding: 20px;
    margin-bottom: 40px;
  }
  .confirmation-terminal #result-title {
    font-size: 36px;
  }
}

/* Pin/email guidance formerly styled by the demo's copy control. */
#pin-note {
  font-size: 12px;
  line-height: 1.6;
}

/* Ordinary page links retain the existing button styling. */
a.primary {
  display: block;
  text-decoration: none;
  text-align: center;
}
a.back {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
footer {
  flex-wrap: wrap;
}
footer .legal-links {
  width: 100%;
  padding: 0;
  gap: 20px;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0;
}
footer .legal-links a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Consent is required before the signup button becomes available. */
#signup-form:not([aria-busy="true"]) #submit-button:disabled {
  cursor: not-allowed;
}