/* Copied from demo/shared.css — waitlist/brand.test.mjs fails CI if any value drifts. */
:root {
  --ink-900: #10201A;
  --ink-700: #2A3B33;
  --ink-500: #5A6862;
  --ink-300: #8C968F;
  --paper-bg: #EFE6D0;
  --paper-surface: #FBF6E9;
  --paper-band: #F2EAD6;
  --paper-rule: #E1D6B5;
  --forest-700: #0E3B2B;
  --forest-600: #14422D;
  --forest-500: #1C5A3F;
  --forest-300: #6E9A7E;
  --forest-100: #D9E6DE;
  --brass-100: #EBDCB8;
  --brass-500: #A0782A;
  --brass-400: #B8935A;
  --brass-300: #D9BF8A;
  --score-forest: var(--forest-700);
  --score-green: #2E6B3E;
  --score-amber: #B07E1E;
  --score-rose: #B5645B;
  --score-red: #9A2E2A;
  --score-green-bg: #E4EDDF;
  --seg-forest: var(--forest-700);
  --seg-green: #3B7A4C;
  --seg-amber: #B98422;
  --seg-rose: #C4837A;
  --seg-red: #9A2E2A;
  --band-great: var(--seg-forest);
  --band-good: var(--seg-green);
  --band-mixed: var(--seg-amber);
  --band-risky: var(--seg-rose);
  --band-poor: var(--seg-red);
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --card-radius: var(--r-lg);
  --card-gap: var(--s-4);
  --card-pad: 16px 18px 18px;
  --card-inset-x: 18px;
  --shadow-card: 0 1px 2px rgba(40,30,10,.04), 0 8px 22px -14px rgba(40,30,10,.18);
}

/* ---- Page ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-bg); color: var(--ink-900);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-10); }
.hero { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 380px; grid-template-rows: auto auto; column-gap: var(--s-10); row-gap: 0; align-items: start; padding-top: var(--s-8); }
  .hero .intro { grid-column: 1; grid-row: 1; align-self: end; }
  .hero .reel-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hero .points { grid-column: 1; grid-row: 2; }
}

.lockup { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-6); }
.lockup .mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--forest-700); flex-shrink: 0; }
.lockup .name { font-family: var(--serif); font-size: 36px; font-weight: 600; line-height: 1; color: var(--forest-600); letter-spacing: -0.01em; }

h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
@media (min-width: 900px) { h1 { font-size: 48px; } }
.lead { color: var(--ink-700); font-size: 16px; margin: var(--s-3) 0 var(--s-5); max-width: 34em; }

/* ---- Form: a card, per the app's card standard ---- */
.join { background: var(--paper-surface); border: 1px solid var(--paper-rule); border-radius: var(--card-radius); box-shadow: var(--shadow-card); padding: var(--card-pad); }
.join-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.join label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s-2); }
.join input[type=email] {
  flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink-900);
  background: #fff; border: 1px solid var(--paper-rule); border-radius: var(--r-md);
}
.join input[type=email]:focus-visible, .join button:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 2px; }
.join button {
  flex: 0 0 auto; height: 48px; padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  color: var(--paper-surface); background: var(--forest-700); border: 0; border-radius: var(--r-md);
}
.join button[disabled] { opacity: 0.6; cursor: progress; }
.join .promise { font-size: 12.5px; color: var(--ink-500); margin: var(--s-3) 0 0; }
.join .error { font-size: 13px; color: var(--score-red); margin: var(--s-2) 0 0; min-height: 0; }
.join .error:empty { display: none; }
#turnstile { margin-top: var(--s-3); min-height: 0; }
.done { display: none; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--forest-700); margin: 0; }
.join.is-done .done { display: block; }
.join.is-done form { display: none; }

/* ---- Promises ---- */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .points { margin-top: var(--s-5); } }
.points li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: var(--ink-500); }
.points li strong { color: var(--ink-900); font-weight: 600; }
.nowrap { white-space: nowrap; }
/* A small brass check in a soft brass disc, drawn in CSS so it stays on the tokens. */
.points li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--brass-100); }
.points li::after { content: ''; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid var(--brass-500); border-width: 0 2px 2px 0; transform: rotate(45deg); }

footer { margin-top: var(--s-10); font-size: 12.5px; color: var(--ink-500); max-width: 46em; }
footer p { margin: 0 0 var(--s-2); }
footer a { color: var(--forest-500); }