/* Layout: a navy header carries the logo, then one calm, thumb-friendly column. The page is opened
   on phones from a QR code, so inputs are large and nothing needs zooming or side-scrolling. */
:root {
  --navy: #00101D;
  --blue: #14518A;
  --sky: #A3D3FF;
  --paper: #ffffff;
  --wash: #F1F7FC;
  --ink: #00101D;
  --ink-soft: #33485A;
  --line: #C9DAEA;
  --danger: #B42318;
  --font: "Metropolis", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wash); color: var(--ink-soft); font-family: var(--font); font-size: 17px; line-height: 1.65; }
.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.top { background: var(--navy); padding-block: 18px; }
.logo { display: block; height: 52px; width: auto; filter: brightness(0) invert(1); }

h1, h2 { color: var(--ink); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 8.5vw, 46px); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: 22px; font-weight: 800; }
p { margin: 0 0 14px; }
a { color: var(--blue); font-weight: 600; }

.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.intro { padding-block: 40px 22px; }
.lede { margin: 18px 0 0; font-size: 19px; color: var(--ink-soft); }

.what { padding-block: 6px 26px; }
.what h2 { margin-bottom: 14px; }
.what-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.what-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.what-list strong { color: var(--ink); }

.form-section { padding-block: 0 44px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px 26px; }
.card h2 { font-size: 26px; }
.hint { margin: 6px 0 22px; font-size: 15px; }

.field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
label, legend { display: block; margin: 0 0 6px; padding: 0; font-weight: 700; font-size: 16px; color: var(--ink); }
.optional { font-weight: 500; color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; min-height: 50px;
}
textarea { resize: vertical; min-height: 110px; }
input:focus-visible, textarea:focus-visible, .submit:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; border-color: var(--blue); }
[aria-invalid="true"] { border-color: var(--danger); }

.choices { display: grid; gap: 10px; }
.choices legend { margin-bottom: 10px; }
.choice, .check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 500; line-height: 1.45; cursor: pointer; }
.choice { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; background: var(--paper); }
.choice:has(input:checked) { border-color: var(--blue); background: #EAF3FC; }
.choice input, .check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); }
.consent { margin-top: 24px; }
.check { font-size: 15px; color: var(--ink-soft); }

.error { margin: 6px 0 0; color: var(--danger); font-size: 15px; font-weight: 600; }
.form-error { margin: 0 0 14px; }

.submit {
  width: 100%; min-height: 56px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--blue); color: #fff; font: inherit; font-size: 18px; font-weight: 700;
}
.submit:hover { background: #0F4373; }
.submit:disabled { opacity: 0.6; cursor: progress; }

.thanks { text-align: center; padding: 18px 4px 8px; }
.thanks:focus { outline: none; }
.thanks h2 { margin-bottom: 10px; }

/* Off-screen rather than display:none, because some bots skip fields that are hidden that way. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { background: var(--navy); color: #B9CBDB; padding-block: 28px; font-size: 14px; line-height: 1.6; }
.foot p { margin-bottom: 8px; }
.foot a { color: var(--sky); }

@media (min-width: 640px) {
  .card { padding: 32px 32px 34px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }