/* Same look as the storefront's default (dark + neon) theme. Values are copied from
   styles/globals.css and styles/store.css in the main app; keep them in step by hand. */

@font-face { font-family: "Oswald"; src: url("/fonts/oswald-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: #020202;
  --surface: #090909;
  --border: #262626;
  --text: #e7ecf3;
  --text-2: #a7b1c0;
  --text-3: #78828f;
  --accent-fill: #2456e6;
  --accent-fill-hover: #1b45c4;
  --accent-fill-active: #163a9e;
  --focus: #6f8cba;
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0.32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Near-black field with a faint blue glow in the top corners. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 780px at 12% 3%, rgba(66, 120, 255, 0.12) 0%, transparent 50%),
    radial-gradient(1000px 780px at 88% 3%, rgba(66, 120, 255, 0.12) 0%, transparent 50%),
    radial-gradient(150% 130% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  background-attachment: fixed;
}
/* Fine grain on the field, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.gate {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.card {
  width: 100%;
  max-width: 480px;
  padding: clamp(28px, 7vw, 44px);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

.heading {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
  outline: none;
}

.lead {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}
@media (min-width: 1024px) { .lead { font-size: 17px; } }

/* Yes sizes to its label so it stays on one line beside No on a desktop card; on a
   phone the two wrap into full-width rows. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.actions .btn-primary { flex: 1 1 auto; }
.actions .btn-secondary { flex: 1 1 96px; }
.actions--single { justify-content: center; }
.actions--single .btn-secondary { flex: 0 1 auto; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease),
    transform 120ms var(--ease), opacity 120ms var(--ease);
}
.btn:active { transform: scale(0.97); opacity: 0.85; }

.btn-primary {
  background: var(--accent-fill);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -12px rgba(36, 86, 230, 0.7);
}
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-primary:active { background: var(--accent-fill-active); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text-3);
}
.btn-secondary:hover { border-color: var(--text); background: rgba(231, 236, 243, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}