@import url("brand/design-tokens.css");
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --fw-ink: #F8F5EC;
  --fw-paper: #111427;
  --fw-surface: #222640;
  --fw-muted: #C2C3D2;
  --fw-border: #777B95;
  --fw-accent: #FFB5A0;
  --bg: var(--fw-paper);
  --ink: var(--fw-ink);
  --muted: var(--fw-muted);
  --paper: var(--fw-surface);
  --line: var(--fw-border);
  --focus: var(--fw-ink);
  font-family: var(--fw-font-text);
  background: var(--fw-paper);
  color: var(--fw-ink);
}
[data-theme="light"] {
  color-scheme: light;
  --fw-ink: #191B36;
  --fw-paper: #FAF7F0;
  --fw-surface: #FFFFFF;
  --fw-muted: #4D5066;
  --fw-border: #B9B7C2;
  --fw-accent: #AA3F36;
  --bg: var(--fw-paper);
  --ink: var(--fw-ink);
  --muted: var(--fw-muted);
  --paper: var(--fw-surface);
  --line: var(--fw-border);
  --focus: var(--fw-ink);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.45; background: var(--bg); color: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -40px; background: var(--paper); padding: 8px; }
.skip:focus { top: 8px; }
.hold { width: min(640px, calc(100% - 32px)); margin: 0 auto; min-height: calc(100dvh - 120px); padding: 48px 0 32px; }
h1 { font-family: var(--fw-font-display); font-weight: 700; font-size: clamp(3rem, 10vw, 5.2rem); line-height: 0.92; letter-spacing: 0.01em; margin: 28px 0 8px; }
.lead { font-size: 1.35rem; margin: 0 0 12px; }
.lockup { width: min(280px, 100%); height: auto; }
.lockup-on-light { display: none; }
[data-theme="light"] .lockup-on-dark { display: none; }
[data-theme="light"] .lockup-on-light { display: block; }
label { display: block; margin: 22px 0 6px; }
input[type="email"] { font: inherit; width: min(420px, 100%); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
button { font: 600 1rem/1.2 var(--fw-font-text); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
button.primary { background: var(--fw-accent); color: #191B36; border-color: transparent; }
[data-theme="light"] button.primary { color: #FAF7F0; }
.src { color: var(--muted); font-family: var(--fw-font-mono); font-size: 0.78rem; }
.theme { margin-top: 18px; }
.hp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.foot { border-top: 1px solid var(--line); padding: 24px 16px 40px; color: var(--muted); font-size: 0.9rem; }
.foot p { width: min(640px, 100%); margin: 0 auto; }