html { color-scheme: light dark; }
body { margin: 0; }
html, body { -webkit-text-size-adjust: 100%; }
  /* Layout: one phone-first column under a pitch-green band, with the centre circle marked out behind the heading. */
  :root {
    --bg: #eef3ef; --surface: #ffffff; --fg: #14261d; --muted: #566a5f; --line: #c9d6cd;
    --pitch: #0b5d3b; --on-pitch: #ffffff; --pitch-soft: #cfe6da; --pitch-mark: rgba(255,255,255,.2);
    --accent: #0b6d44; --on-accent: #ffffff; --select: #e0f1e8; --error: #b3261e; --notice: #fff4d1; --on-notice: #4f3c00;
    --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --body: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) { :root {
    --bg: #0e1713; --surface: #16231c; --fg: #e8f1eb; --muted: #a3b6aa; --line: #33473b;
    --pitch: #0b4a30; --pitch-soft: #bcdccb; --accent: #4cc48c; --on-accent: #06281a; --select: #173a2a; --error: #ff9c94; --notice: #3b3010; --on-notice: #ffe7a3;
    color-scheme: dark;
  } }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { background: var(--bg); color: var(--fg); font: 400 15px/1.5 var(--body); }
  .wrap { max-width: 560px; margin-inline: auto; }

  .band { position: relative; overflow: hidden; background: var(--pitch); color: var(--on-pitch);
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 26px; }
  .band::before { content: ""; position: absolute; top: 50%; right: -70px; width: 240px; height: 240px; transform: translateY(-50%);
    border: 2px solid var(--pitch-mark); border-radius: 50%; }
  .band::after { content: ""; position: absolute; top: 0; bottom: 0; right: 48px; width: 2px; background: var(--pitch-mark); }
  .band .wrap { position: relative; z-index: 1; display: grid; gap: 18px; }
  .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .brand { font: 700 22px/1 var(--display); letter-spacing: .04em; }
  .lang { display: flex; border: 1px solid var(--pitch-soft); border-radius: 6px; overflow: hidden; }
  .lang button { min-width: 44px; min-height: 36px; border: 0; background: transparent; color: var(--on-pitch); font: 600 13px var(--body); cursor: pointer; }
  .lang button[aria-pressed="true"] { background: var(--pitch-soft); color: var(--pitch); }
  h1 { margin: 0; font: 700 clamp(38px, 10vw, 52px)/1.08 var(--display); text-wrap: balance; }
  .sub { margin: 6px 0 0; color: var(--pitch-soft); font-size: 15px; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .steps li { display: grid; gap: 2px; font-size: 13px; font-weight: 500; line-height: 1.3; min-width: 0; }
  .steps b { font: 700 24px/1 var(--display); color: var(--pitch-soft); }

  .main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 24px 40px; }
  form, .done { display: grid; gap: 20px; }
  .field { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
  label.lbl, legend { padding: 0; font-weight: 600; font-size: 14px; }
  legend { margin-bottom: 8px; }
  input[type="text"], input[type="email"], input[type="tel"] { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px; font: 400 16px var(--body); }
  input::placeholder { color: var(--muted); }
  input:focus-visible, .lang button:focus-visible, .send:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { position: relative; }
  .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .chip span { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-weight: 500; font-size: 14px; }
  .chip input:checked + span { background: var(--select); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
  .chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
  .consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; cursor: pointer; }
  .consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
  .err { min-height: 0; color: var(--error); font-size: 13px; font-weight: 500; }
  .err:empty { display: none; }
  [aria-invalid="true"] { border-color: var(--error) !important; }
  .send { min-height: 54px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 700 22px var(--display); letter-spacing: .02em; cursor: pointer; }
  .send:disabled { opacity: .65; cursor: progress; }
  .note { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
  .trap { position: absolute; left: -9999px; }
  .done h2 { margin: 0; font: 700 38px/1.1 var(--display); }
  .done p { margin: 0; }