:root {
  --navy: #142a63;
  --navy-deep: #0c1a40;
  --yellow: #ffcc00;
  --red: #d7262e;
  --blue: #1f4fbf;
  --paper: #fbf8f1;
  --card: #ffffff;
  --ink: #16182a;
  --muted: #5f6378;
  --line: #e7e1d3;
  --green: #1d8a4e;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.flag { height: 6px; background: linear-gradient(90deg, var(--yellow) 0 33%, var(--blue) 33% 66%, var(--red) 66%); }
h1, h2, .display {
  font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0;
}
.btn {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 16px;
  font-weight: 700; font-size: 17px; background: var(--navy); color: #fff; text-align: center; text-decoration: none;
}
.btn:disabled { opacity: .45; }
.btn.yellow { background: var(--yellow); color: var(--navy-deep); }
.btn.green { background: var(--green); }
.btn.ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #eef1fb; color: var(--navy); }
.demo-banner { background: var(--yellow); color: var(--navy-deep); text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }
.field { display: block; margin: 0 0 12px; }
.field span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 16px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); }
.seg { display: flex; gap: 8px; margin-bottom: 12px; }
.seg button { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; }
.seg button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }