:root {
	--careos-brand: #2b59ff;
	--careos-brand-tint: #f2f5ff;
	--careos-ink: #1a1a2e;
	--careos-muted: #555;
	--careos-muted-soft: #777;
	--careos-muted-strong: #333;
	--careos-step-idle: #9a9aac;
	--careos-step-num: #6b6b80;
	--careos-track: #e2e2ec;
	--careos-border: #c9c9d4;
	--careos-border-soft: #d7d7e2;
	--careos-surface: #fff;
	--careos-success: #19c37d;
	--careos-danger: #b00;
	--careos-radius: .4rem;
	--careos-font: system-ui, sans-serif;
}

[x-cloak] { display: none !important; }

.careos-enroll { max-width: 34rem; margin: 2rem auto; font-family: var(--careos-font); color: var(--careos-ink); }
.careos-enroll h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.careos-enroll .ce-sub { margin: 0 0 1rem; color: var(--careos-muted); }
.careos-enroll label { display: block; margin: .75rem 0; font-weight: 600; }
.careos-enroll input,
.careos-enroll select { display: block; width: 100%; padding: .55rem; margin-top: .3rem; font: inherit;
	border: 1px solid var(--careos-border); border-radius: var(--careos-radius); box-sizing: border-box; font-weight: 400; }
.careos-enroll button { padding: .6rem 1.3rem; font: inherit; cursor: pointer; border-radius: var(--careos-radius);
	border: 1px solid var(--careos-brand); background: var(--careos-brand); color: var(--careos-surface); }
.careos-enroll button:disabled { opacity: .45; cursor: not-allowed; }
.careos-enroll .ce-err { color: var(--careos-danger); min-height: 1.2em; margin: .5rem 0 0; }
.careos-enroll .ce-hp { position: absolute; left: -9999px; }

/* stepper */
.ce-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.25rem; gap: .25rem; counter-reset: s; }
.ce-steps li { flex: 1; text-align: center; font-size: .72rem; color: var(--careos-step-idle); padding-top: 1.4rem; position: relative; }
.ce-steps li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%;
	transform: translateX(-50%); width: 1.1rem; height: 1.1rem; line-height: 1.1rem; border-radius: 50%;
	background: var(--careos-track); color: var(--careos-step-num); font-weight: 700; }
.ce-steps li.active { color: var(--careos-brand); font-weight: 700; }
.ce-steps li.active::before { background: var(--careos-brand); color: var(--careos-surface); }
.ce-steps li.done::before { content: "\2713"; background: var(--careos-success); color: var(--careos-surface); }

/* plan cards */
.ce-plans { display: grid; gap: .6rem; }
/* .careos-enroll prefix is load-bearing: `.careos-enroll button` (0,1,1) would
   otherwise beat a bare `.ce-plan` (0,1,0) and paint the cards solid brand-blue
   with the price teaser blue-on-blue (AB#629 C2). */
.careos-enroll .ce-plan { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
	background: var(--careos-surface); color: inherit; border: 2px solid var(--careos-border-soft); padding: .8rem 1rem; gap: .15rem; }
.careos-enroll .ce-plan:hover { border-color: var(--careos-brand); }
.careos-enroll .ce-plan.selected { border-color: var(--careos-brand); background: var(--careos-brand-tint); }
.ce-plan-name { font-weight: 700; font-size: 1.05rem; }
.ce-plan-price { color: var(--careos-brand); font-weight: 700; }
.ce-plan-desc { color: var(--careos-muted); font-size: .85rem; }

/* coverage choices */
.ce-choices { display: grid; gap: .5rem; }
.ce-choices button { background: var(--careos-surface); color: inherit; border: 2px solid var(--careos-border-soft); text-align: left; }
.ce-choices button.selected { border-color: var(--careos-brand); background: var(--careos-brand-tint); }

/* household row — min-width:0 lets the flexed labels shrink below their
   content width instead of overflowing (AB#630); descendant selector so any
   future nesting inside the row stays guarded. The AB#630 block below restates
   this with .careos-enroll specificity against host-theme label rules. */
.ce-row { display: flex; gap: 1rem; }
.ce-row label { flex: 1; min-width: 0; }

/* consent checkbox + captcha */
.careos-enroll .ce-check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; margin: 1rem 0; }
.careos-enroll .ce-check input { display: inline; width: auto; margin: .15rem 0 0; }
.careos-enroll .cf-turnstile { margin: 1rem 0; }

