Invalid: add aria-invalid="true" to the control and the error line shows. */
.em-form { display: grid; gap: 20px; }
.em-form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.em-field { display: grid; gap: 8px; min-width: 0; }
.em-field__label { font-size: .9375rem; font-weight: 600; color: var(--em-text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.em-field__req, .em-field__opt { font-size: .8125rem; font-weight: 400; color: var(--em-text-muted); }
.em-field__help { font-size: .875rem; color: var(--em-text-muted); line-height: 1.4; }
.em-field__error { display: none; font-size: .875rem; font-weight: 500; color: var(--em-danger); line-height: 1.4; align-items: flex-start; gap: 8px; }
.em-field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px;
border-radius: 50%; background: var(--em-danger); color: var(--em-bg); font-size: 11px; font-weight: 800; }
.em-field:has([aria-invalid="true"]) .em-field__error, .em-field--error .em-field__error { display: flex; }
.em-field__success { font-size: .875rem; color: var(--em-success); }
.em-field__counter { justify-self: end; font-size: .8125rem; color: var(--em-text-muted); font-variant-numeric: tabular-nums; }
.em-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; min-width: 0; }
.em-fieldset legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: .9375rem; }
.em-input, .em-textarea, .em-select { box-sizing: border-box; width: 100%; min-height: var(--em-control-h); padding: 12px 16px; margin: 0;
border-radius: 14px; border: 0; color: var(--em-text); font-family: inherit; font-size: max(16px, 1rem); line-height: 1.3; /* 16px+ stops iOS zoom-on-focus */
background-color: var(--em-field-bg); box-shadow: inset 0 0 0 1px var(--em-field-border), var(--em-field-inset);
transition: box-shadow var(--em-dur-2) var(--em-ease-out), background-color var(--em-dur-2); appearance: none; -webkit-appearance: none; }
.em-input::placeholder, .em-textarea::placeholder { color: var(--em-text-muted); opacity: .85; }
.em-input:hover, .em-textarea:hover, .em-select:hover { box-shadow: inset 0 0 0 1px var(--em-text-muted), var(--em-field-inset); }
.em-page .em-input:focus, .em-page .em-textarea:focus, .em-page .em-select:focus,
.em-input:focus, .em-textarea:focus, .em-select:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--em-ember), 0 0 0 4px rgba(255,90,31,.22); }
.em-input[aria-invalid="true"], .em-textarea[aria-invalid="true"], .em-select[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--em-danger), 0 0 0 4px var(--em-danger-bg); }
.em-input--success { box-shadow: inset 0 0 0 1.5px var(--em-success), var(--em-field-inset); }
.em-input:disabled, .em-textarea:disabled, .em-select:disabled { opacity: var(--em-disabled-opacity); cursor: not-allowed; }
.em-input[readonly] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--em-rim); }
.em-input:-webkit-autofill { -webkit-text-fill-color: var(--em-text); box-shadow: inset 0 0 0 1px var(--em-field-border), inset 0 0 0 100px var(--em-autofill); caret-color: var(--em-text); }
.em-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.em-input[type="number"] { font-variant-numeric: tabular-nums; }
.em-textarea { min-height: 120px; resize: vertical; line-height: 1.5; max-height: 50vh; }
.em-select { padding-inline-end: 44px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A1A3B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 18px center; }
.em-select:dir(rtl) { background-position: left 18px center; }
.em-select option { background: var(--em-option-bg); color: var(--em-option-fg); }
/* Input with an icon or a button inside */
.em-input-group { position: relative; display: flex; align-items: center; min-width: 0; }
.em-input-group > .em-input { padding-inline-start: 44px; }
.em-input-group__icon { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: var(--em-text-muted); pointer-events: none; }
/* Inline signup (email + button): stacks when its container is narrow */
.em-inline-form { display: flex; gap: 10px; }
.em-inline-form > .em-input { flex: 1; min-width: 0; }
@container (max-width: 480px) { .em-inline-form { flex-direction: column; } .em-inline-form .em-btn { width: 100%; } }
/* Checkbox and radio: native inputs, restyled (keyboard and screen readers keep working) */
.em-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; min-height: var(--em-tap); padding-block: 10px; line-height: 1.4; }
.em-check input { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 22px; height: 22px; cursor: pointer;
border-radius: 7px; background: var(--em-field-bg); box-shadow: inset 0 0 0 1.5px var(--em-field-border), var(--em-field-inset);
display: inline-grid; place-content: center; transition: background var(--em-dur-1), box-shadow var(--em-dur-1); }
.em-check input[type="radio"] { border-radius: 50%; }
.em-check input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--em-dur-2) var(--em-ease-spring); background: #fff; }
.em-check input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.em-check input[type="radio"]::before { width: 9px; height: 9px; border-radius: 50%; }
.em-check input:checked, .em-check input:indeterminate { background: radial-gradient(120% 140% at 50% 0%, #FF9A5C, #F2510F); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(210,70,10,.55), 0 2px 8px rgba(255,90,31,.35); }
.em-check input:checked::before { transform: scale(1); }
.em-check input:indeterminate::before { clip-path: none; height: 2px; width: 10px; transform: scale(1); }
.em-page .em-check input:focus-visible, .em-check input:focus-visible { box-shadow: var(--em-focus-ring); }
.em-check input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--em-danger); }
.em-check:has(input:disabled) { opacity: var(--em-disabled-opacity); cursor: not-allowed; }
.em-check small { display: block; color: var(--em-text-muted); font-size: .875rem; }
/* Option card: a whole card that selects (plan or session pickers) */
.em-option { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; cursor: pointer; min-width: 0;
background: var(--em-fill-1); box-shadow: inset 0 0 0 1px var(--em-rim); transition: box-shadow var(--em-dur-2), background var(--em-dur-2); }
.em-option:hover { background: var(--em-fill-2); }
.em-option input { flex: none; margin-top: 2px; accent-color: var(--em-ember); width: 20px; height: 20px; }
.em-option:has(input:checked) { background: rgba(255,90,31,.08); box-shadow: inset 0 0 0 1.5px var(--em-ember); }
.em-option:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--em-ember), var(--em-focus-ring); }
.em-option:has(input:disabled) { opacity: var(--em-disabled-opacity); cursor: not-allowed; }
/* Switch: 