/* AI on Tap: short single-purpose pages (share an idea, feedback) */
.wrap { width: min(720px, 100% - 2rem); margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-text); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; }

.site-header { padding-block: var(--aot-space-3); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--aot-space-2); }
.site-header img { width: 140px; height: auto; display: block; }
.site-header a.meetup { color: var(--muted); font-weight: 600; font-size: var(--aot-size-small); }

.intro { padding-block: var(--aot-space-3) var(--aot-space-4); }
.flock { display: block; width: 100%; height: auto; margin: 0 auto var(--aot-space-3); max-width: 560px; }
.bird { float: right; width: clamp(110px, 26vw, 170px); height: auto; margin: 0 0 var(--aot-space-2) var(--aot-space-3); shape-outside: margin-box; }
.eyebrow { font-weight: 700; font-size: var(--aot-size-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--highlight); margin: 0 0 var(--aot-space-1); }
.intro h1 { font-size: var(--aot-size-h1); }
.lead { font-size: var(--aot-size-lead); color: var(--muted); margin: 0 0 var(--aot-space-2); }
.event-line { color: var(--muted); font-size: var(--aot-size-small); margin: 0; clear: both; }
.event-line strong { color: var(--text); }

form { display: grid; gap: var(--aot-space-3); padding-bottom: var(--aot-space-5); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field > label { font-weight: 700; padding: 0; margin-bottom: 0.4rem; display: block; }
.field { display: grid; gap: 0.4rem; }
.hint { font-size: var(--aot-size-small); color: var(--muted); margin-top: -0.2rem; }
.optional { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="email"], input[type="url"], textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; width: 100%;
}
input:focus, textarea:focus { border-color: var(--highlight); }
textarea { min-height: 7rem; resize: vertical; }

/* Pill choices (checkboxes and radios) */
.choices { display: flex; flex-wrap: wrap; gap: var(--aot-space-1); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 0.5em 1em; border: 2px solid var(--line);
  border-radius: var(--aot-radius-pill); font-weight: 600; cursor: pointer;
}
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.choice input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }

/* NPS 0 to 10 */
.nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps .choice span { display: block; text-align: center; padding: 0.7em 0; border-radius: 10px; }
.nps-ends { display: flex; justify-content: space-between; font-size: var(--aot-size-small); color: var(--muted); margin-top: 0.4rem; }
@media (max-width: 420px) {
  .nps { grid-template-columns: repeat(6, 1fr); }
}

.reveal[hidden] { display: none; }
.reveal { display: grid; gap: var(--aot-space-3); padding: var(--aot-space-3); border: 2px dashed var(--line); border-radius: var(--aot-radius); }

.hidden { position: absolute; left: -9999px; }
.privacy { font-size: var(--aot-size-small); color: var(--muted); margin: 0; }

.site-footer { padding-block: var(--aot-space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--aot-size-small); }
.site-footer p { margin: 0; }

.content-page { padding-block: var(--aot-space-4) var(--aot-space-5); }
.content-page h1 { font-size: var(--aot-size-h1); margin-bottom: var(--aot-space-2); }
.content-page h2 { font-size: var(--aot-size-h2); margin-top: var(--aot-space-4); }
.content-page p { color: var(--muted); }
.content-page .lead { color: var(--muted); }
.privacy-updated { font-size: var(--aot-size-small); margin-top: var(--aot-space-4); }

.thanks { min-height: 80vh; display: grid; align-content: center; text-align: center; }
.thanks .bird { float: none; margin: 0 auto var(--aot-space-3); display: block; }
.thanks h1 { font-size: var(--aot-size-h1); }
.intro .wrap::after { content: ""; display: block; clear: both; }
fieldset .hint { margin-top: 0.5rem; }