/* ════════════════════════════════════════════════════════════════════════════
   PUBLIC FORM KIT · 2027
   The form styling for the two pages that capture a request: /demo/ and
   /support/. It used to live inline in demo.html — support has the same fields,
   the same alerts and the same confirmation panel, so the kit moved here rather
   than being pasted a second time and drifting.

   Two vocabularies, one set of rules: `demo-form*` / `dm-*` is what demo.html
   already ships, `pf-*` is the neutral name new pages use. Both are declared
   together so a change to the look cannot reach one page and miss the other.

   The theme carries no form styling, and a lead-capture form is the one thing on
   these pages that is not already a shared part: the acts, the ticker, the
   journey, the number wall, the plate, the accordion and the hero window all
   come from platinum-theme.css / module-2027.css. Nothing below invents a
   colour — every value is a token.
   ════════════════════════════════════════════════════════════════════════════ */

.h27 .dm-form,
.h27 .pf-form-wrap { max-width: 640px; margin-inline: auto; }
.h27 .demo-form-card,
.h27 .pf-card { padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: var(--h27-paper); box-shadow: inset 0 0 0 1px var(--h27-hair), 0 26px 60px rgba(13, 27, 62, .09); }
.h27 .demo-form-card__title,
.h27 .pf-card__title { font-size: var(--h27-d3); color: var(--h27-navy); margin: 0 0 6px; }
.h27 .demo-form-card__subtitle,
.h27 .pf-card__subtitle { font-size: 14px; line-height: 1.6; color: var(--h27-mute); margin: 0 0 20px; }
.h27 .form-group { margin-bottom: 16px; }
.h27 .demo-form__row,
.h27 .pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h27 .form-label { display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: var(--h27-navy); }
.h27 .form-input, .h27 .form-select, .h27 .form-textarea { width: 100%; min-height: 48px; padding: 13px 16px; border: 1px solid var(--h27-hair); border-radius: 5px; background: var(--h27-paper); font: 500 15px/1.4 'Inter', sans-serif; color: var(--h27-body); }
.h27 .form-textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
.h27 .form-input:focus, .h27 .form-select:focus, .h27 .form-textarea:focus { outline: none; border-color: var(--h27-sky); }
.h27 .form-input:focus-visible, .h27 .form-select:focus-visible, .h27 .form-textarea:focus-visible { outline: 2px solid var(--h27-coral); outline-offset: 2px; }
.h27 .demo-form button[type=submit],
.h27 .pf-form button[type=submit] { width: 100%; justify-content: center; min-height: 52px; margin-top: 6px; }
.h27 .demo-form__note,
.h27 .pf-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--h27-mute); text-align: center; }
/* Preferred-slot hint — the two date/time selects need a line under them stating
   the length, the weekdays-only rule and which zone the times are in. `.demo-form__note`
   is centred and lives at the foot of the card; this one sits mid-form, tight under
   its row, and reads as part of the question — so it is left-aligned and pulled up. */
.h27 .dm-slot__hint { margin: -6px 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--h27-mute); }

.h27 .demo-form__trust,
.h27 .pf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.h27 .demo-form__trust span,
.h27 .pf-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--h27-hair); font-size: 12px; font-weight: 600; color: var(--h27-mute); }
.h27 .demo-form__trust .ico,
.h27 .pf-trust .ico { width: 14px; height: 14px; color: var(--h27-sage); }
.h27 .dm-alert { padding: 14px 18px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; }
.h27 .dm-alert--ok { background: var(--h27-ice); box-shadow: inset 0 0 0 1px var(--h27-sage); color: var(--h27-body); }
.h27 .dm-alert--bad { background: var(--h27-paper); box-shadow: inset 0 0 0 1px var(--h27-coral); color: var(--h27-coral-dk); }
.h27 .dm-alert ul { margin: 8px 0 0; padding-left: 18px; }
/* the alert is focused programmatically so a screen reader announces it — that is
   not a keyboard landing, so it does not draw the UA focus ring */
.h27 .dm-alert:focus { outline: none; }
/* Sent state — the button is the only thing a user watches after clicking, so it
   has to say the request left the browser. Without it people click again. */
.h27 .demo-form button[type=submit][disabled],
.h27 .pf-form button[type=submit][disabled] { opacity: .72; cursor: progress; }

/* ── Confirmation panel ──────────────────────────────────────────────────────
   This replaces the whole form after a successful POST. A 14px green strip above
   an untouched, still-fillable form read as "nothing happened" to clients, who
   then submitted again — so the form goes away and the panel answers the three
   questions they were asking: did it send, what happens next, do I do it again.
   Never carries data-t27: the reveal observer must not be able to leave the one
   element the page exists to show at opacity 0. */
.h27 .dm-done { padding: clamp(26px, 3.2vw, 44px); border-radius: 6px; background: var(--h27-paper); box-shadow: inset 0 0 0 1px var(--h27-sage), 0 26px 60px rgba(13, 27, 62, .09); text-align: center; }
/* focused only so screen readers announce it on load — a coral ring here would
   read as an error state, which is the opposite of what the panel says */
.h27 .dm-done:focus, .h27 .dm-done:focus-visible { outline: none; }
.h27 .dm-done__seal { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 999px; background: var(--h27-ice); box-shadow: inset 0 0 0 1px var(--h27-sage); margin-bottom: 16px; }
.h27 .dm-done__seal .ico { width: 26px; height: 26px; color: var(--h27-sage); }
.h27 .dm-done__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--h27-sage); margin-bottom: 10px; }
.h27 .dm-done__title { font-size: var(--h27-d2); line-height: 1.16; color: var(--h27-navy); margin: 0 0 12px; }
.h27 .dm-done__lede { font-size: 16px; line-height: 1.65; color: var(--h27-body); margin: 0 auto 24px; max-width: 46ch; }
.h27 .dm-done__note { margin: 20px auto 0; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--h27-mute); }
.h27 .dm-done .h27-cta-row { justify-content: center; }

/* ── Checkbox rows and radio pairs ───────────────────────────────────────────
   /support/ asks two things a text input cannot: "is your clinic down?" and
   "how should we reply?". Both are decisions, so both get a full row. */
.h27 .pf-check { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 5px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--h27-hair); }
.h27 .pf-check input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--h27-coral); cursor: pointer; }
.h27 .pf-check__title { display: block; font-size: 14px; font-weight: 700; color: var(--h27-navy); }
.h27 .pf-check__note { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--h27-mute); }
.h27 .pf-check--alert { box-shadow: inset 0 0 0 1px var(--h27-coral); }
.h27 .pf-check--alert .pf-check__title { color: var(--h27-coral-dk); }
.h27 .pf-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.h27 .pf-radio { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--h27-hair); font-size: 13.5px; font-weight: 600; color: var(--h27-body); }
.h27 .pf-radio input[type=radio] { accent-color: var(--h27-sky); }
.h27 .pf-radio:has(input:checked) { box-shadow: inset 0 0 0 1px var(--h27-sky); background: var(--h27-ice); color: var(--h27-navy); }
/* Field-level errors. The summary alert at the top of the card says "something
   is wrong"; this says which field, next to the field. */
.h27 .pf-err { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--h27-coral-dk); }
/* Honeypot — off-screen, never focusable, never announced. */
.h27 .pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .h27 .demo-form__row,
  .h27 .pf-row { grid-template-columns: minmax(0, 1fr); }
}
/* the note under the button carries the Terms and Privacy consent — it is the last
   thing read before submitting, so it does not shrink to 12.5px on a phone */
@media (max-width: 480px) {
  .h27 .demo-form__note,
  .h27 .pf-note { font-size: 13.5px; }
}