/* nav row */
.ce-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.ce-nav .ce-back { background: transparent; color: var(--careos-muted); border-color: var(--careos-border); }

/* physician cards reuse .ce-plan/.ce-plans; add disabled-at-capacity affordance */
.ce-plans .ce-plan:disabled { opacity: .5; cursor: not-allowed; }
.ce-plans .ce-plan:disabled:hover { border-color: var(--careos-border-soft); }

/* restart escape hatch — unobtrusive footer link, not a primary action */
.careos-enroll .ce-restart-row { margin: 2rem 0 0; text-align: center; }
.careos-enroll .ce-restart { background: transparent; border: none; padding: .2rem .4rem;
  color: var(--careos-muted-soft); font-size: .85rem; text-decoration: underline; }
.careos-enroll .ce-restart:hover { color: var(--careos-muted-strong); }

/* the return step's claim hand-off renders as an <a>, not a <button> — reuse .ce-plan's look */
a.ce-plan { display: inline-block; text-decoration: none; }

/* Return-step "Confirming your payment…" spinner so the poll doesn't read as frozen. */
.careos-enroll .ce-wait { display: flex; align-items: center; gap: .75rem; }
.careos-enroll .ce-spinner {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 3px solid var(--careos-border-soft); border-top-color: var(--careos-brand);
  animation: ce-spin .8s linear infinite;
}
@keyframes ce-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .careos-enroll .ce-spinner { animation-duration: 2s; }
}
/* subtle pulse on the reassurance line while waiting */
.careos-enroll .ce-wait-note { color: var(--careos-muted-soft); animation: ce-pulse 1.6s ease-in-out infinite; }
@keyframes ce-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* AB#658: in-market celebration — success-green heading with a single gentle
   entrance pop; the proof line follows a beat later. Deliberately restrained
   (medical purchase, no confetti); both animations are one-shot. */
.careos-enroll .ce-celebrate { color: var(--careos-success); animation: ce-pop .45s ease-out both; }
.careos-enroll .ce-celebrate-sub { color: var(--careos-muted-strong); animation: ce-pop .45s ease-out .15s both; }
@keyframes ce-pop { 0% { opacity: 0; transform: translateY(.4rem) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .careos-enroll .ce-celebrate, .careos-enroll .ce-celebrate-sub { animation: none; }
}

/* per-field validation feedback (AB#629 C3) */
.careos-enroll .ce-err-field { color: var(--careos-danger); font-size: .85rem; margin: .25rem 0 0; }
.careos-enroll .ce-field-error,
.careos-enroll input.ce-field-error { border-color: var(--careos-danger); }

/* stack multi-column identity rows on narrow screens (AB#629 I7) */
@media (max-width: 30rem) {
	.careos-enroll .ce-row { flex-direction: column; gap: .25rem; }
}

/* household fieldsets (AB#575 / AB#630) — explicit layout so a host theme's
   fieldset/legend rules (flexbox form frameworks, floated legends) cannot
   reflow the sections: on wowmktg the legend rendered as a flex ITEM with the
   first dependent row squeezed beside it. Every rule here restates the
   browser-default block model on purpose. */
.careos-enroll fieldset.ce-household { display: block; min-width: 0; border: 1px solid var(--careos-border-soft);
	border-radius: var(--careos-radius); padding: .25rem 1rem 1rem; margin: 1.25rem 0 0; }
.careos-enroll fieldset.ce-household legend { display: block; float: none; width: auto; margin: 0;
	padding: 0 .35rem; font-weight: 700; font-size: 1.05rem; color: var(--careos-ink); }
.careos-enroll .ce-dep { display: block; margin: .25rem 0 0; }
.careos-enroll .ce-dep + .ce-dep { border-top: 1px dashed var(--careos-border-soft); padding-top: .6rem; margin-top: .85rem; }
.careos-enroll .ce-row label { flex: 1 1 0; min-width: 0; }
.careos-enroll .ce-hint { color: var(--careos-muted); font-size: .85rem; margin: .25rem 0 0; }
.careos-enroll .ce-price { font-weight: 700; margin: 1rem 0 0; }
.careos-enroll .ce-spouse-pick { display: block; margin: .75rem 0 0; padding: .75rem 1rem;
	border: 1px solid var(--careos-border-soft); border-radius: var(--careos-radius); }