/* Subscribe form. One stylesheet, no build step.
   Brand values are taken from signals.azx.io's own stylesheet (its :root
   tokens and computed styles), not eyeballed. */

:root {
  /* signals.azx.io tokens */
  --color-bg: #090e11;
  --color-bg-elevated: #12191f;
  --color-fg: #eff2f5;
  --color-fg-muted: #a5acb1;
  --color-border: #2a343c;
  --color-accent: #ffb73a;
  --color-accent-fg: #171008;
  --color-danger: #fc5855;

  /* The site's card is #172128 at 70% over the page; this is that colour
     flattened, so contrast can be checked against a fixed value. */
  --color-surface: #131b21;

  /* The consent row's tint, flattened to an opaque colour (6% amber over the
     surface) so its contrast does not depend on where the page glow falls. */
  --color-accent-surface: #212422;

  /* Accessibility on dark, all checked by tests/unit/test_pages.py:
     - input borders use #757b80 (4.1:1 on the surface), not the site's
       #2a343c card border, which is 1.4:1 and fails 1.4.11;
     - button text is the site's dark accent-fg on amber (10.9:1), never white
       (1.7:1);
     - the focus ring is amber (10.0:1 on the surface), offset 2px so that on
       the amber button it sits on the surface, not on amber. */
  --color-input-border: #757b80;
  --color-focus-ring: #ffb73a;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius-md: 12px;
  --radius-lg: 16px;
  --tracking-eyebrow: 0.2em;
  --shadow-glow: 0 0 40px -8px rgba(255, 183, 58, 0.3);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The site's ambient glow: a fixed amber radial gradient from top centre. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 0, rgba(255, 183, 58, 0.15), transparent 60%);
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px 56px;
}

/* --- Header ------------------------------------------------------------- */

.logo {
  display: block;
  width: auto;
  height: 28px;
}

.intro {
  margin-top: 40px;
  margin-bottom: 28px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

h1,
h2 {
  color: var(--color-fg);
  font-family: var(--font-sans);
}

h1 {
  margin: 16px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  h1 {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 48px;
  }
}

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

/* --- Card: the site's stat-card treatment ------------------------------ */

.card {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card > :last-child {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .card {
    padding: 24px;
  }
}

/* --- Fields ------------------------------------------------------------- */

.field {
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-fg);
  font-weight: 500;
}

.hint {
  margin: 0 0 8px;
  color: var(--color-fg-muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  font-family: var(--font-sans);
  /* 16px stops iOS Safari zooming the page on focus. */
  font-size: 16px;
  line-height: 1.5;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  height: 48px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* --- Focus: one amber indicator, offset onto the surface ---------------- */

a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

a:focus-visible {
  border-radius: 4px;
}

/* --- Checkboxes: the whole row is a 44px+ tap target via the label ------ */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 10px 0;
  accent-color: var(--color-accent);
}

.checkbox label {
  flex: 1 1 auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  font-weight: 400;
  cursor: pointer;
}

/* The consent row carries the site's accent-card treatment: a faint amber
   border and tint, like "Bottom line" on signals.azx.io. */
.consent {
  padding: 4px 14px;
  border: 1px solid rgba(255, 183, 58, 0.25);
  border-radius: var(--radius-md);
  background: var(--color-accent-surface);
}

/* --- Required fields ---------------------------------------------------- */

/* Muted, not red: the asterisk is a quiet key, not an alarm. */
.req {
  color: var(--color-fg-muted);
}

.required-note {
  margin: 0 0 20px;
  color: var(--color-fg-muted);
  font-size: 14px;
}

/* --- Errors: one quiet message per field -------------------------------- */

/* A 1px red border on the field, for server errors (.field--error) and, before
   submitting, for fields changed to something invalid (:user-invalid, no
   script; it only matches after interaction). Danger on the input fill is
   5.6:1 (test_dark_theme_contrast). The checkbox gets no border change; its
   message below is the cue. */
.field--error input:not([type="checkbox"]),
.field--error textarea,
input:not([type="checkbox"]):user-invalid,
textarea:user-invalid {
  border-color: var(--color-danger);
}

/* Small text below the field it describes. 14px danger on the card is 5.5:1,
   and 5.0:1 on the consent row. */
.error-text {
  margin: 6px 0 0;
  color: var(--color-danger);
  font-size: 14px;
  line-height: 1.4;
}

.consent .error-text {
  margin: 0 0 10px 36px;
}

/* --- Divider, button, footer -------------------------------------------- */

.divider {
  margin: 32px 0 24px;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* The "Want to tell us more?" heading, now directly above a field label. */
.divider + h2 {
  margin-bottom: 16px;
}

.button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
  color: var(--color-accent-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.button:hover {
  background: #ffc766;
}

.footer {
  margin-top: 28px;
  color: var(--color-fg-muted);
  font-size: 14px;
}

/* --- Utilities ---------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}