.fk-contact {
  --fk-surface:#fff; --fk-text:#211c35; --fk-muted:#655d73; --fk-line:#82778e;
  --fk-accent:#6254b5; --fk-link:#6254b5; --fk-focus:#6254b5; --fk-button-edge:#6254b5;
  --fk-button-normal:#6254b5; --fk-button-hover:#584ca3; --fk-button-active:#4e4391;
  --fk-on-normal:#fff; --fk-on-hover:#fff; --fk-on-active:#fff;
  --fk-error:#a42c3b; --fk-error-bg:#fff2f2; --fk-success:#216947; --fk-success-bg:#edf7f0;
  --fk-radius:8px; --fk-gap:24px;
  box-sizing:border-box; color-scheme:light; color:var(--fk-text); background:transparent;
  container-type:inline-size; max-width:58.5rem; margin-inline:auto;
  overflow-wrap:anywhere; line-height:1.5; font-family:inherit;
  /* Zero One centres columns on phones; a form reads from the inline start. */
  text-align:start;
}
/* Only plugin custom properties enter the theme; nearest container wins by inheritance. */
:where(.uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color)), .uk-light { --fk-context-scheme:dark; }
.uk-section-default, .uk-section-muted, .uk-dark { --fk-context-scheme:light; }
/* Explicit inversion wins on the same element; nested sections still inherit locally. */
.uk-light { --fk-context-scheme:dark; }
.uk-dark { --fk-context-scheme:light; }
@supports(color:light-dark(#fff,#000)) {
  .fk-contact.fk-auto { color-scheme:var(--fk-context-scheme,light); }
  .fk-contact.fk-dark { color-scheme:dark; }
  .fk-contact.fk-light { color-scheme:light; }
  /* Transparent theme forms always match their section, even with a stale explicit override. */
  .fk-contact.fk-theme { color-scheme:var(--fk-context-scheme,light); }
  /* Opt-in only: inherit a scheme the host actually declares; never invent OS support. */
  .fk-contact.fk-auto.fk-system, .fk-contact.fk-theme.fk-system { color-scheme:var(--fk-context-scheme,inherit); }
  .fk-contact { --fk-surface:light-dark(#fff,#242032); --fk-text:light-dark(#211c35,#f5f1fc); --fk-muted:light-dark(#655d73,#c5bed3); --fk-line:light-dark(#82778e,#92899f); --fk-link:light-dark(#6254b5,#c4baff); --fk-focus:light-dark(#6254b5,#c4baff); --fk-button-edge:light-dark(#6254b5,#c4baff); --fk-error:light-dark(#a42c3b,#ffb1b8); --fk-error-bg:light-dark(#fff2f2,#412a35); --fk-success:light-dark(#216947,#a0e1b5); --fk-success-bg:light-dark(#edf7f0,#243a31); }
}
/* Legacy engines cannot select light-dark tokens: retain a readable padded surface. */
@supports not (color:light-dark(#fff,#000)) {
  .fk-contact.fk-theme { background:var(--fk-surface); padding:clamp(1rem,4vw,2.25rem); border-radius:calc(var(--fk-radius)*2); }
  .fk-contact.fk-theme h2 { color:inherit; }
}

.fk-contact *, .fk-contact *::before, .fk-contact *::after { box-sizing:border-box; }
.fk-contact [hidden] { display:none!important; }
.fk-contact:not(.fk-theme) h2, .fk-contact h3, .fk-contact p, .fk-contact ul { color:inherit; }
.fk-contact p { margin:0 0 .75rem; }
.fk-contact .fk-intro { margin-block-end:1.6rem; }
/* Theme style: the host's h2 font, weight and colour; the plugin only bounds size and spacing.
   Modern and card are own designed surfaces and keep their own heading. */
.fk-contact .fk-intro h2 { font-size:clamp(1.75rem,4cqi,2.625rem); line-height:1.15; margin:0 0 .75rem; }
.fk-contact:not(.fk-theme) .fk-intro h2 { font:inherit; font-size:clamp(1.75rem,4cqi,2.625rem); font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.fk-contact .fk-intro p:not(.fk-eyebrow) { color:var(--fk-muted); max-width:54ch; }
.fk-contact .fk-eyebrow { color:var(--fk-link); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.fk-contact.fk-modern, .fk-contact.fk-card { background:var(--fk-surface); padding:clamp(1rem,4vw,2.25rem); border-radius:calc(var(--fk-radius)*2); }
.fk-contact.fk-card { border:1px solid var(--fk-line); box-shadow:0 10px 38px #211c3506; }
.fk-contact .fk-note, .fk-contact .fk-help, .fk-contact .fk-limit, .fk-contact .fk-counter, .fk-contact .fk-privacy { color:var(--fk-muted); font-size:.875rem; }
.fk-contact .fk-note { margin-block-end:1.5rem; }
/* A11: each field spans four shared rows (label, help, control, after) via subgrid, so
   side-by-side controls line up whatever help, limit or error the neighbour has. */
.fk-contact .fk-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:var(--fk-gap); margin-block-end:calc(-1 * var(--fk-gap)); }
.fk-contact .fk-field { grid-column:span 6; grid-row:span 4; min-width:0; margin:0 0 var(--fk-gap); padding:0; border:0; }
.fk-contact div.fk-field:not(.fk-type-checkbox) { display:grid; grid-template-rows:subgrid; align-content:start; }
.fk-contact div.fk-field:not(.fk-type-checkbox) > label { grid-row:1; }
.fk-contact div.fk-field:not(.fk-type-checkbox) > .fk-help { grid-row:2; }
.fk-contact div.fk-field:not(.fk-type-checkbox) > :is(input,select,textarea) { grid-row:3; align-self:start; }
.fk-contact div.fk-field:not(.fk-type-checkbox) > .fk-after { grid-row:4; }
.fk-contact label, .fk-contact legend { display:block; font-weight:600; margin:0 0 .45rem; padding:0; font-size:1rem; color:var(--fk-text); }
.fk-contact .fk-optional { font-weight:400; font-size:.875rem; color:var(--fk-muted); }
.fk-contact .fk-help { margin:0 0 .5rem; }
.fk-contact input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .fk-contact textarea, .fk-contact select {
  display:block; width:100%; max-width:100%; min-height:3rem; padding:.6875rem .8125rem;
  border:1px solid var(--fk-line); font:inherit;
  color:var(--fk-text); background-color:var(--fk-surface); box-shadow:none;
}
.fk-contact input::placeholder, .fk-contact textarea::placeholder { color:var(--fk-muted); opacity:1; }
.fk-contact textarea { min-height:8.25rem; resize:vertical; }
/* WebKit ignores min-height on native selects; match the text input height (A11). */
.fk-contact select { padding-inline-end:2rem; height:max(3rem, calc(1.5em + 1.375rem + 2px)); }
/* A1: whole words; long single words hyphenate (page lang) before an emergency break. */
.fk-contact .fk-choices { display:flex; gap:.75rem; flex-wrap:wrap; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.fk-contact .fk-choice, .fk-contact .fk-choice > span { min-width:0; }
.fk-contact .fk-choice { display:flex; gap:.625rem; align-items:center; min-height:2.875rem; padding:.5rem .875rem; border:1px solid var(--fk-line); border-radius:var(--fk-radius-choice,var(--fk-radius)); margin:0; font-weight:400; cursor:pointer; }
.fk-contact .fk-choice:has(:checked) { border-color:var(--fk-link); }
.fk-contact input:is([type=checkbox],[type=radio]):is(:enabled,:disabled) { appearance:auto; -webkit-appearance:auto; background-image:none; width:1.375rem; height:1.375rem; flex-shrink:0; margin:0; accent-color:var(--fk-link); }
.fk-contact .fk-type-checkbox { display:grid; grid-template-columns:1.375rem 1fr; gap:0 .6875rem; align-items:center; }
.fk-contact .fk-type-checkbox>label { grid-column:2; grid-row:1; min-height:2.75rem; align-content:center; font-weight:400; margin:0; cursor:pointer; }
.fk-contact .fk-type-checkbox>input { grid-column:1; grid-row:1; }
.fk-contact .fk-type-checkbox>p { grid-column:2; }
.fk-contact a { color:var(--fk-link); text-decoration:underline; text-underline-offset:3px; }
.fk-contact .fk-privacy { margin-block:1.625rem 1.25rem; max-width:72ch; line-height:1.6; }
.fk-contact .fk-privacy a { font-weight:600; }
.fk-contact .fk-actions { display:flex; }
.fk-contact.fk-button-end .fk-actions { justify-content:flex-end; }
.fk-contact.fk-button-stretch .fk-actions button { width:100%; }
.fk-contact button[type=submit]:is(:enabled,:disabled) { font:inherit; font-weight:600; min-height:3rem; padding:.6875rem 1.4375rem; border:2px solid var(--fk-button-edge); background:var(--fk-button-normal); color:var(--fk-on-normal); cursor:pointer; text-transform:none; box-shadow:none; }
.fk-contact button[type=submit]:hover { background:var(--fk-button-hover); color:var(--fk-on-hover); }
.fk-contact button[type=submit]:active { background:var(--fk-button-active); color:var(--fk-on-active); }
.fk-contact button[type=submit][aria-disabled=true], .fk-contact button[type=submit]:disabled { cursor:wait; opacity:1; border-style:dashed; }
/* E56 corner radius. Pill: button fully round, choice tiles half their minimum height
   (single-line tiles round, wrapped labels keep moderate corners); fields and boxes use the
   large profile (12px). Theme: a control with a configured theme class (classes.button/
   input/textarea/select) gets no plugin radius, so the theme's own rule (e.g. UIkit
   .uk-button 500px) applies; a control without class keeps the fallback (medium). Selector
   instead of revert/revert-layer, which would also discard the theme's rule. */
.fk-contact.fk-radius-pill { --fk-radius-button:999px; --fk-radius-choice:1.4375rem; }
.fk-contact:not(.fk-radius-theme) :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select),
.fk-contact.fk-radius-theme :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select):is(:not([class]), [class=""]) { border-radius:var(--fk-radius); }
.fk-contact:not(.fk-radius-theme) button[type=submit]:is(:enabled,:disabled),
.fk-contact.fk-radius-theme button[type=submit]:is(:not([class]), [class=""]) { border-radius:var(--fk-radius-button,var(--fk-radius)); }
.fk-contact .fk-errors, .fk-contact .fk-success { padding:1.25rem; border:1px solid; border-inline-start-width:4px; border-radius:var(--fk-radius); margin-block:0 1.5rem; }
.fk-contact .fk-errors { border-color:var(--fk-error); background:var(--fk-error-bg); color:var(--fk-text); }
.fk-contact .fk-errors h3 { margin:0 0 .5rem; font:inherit; font-size:1.25rem; font-weight:700; }
.fk-contact .fk-errors ul { margin:0; padding-inline-start:1.25rem; }
.fk-contact .fk-errors a, .fk-contact .fk-field-error { color:var(--fk-error); }
.fk-contact .fk-field-error { font-weight:600; font-size:.875rem; margin:.5rem 0 0; }
.fk-contact .fk-success { border-color:var(--fk-success); background:var(--fk-success-bg); color:var(--fk-text); padding:2rem; }
.fk-contact .fk-success p { margin:0; max-width:54ch; }
/* Same control list as the base rule above, so the invalid edge outranks it (it never did). */
.fk-contact [aria-invalid=true]:is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select) { border:2px solid var(--fk-error); }
.fk-contact .fk-progress { margin-block-start:.75rem; font-size:.875rem; }
.fk-contact .fk-progress:empty { margin:0; }
.fk-contact .fk-alternative { font-size:.875rem; margin-block-start:1rem; }
/* A2: standalone rejection page (no theme around it). */
.fk-contact.fk-rejected { margin-block:clamp(1rem,8vw,5rem); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.fk-contact.fk-rejected h1 { font:inherit; font-size:1.75rem; font-weight:700; line-height:1.2; margin:0 0 1rem; }
.fk-contact .fk-limit, .fk-contact .fk-counter { margin:.4rem 0 0; text-align:end; }
.fk-contact .fk-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.fk-contact :focus { outline:3px solid var(--fk-focus); outline-offset:4px; }
.fk-contact, .fk-contact [id], .fk-contact [data-fk-result] { scroll-margin-block:var(--fk-scroll-offset,6rem) 6rem; }
@container(min-width:580px) { .fk-contact .fk-width-1-2 { grid-column:span 3; } }
@container(min-width:780px) { .fk-contact .fk-width-1-3 { grid-column:span 2; } }
@container(max-width:579px) { .fk-contact .fk-actions button { width:100%; } .fk-contact .fk-choice { flex:1 1 auto; } }
/* E55: the transparent theme form takes text, hint and line colours from the host in every
   context (full strength: hints are text and need 4.5:1, which only the host ink guarantees).
   Controls, message boxes, links, focus and error marks keep their own colours. */
@supports(color:light-dark(#fff,#000)) {
  .fk-contact.fk-theme {
    color:inherit;
    & :is(label, legend, .fk-optional, .fk-help, .fk-note, .fk-limit, .fk-counter, .fk-privacy, .fk-intro p:not(.fk-eyebrow)) { color:inherit; }
    & .fk-choice { border-color:currentColor; }
    /* Native radios/checkboxes take FieldText from the UA; their ring needs the host ink. */
    & input:is([type=checkbox], [type=radio]) { color:inherit; }
  }
  /* Declared sections fix the scheme, so control surfaces match the host: host ink in and around them. */
  :is(.uk-section-default, .uk-section-muted, .uk-dark, .uk-light, .uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color), .preview-light, .preview-dark) .fk-contact.fk-theme :is(input:not([type=checkbox], [type=radio]), textarea, select) { color:inherit; border-color:currentColor; }
  .fk-contact.fk-theme a, .fk-contact.fk-theme .fk-eyebrow { color:light-dark(var(--fk-link),#fff); }
  .fk-contact.fk-theme :focus { outline-color:light-dark(var(--fk-focus),#fff); }
  .fk-contact.fk-theme [aria-invalid=true]:is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select) { border-color:light-dark(var(--fk-error),#fff); }
  .fk-contact.fk-theme .fk-field-error { color:light-dark(var(--fk-error),#fff); }
  .fk-contact.fk-theme .fk-choice:has(:checked), .fk-contact.fk-theme button[type=submit] { border-color:light-dark(var(--fk-button-edge),#fff); }
}
/* N8: outside any declared section (hosts with their own palette or dark mode) the scheme
   is unknown, so links, inline errors and focus rings take the host ink as well. Controls
   keep their light surface and ink; text controls and the button get a two-tone focus ring
   (accent plus surface halo) that stays visible on light and dark hosts. */
@supports(color:light-dark(#fff,#000)) {
  .fk-contact.fk-theme:not(:is(.uk-section-default, .uk-section-muted, .uk-dark, .uk-light, .uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color), .preview-light, .preview-dark) *) {
    & :is(.fk-eyebrow, .fk-field-error, a:not(:is(.fk-errors, .fk-success) a)) { color:inherit; }
    /* Separate rule: an engine without :has() must not drop the plain tile border. */
    & .fk-choice:has(:checked) { border-color:currentColor; }
    & :focus { outline-color:currentColor; }
    & :is(input:not([type=checkbox], [type=radio]), textarea, select, button[type=submit]):focus { outline-color:var(--fk-focus); box-shadow:0 0 0 4px var(--fk-surface); }
  }
}

@media(prefers-reduced-motion:reduce) { .fk-contact, .fk-contact * { scroll-behavior:auto; transition:none; animation:none; } }
@media(forced-colors:active) {
  .fk-contact { color:CanvasText; background:Canvas; }
  .fk-contact input, .fk-contact textarea, .fk-contact select, .fk-contact .fk-choice { border:1px solid ButtonText!important; }
  /* !important: the N8 host-ink focus rules are more specific than this block. */
  .fk-contact :focus, .fk-contact.fk-theme :focus { outline-color:Highlight!important; box-shadow:none!important; }
  .fk-contact input:is([type=checkbox],[type=radio]) { accent-color:auto; }
  .fk-contact button[type=submit]:is(:enabled,:disabled,:hover,:active) { color:ButtonText; background:ButtonFace; border-color:ButtonText; }
  .fk-contact button[type=submit]:disabled { color:GrayText; }
}

/* 0.1.5: structural sections and opt-in presentation. Profile colours/radii stay in the hashed sheet. */
.fk-contact .fk-section { grid-column:1/-1; min-width:0; margin:0 0 24px; padding:0; border:0; }
.fk-contact .fk-section + .fk-section { margin-block-start:24px; }
.fk-contact .fk-section > legend { font-size:1.4rem; font-weight:700; line-height:1.25; margin-block-end:16px; }
.fk-contact .fk-section > .fk-help { margin-block-end:16px; }
.fk-contact .fk-section > .fk-grid { margin-block-start:8px; }
.fk-contact .fk-select-wrap { grid-row:3; position:relative; align-self:start; min-width:0; }
.fk-contact.fk-chevron-custom select { appearance:none; -webkit-appearance:none; background-image:none; padding-inline-end:48px; }
.fk-contact .fk-chevron { position:absolute; inset-inline-end:20px; top:calc(50% - 7px); width:10px; height:10px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); pointer-events:none; }
/* The field's own available width and font size decide the columns (at most three).
   240px / 14rem leave useful text space beside the native radio at both text sizes. */
/* A narrow layout column can live in a wide viewport. Keep tile-form gutters local
   and predictable even when only the form itself, rather than its parent, is narrow. */
.fk-contact:is(.fk-card,.fk-modern):has(.fk-radio-tiles) { padding-inline:1rem; }
.fk-contact .fk-radio-tiles .fk-choices { container-type:inline-size; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,max(240px,14rem,calc((100% - 16px)/3))),1fr)); gap:8px; overflow-wrap:normal; -webkit-hyphens:manual; hyphens:manual; }
.fk-contact .fk-radio-tiles .fk-choice { position:relative; min-height:64px; padding:16px; gap:8px; border-width:2px; border-radius:var(--fk-radius); }
.fk-contact .fk-radio-tiles .fk-choice > span { flex:1; }
.fk-contact .fk-radio-tiles .fk-choice:has(:checked) { border-color:var(--fk-link); background:var(--fk-surface); color:var(--fk-text); }
.fk-contact .fk-radio-tiles .fk-choice:has(:checked)::after { content:'✓'; position:absolute; inset-block-start:1px; inset-inline-end:5px; color:var(--fk-link); font-size:12px; line-height:1; font-weight:700; }
.fk-contact .fk-radio-tiles .fk-choice:has(:focus-visible) { outline:2px solid var(--fk-focus); outline-offset:4px; }
.fk-contact .fk-radio-tiles input[type=radio]:focus { outline:none; }
@container(max-width:239px) {
  .fk-contact .fk-radio-tiles .fk-choice { flex-direction:column; align-items:flex-start; }
  .fk-contact .fk-radio-tiles .fk-choice > span { width:100%; }
}
/* These programmatic destinations retain focus and announcements; their own coloured
   border communicates the status without an unrelated accent ring. Links keep theirs. */
.fk-contact :is(.fk-success,.fk-errors)[tabindex="-1"]:focus { outline:none; }
.fk-contact .fk-choice:hover { border-color:var(--fk-link); }
.fk-contact button[type=submit] { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.fk-contact .fk-spinner { display:none; width:16px; height:16px; flex-shrink:0; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; }
.fk-contact [aria-busy=true] .fk-spinner { display:inline-block; animation:fk-spin .9s linear infinite; }
.fk-contact [aria-busy=true] .fk-button-arrow { display:none; }
@keyframes fk-spin { to { transform:rotate(360deg); } }
.fk-contact .fk-success-card { border-inline-start-width:1px; padding:32px; }
.fk-contact .fk-success-card h3 { margin:16px 0 8px; font:inherit; font-size:1.5rem; font-weight:700; }
.fk-contact .fk-success-card h4 { margin:24px 0 8px; font:inherit; font-weight:700; }
.fk-contact .fk-success-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:2px solid var(--fk-success); border-radius:50%; color:var(--fk-success); font-size:1.5rem; }
.fk-contact .fk-success-card .fk-alternative { margin-block-start:24px; }
/* Non-colour error cue; existing forms keep their spacing. New sections/cards use the 8px grid. */
.fk-contact .fk-field-error::before { content:'!'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; margin-inline-end:8px; font-size:12px; }
.fk-contact :focus { outline-width:2px; }
@container(max-width:579px) {
  .fk-contact.fk-narrow-content:not(.fk-button-stretch) .fk-actions button { width:auto; }
  .fk-contact.fk-narrow-full .fk-actions button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .fk-contact [aria-busy=true] .fk-spinner { animation:none; } }
@media(forced-colors:active) {
  .fk-contact.fk-chevron-custom select { appearance:auto; -webkit-appearance:auto; }
  .fk-contact .fk-chevron { display:none; }
  .fk-contact .fk-radio-tiles .fk-choice:has(:checked) { border:2px solid Highlight!important; }
  .fk-contact .fk-radio-tiles .fk-choice:has(:checked)::after { color:Highlight; }
  .fk-contact .fk-radio-tiles .fk-choice:has(:focus-visible) { outline-color:Highlight; }
  .fk-contact .fk-success-icon { color:CanvasText; border-color:CanvasText; }
}

/* Opt-in conditional controls: author grid rules must respect the hidden state. */
.fk-contact .fk-field[hidden] { display:none!important; }