@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('/assets/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('/assets/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-display: swap;
  src: url('/assets/poppins-700.woff2') format('woff2');
}

:root {
  --black: #050505;
  --ink: #2d2d2a;
  --cream: #eae6dd;
  --soft-white: #f7f7f5;
  --white: #fff;
  --teal: #7db8b8;
  --teal-dark: #489a9c;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  padding: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 30rem;
  background: var(--white);
  border-radius: 18px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: var(--shadow);
}

.logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.5rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
}

p {
  margin: 0.5rem 0;
}

label {
  display: block;
  margin: 1.25rem 0 0.35rem;
  font-weight: 500;
}

input[type='email'],
input[type='text'] {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--soft-white);
  border: 1px solid #cfcbc2;
  border-radius: 10px;
}

input[type='email']:focus,
input[type='text']:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal-dark);
}

.hint {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b6a64;
}

/* a#discord-open is a link, not a button: it navigates to the server the buyer has
   just joined. It carries the primary button's look so the one thing left to do on
   that page looks like the one thing to press. */
button,
a#discord-open {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  font: inherit;
  font-weight: 500;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

a#discord-open {
  text-decoration: none;
  box-sizing: border-box;
}

button:hover,
button:focus-visible,
a#discord-open:hover,
a#discord-open:focus-visible {
  transform: translateY(-2px);
}

/* The second action on /access: same target size, visibly not the primary one. */
button.secondary {
  margin-top: 0.75rem;
  color: var(--black);
  background: transparent;
  border-color: #cfcbc2;
}

button.secondary:hover,
button.secondary:focus-visible {
  border-color: var(--black);
}

/* The address a Discord link was sent to: shown, not editable. */
.readonly-field {
  padding: 0.75rem 0.85rem;
  background: var(--soft-white);
  border: 1px solid #cfcbc2;
  border-radius: 10px;
  word-break: break-all;
}

.cf-turnstile {
  margin-top: 1rem;
}

ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

#product-list li {
  margin: 0.6rem 0;
}

/* Download links look like the primary button, with a download icon. */
#product-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--black);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s ease;
}

#product-list a svg {
  flex: none;
}

#product-list a:hover,
#product-list a:focus-visible {
  transform: translateY(-2px);
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
}

/* The Discord box is collapsed by default; the summary line is the toggle. */
#discord-box {
  margin-top: 1.5rem;
  border-top: 1px solid #e3dfd6;
  padding-top: 1rem;
}

#discord-box summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--black);
}

#discord-box summary::-webkit-details-marker {
  display: none;
}

#discord-box summary::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

#discord-box[open] summary::after {
  transform: rotate(-135deg);
}

#status {
  margin-top: 1rem;
  color: #6b6a64;
  min-height: 1.2em;
}

/* The Discord profile-card crop: which of the two names we need. The caption is live
   text under it, so the point survives a blocked image. */
.handle-example {
  margin: 0.75rem 0 0;
}

.handle-example img {
  display: block;
  width: 236px;
  max-width: 100%;
  height: auto;
  border: 1px solid #e3dfd6;
  border-radius: 10px;
}

.handle-example figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #6b6a64;
}