A Floating Minimal
No card, no fill — underline-only inputs, uppercase micro-labels, ink submit pill. The most invisible / typographic option.
Variant note — For DARK hosts: flip the 5 color tokens to white-text (INK #f4f5f7, underline rgba(255,255,255,.34), white submit pill w/ dark text). Structure is identical.
B Frosted Panel
Transparent container; each field on a translucent frosted fill + hairline border + backdrop-blur. Readable over any background.
Variant note — Dark-frosted flip for dark hosts: FILL rgba(20,22,30,.55), BORDER rgba(255,255,255,.14), INK #f4f5f7. Same structure.
C Glass
Premium glassmorphism — 55% white fills, blur(16px) saturate(1.25), inset top highlight + soft drop shadow, 16px radius. Shines over photo/color.
Variant note — Dark-glass flip for dark hosts: FILL rgba(18,18,24,.45) + white text/labels (INK #f4f5f7, LABEL #e7e9ef). Keep the inset highlight + blur.
D Bold Outline
Linear/Figma register — transparent fills, crisp 1.5px ink borders, 50px tall fields, small letter-spaced uppercase labels. Indigo focus ring (0 0 0 4px).
Variant note — For DARK hosts: border to rgba(255,255,255,.22), INK #f1f2f5, labels light. Accent stays indigo.
E Floating Label
Compact, modern — CSS-only animated floating label (label rests inside the field, lifts to the top border on focus/fill). Light frosted fill, teal accent.
Variant note — Native $enableAnimatedLabels is a NO-OP on these embed forms (persists in settings, no .animated-form-label wrapper rendered) — this uses a CSS-only :has() floating label instead. See the rest→active proof below.
Optical-polish proof — the single left "content line"
Crop of Variant B (rounded frosted) over a flat surface. Every label's text-start, the select prompt, and the radio rings all begin on one consistent left content line that sits a few px inside the field's rounded corner — nothing overhangs the radius, and the radio rings are inset to the same line (not flush/overhanging). This rule (label inset + radio/checkbox inset) is applied to all five variants.
Variant E — CSS-only floating label proof (rest → active)
Native $enableAnimatedLabels persists in form settings but the embed render never emits the .form-group.animated-form-label wrapper, so it has no visible effect. The shipped E uses a :has()-driven CSS floating label: the label rests inside the field as a faux-placeholder, then lifts to the top border (top: -8px, 11px, teal) on :focus or when filled (:not(:placeholder-shown)). Real placeholder is revealed only while focused.
