:root { color-scheme: light dark; --fg: #16181d; --muted: #5d6470; --line: #d6dae2; --accent: #1f6feb; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--fg); background: #fbfcfe; }
main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .75rem; }
.lede { color: var(--muted); font-size: 1.075rem; margin: 0 0 2.25rem; }
form { display: flex; flex-direction: column; }
label { font-weight: 600; margin: 1.25rem 0 .35rem; }
label.check { font-weight: 400; margin: .1rem 0; display: flex; gap: .55rem; align-items: center; }
.opt { font-weight: 400; color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.counter { color: var(--muted); font-size: .85rem; margin: .35rem 0 0; }
input[type=text], input[type=email], input[type=url], select, textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); width: 100%;
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 1.5rem 0 0; padding: .9rem 1rem 1rem; }
legend { font-weight: 600; padding: 0 .35rem; }
button { margin-top: 2rem; font: inherit; font-weight: 600; padding: .8rem 1.2rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button[disabled] { opacity: .55; cursor: default; }
.error { color: #b3261e; font-weight: 600; margin: 1.25rem 0 0; }
a { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  body { background: #14161a; --fg: #e9ecf1; --muted: #9aa3b1; --line: #333944; }
  input[type=text], input[type=email], input[type=url], select, textarea { background: #1c1f26; }
}

/* Honeypot. Position, not display: a bot that respects display:none is exactly the one
   this field is trying to catch. Off-screen and out of the accessibility tree. */
.hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#turnstile-widget {
  margin: 1rem 0;
}

/* The failsafe notice: a recovered submission, or an apology with a way out. */
.notice {
  background: #eef6ee;
  border-left: 3px solid #4a7;
  padding: 0.6rem 0.8rem;
  margin: 0.8rem 0;
  font-size: 0.95rem;
}

/* The privacy notice (SPEC 8). Same shell as the form, a little narrower and looser,
   because it is read rather than filled in. */
.prose { max-width: 38rem; }
.prose h2 { font-size: 1.15rem; margin: 2.25rem 0 .5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: .4rem 0; }
.meta { color: var(--muted); font-size: .9rem; margin: 2.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; }

/* The Article 13 link, next to the submit button. A LINK, never a checkbox: consent is
   the wrong legal basis here and a tick box would only make it withdrawable (SPEC 8). */
.privacy { margin: .9rem 0 0; font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Phones. This is where the form is actually going to be filled in, and it is where
   the owner will test it, so the small screen is the real target and the desktop is
   the fallback.

   Not done here, because it is already right in the base rules: every control is
   width:100% inside a border-box, and every control inherits the 16px body font, which
   is the threshold below which iOS Safari zooms the page on focus and does not zoom
   back out.
   --------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* The Turnstile widget renders in a fixed 300px iframe that we do not control, so on a
   320px screen it is wider than the content column. Scroll it rather than letting it
   push the whole page sideways. */
#turnstile-widget { max-width: 100%; overflow-x: auto; }

@media (max-width: 34rem) {
  main { padding: 2rem 1rem 3.5rem; }
  h1 { font-size: 1.6rem; }
  .lede { font-size: 1rem; margin-bottom: 1.75rem; }
  /* Full width and taller: a thumb, not a mouse pointer. */
  button { width: 100%; padding: .95rem 1.2rem; }
  fieldset { padding: .75rem .85rem .9rem; }
  legend { font-size: .95rem; }
  /* ~44px tap targets on the checkbox rows, which are the fiddliest part of this form. */
  label.check { padding: .45rem 0; }
  label.check input[type=checkbox] { width: 1.15rem; height: 1.15rem; flex: none; }
}

@media (max-width: 22rem) {
  main { padding: 1.5rem .75rem 3rem; }
}