/* Self-hosted fonts keep enrollment requests on this origin. */
@font-face { font-family: "Domine"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/domine-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.ttf") format("truetype"); }

/*
 * The onboarding walk is a warm, editorial surface rather than a compact
 * application shell. Components consume semantic tokens from tokens.css;
 * motion lives separately in motion.css so navigation never depends on it.
 *
 * Coral remains a fill, never readable text. Default controls, selected
 * controls, and keyboard focus share one burgundy hue. Their geometry carries
 * meaning: 1px at rest, 4px when selected, and one offset outline for focus.
 */

*,
*::before,
*::after { box-sizing: border-box; }

/* The minimum viewport must not double when a person enlarges text. */
html { min-width: 320px; background: var(--surface-page); -webkit-text-size-adjust: 100%; }

body.enroll-page {
  min-height: 100dvh;
  margin: 0;
  background: radial-gradient(circle at 100% 0%, var(--surface-subtle) 0, transparent min(36rem, 52vw)), var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-body-default);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
}

button, input, select, textarea { font: inherit; }

.enroll-skip {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: -9999px;
  z-index: 60;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-small);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
  text-decoration: none;
}

.enroll-skip:focus-visible { inset-inline-start: var(--space-3); }

/* ---------------------------------------------------------------- progress */

.enroll-progress {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  height: 6px;
  overflow: hidden;
  background: var(--progress-track);
}

.enroll-progress__fill { height: 100%; background: var(--progress-fill); }

/* ------------------------------------------------------------------ layout */

.enroll {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--content-measure) + (2 * var(--page-gutter))));
  min-height: 100dvh;
  margin-inline: auto;
  padding: var(--page-space-start) var(--page-gutter) var(--page-space-end);
}

.enroll__monogram {
  display: block;
  width: 25px;
  height: 50px;
  margin-block-end: var(--space-3);
  flex: none;
}

.enroll__back { min-height: 44px; }

.enroll__back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--text-muted);
  font-size: var(--font-body-small);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.enroll__head { margin-block-start: clamp(1.25rem, 4vh, 2.5rem); }

.enroll__headline {
  max-width: 16ch;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-display-screen-large);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-display);
  text-wrap: balance;
}

.enroll__sub {
  max-width: 38rem;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--font-body-large);
  line-height: 1.55;
  text-wrap: pretty;
}

.enroll__body { flex: 1; margin-block-start: var(--section-space); }
.enroll__prose { max-width: 40rem; }

.enroll__prose p,
.enroll__notice {
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
  font-size: var(--font-body-default);
  line-height: 1.65;
}

.enroll__lede {
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-body-large);
  line-height: 1.5;
}

.enroll__aside {
  max-width: 38rem;
  margin: var(--space-8) 0 0;
  color: var(--text-muted);
  font-size: var(--font-body-small);
  line-height: 1.6;
}

.enroll-terms { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

.enroll-terms li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--text-primary);
  font-size: var(--font-body-default);
  line-height: 1.65;
}

.enroll-terms li::before { position: absolute; inset-inline-start: var(--space-1); color: var(--text-muted); content: "·"; }

.enroll__error {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--feedback-error-border);
  border-inline-start-width: 4px;
  border-radius: var(--radius-small);
  background: var(--feedback-error-background);
  color: var(--feedback-error-text);
  box-shadow: var(--shadow-resting);
  font-size: var(--font-body-default);
  font-weight: 700;
}

.enroll__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: var(--space-10); }
.enroll__actions--stacked { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.enroll__contact { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }

.enroll__footnotes { margin-block-start: var(--space-12); padding-block-start: var(--space-5); border-block-start: 1px solid var(--divider); }
.enroll__footnotes ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.enroll__footnotes li { color: var(--text-muted); font-size: var(--font-caption); line-height: var(--line-height-caption); }
.enroll__footnotes sup { margin-inline-end: var(--space-1); }

.enroll-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- options */

.enroll-options { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.enroll-option {
  display: flex;
  width: 100%;
  min-height: var(--choice-min-height);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-background);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
}

.enroll-option__label { text-wrap: pretty; }

.enroll-option__marker {
  display: flex;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-pill);
}

.enroll-option--selected,
.enroll-option[data-state="selected"] {
  border: 3px solid var(--control-border-selected);
  padding: calc(var(--space-4) - 2px) calc(var(--space-6) - 2px);
}

.enroll-option--selected .enroll-option__marker { border-color: var(--control-border-selected); background: var(--selection-fill); }
.enroll-option:disabled { opacity: 0.55; cursor: not-allowed; }

/* An option that is shown without being available. The note takes a full row of
   its own so it reads as sub-text under the label rather than a badge beside it;
   wrapping is scoped to this modifier so an ordinary option's marker and label
   cannot start wrapping on a narrow screen. */
.enroll-option--disabled { flex-wrap: wrap; }

.enroll-option__note {
  flex-basis: 100%;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Revising: the same option list, driven by radio inputs instead of submit
   buttons, so choosing moves the selection and writes nothing. The input stays
   in the accessibility tree and out of the layout -- the label is the visible
   control and the input is what announces "selected" -- which is the same trick
   the joy chips use. */
.enroll-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.enroll-options--revising .enroll-option {
  width: 100%;
}

.enroll-option__input:checked + .enroll-option {
  border: 3px solid var(--control-border-selected);
  padding: calc(var(--space-4) - 2px) calc(var(--space-6) - 2px);
}

.enroll-option__input:checked + .enroll-option .enroll-option__marker {
  border-color: var(--control-border-selected);
  background: var(--selection-fill);
}

/* Keyboard users have to be able to see where they are while arrowing through a
   radio group, and the input itself is off-screen. */
.enroll-option__input:focus-visible + .enroll-option {
  outline: 2px solid var(--control-focus-ring);
  outline-offset: 2px;
}

/* A quiet secondary route, below the primary action and deliberately not
   competing with it: the jump is the prospect's to take, not the one being
   urged on them. */
.enroll__skip-ahead {
  margin: 1.5rem 0 0;
  font-size: 1rem;
}

.enroll__skip-ahead a {
  color: var(--text-muted);
}

/* A recorded answer, behind the freeze. The same shape as the option it was
   chosen from -- so somebody recognises the screen they answered -- with the
   affordances of a control removed: no pointer, no hover, nothing that offers a
   press this screen would refuse. */
.enroll-option--recorded {
  cursor: default;
}

.enroll-option--recorded:hover {
  border-color: var(--control-border);
}

.enroll-option--recorded.enroll-option--selected:hover {
  border-color: var(--control-border-selected);
}

.enroll-chip--recorded {
  cursor: default;
  border: 3px solid var(--control-border-selected);
  padding: calc(var(--space-2) - 2px) calc(var(--space-4) - 2px);
  font-weight: 600;
}

.enroll-chip--recorded:hover {
  border-color: var(--control-border-selected);
}

/* A value shown back rather than offered for editing: the field's label kept as
   a label so the answer is still named, and the answer itself as text. */
.enroll-recorded {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.enroll-recorded__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- tiers */

/* Recommendation cards remain one fluid column at every viewport. */
.enroll--recommendation { --page-space-start: 4.5rem; --page-space-end: 6.75rem; --section-space: 2.25rem; }
.enroll--recommendation .enroll__back { min-height: 19px; }
/* Preserve a 44px Back target while matching the reference's text spacing. */
.enroll--recommendation .enroll__back-link { margin-block: -12.5px; }
.enroll--recommendation .enroll__head { margin-block-start: 2.5rem; }
.enroll--recommendation .enroll__headline { max-width: none; font-size: clamp(2rem, 4vw, 3rem); }
.enroll-tier-lede { margin: var(--space-5) 0 0; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.875rem); line-height: 1.4; }
.enroll-tier-lede mark { background: var(--surface-tier-highlight); color: inherit; padding: .06em .12em; border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.enroll-tier-group + .enroll-tier-group { margin-block-start: 2.25rem; }
.enroll-tier-group__heading { border-bottom: 1px solid var(--divider); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
.enroll-tier-group__heading h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.625rem); line-height: 1.25; margin: 0; }
.enroll-tier-group__heading p { color: var(--text-muted); margin: var(--space-1) 0 0; font-size: 1rem; }
.enroll-tiers { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.enroll-tier { min-width: 0; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface-card); overflow-wrap: anywhere; }
.enroll-tier--recommended { background: var(--surface-tier-feature); color: var(--text-tier-feature); padding: clamp(1.25rem, 4vw, 2.25rem); border-color: var(--surface-tier-feature); }
.enroll-tier--selected { outline: 3px solid var(--selection-ring); outline-offset: 3px; }
.enroll-tier__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.enroll-tier__title { flex: 1 1 15rem; min-width: 0; }
.enroll-tier__name { margin: 0; color: inherit; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.875rem); font-weight: 400; line-height: 1.2; }
.enroll-tier__audience { display: block; margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 1rem; line-height: 1.4; }
.enroll-tier__badge-pill { display: inline-flex; align-items: center; padding: .45rem .75rem; border-radius: var(--radius-pill); background: var(--selection-fill); color: var(--text-on-accent); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.enroll-tier__price { display: block; margin: 0; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.25; color: inherit; }
.enroll-tier__details > .enroll-tier__price { margin-top: var(--space-6); font-size: clamp(2.5rem, 5vw, 3.25rem); }
.enroll-tier__details > .enroll-tier__price--coming-soon { font-size: clamp(2rem, 4vw, 2.5rem); }
.enroll-tier__price.enroll-tier__price--pending { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.enroll-tier__summary { cursor: pointer; padding: clamp(1.25rem, 4vw, 1.875rem); list-style: none; min-height: var(--control-min-height); border-radius: var(--radius-card); }
.enroll-tier__summary::-webkit-details-marker { display: none; }
.enroll-tier__summary-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; font-weight: 400; }
.enroll-tier__meta { display: flex; flex: 0 1 13rem; flex-direction: column; align-items: flex-end; gap: var(--space-2); min-width: 0; font-family: var(--font-body); font-size: 1rem; }
.enroll-tier__status { display: inline-block; color: var(--text-muted); font-size: .6875rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--selection-fill); border-radius: var(--radius-pill); padding: .3rem .75rem; }
.enroll-tier__chevron { flex: none; width: 20px; height: 20px; transition: transform var(--motion-fast) var(--ease-standard); }
.enroll-tier__disclosure[open] .enroll-tier__chevron { transform: rotate(180deg); }
.enroll-tier__disclosure[open] .enroll-tier__collapsed-price,
.enroll-tier__disclosure[open] .enroll-tier__collapsed-geography { display: none; }
.enroll-tier__disclosure[open] .enroll-tier__summary { padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.25rem) 0; }
.enroll-tier__disclosure[open] .enroll-tier__summary-layout { align-items: flex-start; }
.enroll-tier__disclosure[open] .enroll-tier__meta { flex-basis: auto; }
.enroll-tier__disclosure[open] .enroll-tier__name { font-size: clamp(1.4rem, 3vw, 1.875rem); }
.enroll-tier__summary:focus-visible { outline: 3px solid var(--control-focus-ring); outline-offset: 4px; }
.enroll-tier__details { min-width: 0; }
.enroll-tier__disclosure > .enroll-tier__details { padding: 0 clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.25rem); }
.enroll-tier__description { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: 1rem; line-height: 1.6; }
.enroll-tier__benefits { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 0; border-top: 1px solid var(--divider); padding: var(--space-6) 0 0; list-style: none; }
.enroll-tier__benefits li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 1rem; line-height: 1.4; }
.enroll-tier__benefits img { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
.enroll-tier__geography { display: block; margin: var(--space-2) 0 0; color: var(--text-muted); font-family: var(--font-body); font-size: .75rem; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.enroll-tier__details > .enroll-tier__geography { margin-top: var(--space-6); }
.enroll-tier__fee { margin: .375rem 0 0; font-size: .875rem; color: var(--text-muted); }
.enroll-tier__sponsored { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--divider-subtle, var(--selection-fill)); display: flex; flex-direction: column; gap: var(--space-2); font-size: 1rem; }
.enroll-tier__sponsored > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.enroll-tier__sponsored dt { margin: 0; color: var(--text-muted); }
.enroll-tier__sponsored dd { margin: 0; font-variant-numeric: tabular-nums; }
.enroll-tier__sponsored-total { padding-top: var(--space-2); border-top: 1px solid var(--divider-subtle, var(--selection-fill)); font-weight: 600; }
.enroll-tier__sponsored-total dt, .enroll-tier__sponsored-total dd { color: inherit; }
.enroll-tier--recommended .enroll-tier__sponsored dt { color: var(--text-tier-feature-muted); }
.enroll-tier--recommended .enroll-tier__sponsored, .enroll-tier--recommended .enroll-tier__sponsored-total { border-color: var(--divider-tier-feature); }
.enroll-tier--recommended .enroll-tier__fee, .enroll-tier--recommended .enroll-tier__audience, .enroll-tier--recommended .enroll-tier__description, .enroll-tier--recommended .enroll-tier__geography, .enroll-tier--recommended .enroll-tier__status { color: var(--text-tier-feature-muted); }
.enroll-tier--recommended .enroll-tier__benefits { border-color: var(--divider-tier-feature); }
.enroll-tier--recommended .enroll-tier__cta { --action-primary-background: var(--surface-card); --action-primary-background-hover: var(--surface-page); --action-primary-foreground: var(--surface-tier-feature); --action-focus-ring: var(--text-tier-feature); height: auto; }
.enroll-tier .enroll-button--secondary { --action-secondary-border: var(--control-border); --action-secondary-foreground: var(--text-primary); }
.enroll-tier .enroll-tier__cta { margin-top: var(--space-5); min-height: 60px; height: auto; font-size: 1.1875rem; }
.enroll-tiers__notes { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }
.enroll-tiers__notes p { margin: 0; }
.enroll-tiers__notes p:first-child { font-size: .875rem; }
.enroll-tiers__aside { margin-top: var(--space-6); }
@media (max-width: 36rem) {
  .enroll-tier__meta { flex-basis: 100%; align-items: flex-start; }
  .enroll-tier__chevron { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .enroll-tier__chevron { transition: none; } }

/* ------------------------------------------------------- buttons and links */

.enroll-button {
  display: inline-flex;
  width: var(--action-width);
  max-width: 100%;
  height: var(--control-min-height);
  min-height: var(--control-min-height);
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--action-primary-background);
  color: var(--action-primary-foreground);
  cursor: pointer;
  font-size: var(--font-action);
  font-weight: 700;
  line-height: var(--line-height-action);
  text-align: center;
  text-decoration: none;
}

.enroll-button--secondary { border-color: var(--action-secondary-border); background: var(--action-secondary-background); color: var(--action-secondary-foreground); }
.enroll-button:disabled { opacity: 0.55; cursor: not-allowed; }
.enroll-button.enroll-tier__cta { width: 100%; }

/* Sized by its label, not by the button grid.
 *
 * This used to be a flat 10rem, borrowed from the button so that a text action
 * would line up under one. A link is a sentence, though, not a control with a
 * fixed footprint: anything longer than about two short words wrapped inside
 * the box while the copy around it had the full measure. The tap target is
 * held by `min-height`, which is what the 44px rule actually asks for.
 *
 * `fit-content` rather than no width at all: `.enroll__contact` is a flex
 * column, and a link left to stretch there would take the full measure and
 * centre its own words inside it. */
.enroll-textlink {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-action);
  font-weight: 600;
  line-height: var(--line-height-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.enroll-textlink:disabled { opacity: 0.55; cursor: not-allowed; }

/* Prose links, and the quiet route out of a screen -- "I'd rather speak to
 * someone", the billing address on the last screen. Not `.enroll-textlink`:
 * that one is an action, sized and centred like the button it stands in for,
 * and a 10rem centred box inside a sentence is not a sentence any more.
 *
 * Every link on this surface carries a class. An anchor without one falls
 * through to the browser's #0000EE, which is the one colour the walk never
 * uses -- and the paragraph's own colour cannot save it, because the UA's
 * `a:-webkit-any-link` is a direct match and beats what it would inherit.
 *
 * Muted rather than `inherit`: in `.enroll__aside` the two are the same, and
 * on a `.enroll__contact` line muted is what says "this is the way out, not
 * the way on". */
.enroll-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The standalone form: a link that is the whole line, pressed by a thumb
 * rather than read inside a sentence. WCAG 2.5.8 measures the target and not
 * the text, and the text alone is 27px on the contact line and 18px on the
 * skip-ahead -- under the 24px floor in the second case, and uncomfortable in
 * both. Inline-flex rather than `.enroll-textlink`'s box because the words
 * stay at the leading edge: this is the way out of a screen, not an action to
 * centre under the headline. Prose links keep the inline treatment, which
 * 2.5.8 exempts. */
.enroll-link--standalone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ------------------------------------------------------------------ pending */

/* The press has been sent and the answer is on the wire.
 *
 * Applied by `submit-feedback.js` 150ms after the submit was dispatched, never
 * before it, and only when the response has not already arrived -- so a fast
 * connection never renders this state at all and a screen with no JavaScript
 * never needs it. The geometry is borrowed from the resting control rather
 * than replacing it: the same size, the same border, the same words on a
 * choice, so the control does not move under a thumb that is still on it.
 *
 * `opacity` is restated because the script disables the control it marks, and
 * the disabled treatment says "you may not press this" -- true, but not the
 * thing to say here. The thing to say is "this one is running". */
.enroll-button[data-state="pending"],
.enroll-textlink[data-state="pending"],
.enroll-option[data-state="pending"] {
  opacity: 1;
  cursor: progress;
}

/* Both inline actions, so both space the mark off the label. A choice is
   excluded on purpose: its mark is pushed to the trailing edge below. */
.enroll-button[data-state="pending"],
.enroll-textlink[data-state="pending"] { gap: var(--space-3); }

/* A link cannot carry `disabled`, so the script marks it `aria-disabled`
   and this is what actually stops the second press. Buttons take the real
   attribute and need no help. */
.enroll-button[aria-disabled="true"],
.enroll-textlink[aria-disabled="true"] { pointer-events: none; }

/* Trailing on a choice, where the label keeps the leading edge, and inline on
   an action, where the swapped label and the mark read as one phrase. */
.enroll-option[data-state="pending"]::after { margin-inline-start: auto; }

.enroll-button[data-state="pending"]::after,
.enroll-textlink[data-state="pending"]::after,
.enroll-option[data-state="pending"]::after {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  border-block-start-color: transparent;
  content: "";
}

/* ------------------------------------------------------------------- chips */

.enroll-chips { margin-block-start: var(--space-2); }
.enroll-chips__label { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--font-body-small); }
.enroll-chips__list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.enroll-chip {
  display: inline-flex;
  height: var(--control-min-height);
  min-height: var(--control-min-height);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--control-background);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-action);
  line-height: var(--line-height-action);
}

.enroll-chip__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Selection on an input follows `:checked` and nothing else. The template also
   renders `data-state` here, but that attribute is the *server's* answer at
   render time and nothing updates it when somebody clicks: keying selection off
   it too left a radio still wearing its border and tick after the selection had
   moved to another one, and a checkbox looking ticked while it submitted
   unticked. `:checked` is the browser's live answer. Do not pair them again. */
.enroll-chip__input:checked + .enroll-chip {
  gap: var(--space-3);
  border: 4px solid var(--control-border-selected);
  padding: calc(var(--space-3) - 3px) calc(var(--space-6) - 3px);
  font-weight: 600;
}

.enroll-chip__input:checked + .enroll-chip::before { color: var(--control-border-selected); content: "✓"; font-weight: 900; }

.enroll-chip:disabled,
.enroll-chip__input:disabled + .enroll-chip { opacity: 0.55; cursor: not-allowed; }

/* --------------------------------------------------------- multiple choice */

.enroll-multi-choices { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.enroll-multi-choice {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-background);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-action);
  font-weight: 600;
  line-height: 1.5rem;
}

.enroll-multi-choice::after {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--control-border);
  border-radius: 0.375rem;
  background: var(--control-background);
  color: var(--text-on-action);
  content: "";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.enroll-chip__input:checked + .enroll-multi-choice {
  border: 4px solid var(--control-border-selected);
  padding: calc(var(--space-4) - 3px) calc(var(--space-5) - 3px);
}

.enroll-chip__input:checked + .enroll-multi-choice::after { background: var(--control-border-selected); content: "✓"; }
.enroll-chip__input:disabled + .enroll-multi-choice { opacity: 0.55; cursor: not-allowed; }

/* -------------------------------------------------------------------- slots */

.enroll-slots { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.enroll-slot {
  display: flex;
  width: 100%;
  height: var(--choice-min-height);
  min-height: 72px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-background);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-action);
  line-height: 1.5rem;
  text-align: start;
}

.enroll-chip__input:checked + .enroll-slot {
  gap: var(--space-3);
  border: 4px solid var(--control-border-selected);
  padding: calc(var(--space-4) - 3px) calc(var(--space-6) - 3px);
  font-weight: 600;
}

.enroll-chip__input:checked + .enroll-slot::before { color: var(--control-border-selected); content: "✓"; font-weight: 900; }

.enroll-chip__input:disabled + .enroll-slot { opacity: 0.55; cursor: not-allowed; }

/* ------------------------------------------------------------------ fields */

.enroll-form { display: flex; flex-direction: column; gap: var(--space-6); }
/* An aside that introduces the form -- the agreement screen links the full
   document above the tick box -- is its own thought, not the first line of
   the consent. */
.enroll__aside + .enroll-form { margin-block-start: var(--space-6); }
/* A follow-up field under a multi-select -- the wearable screen's "What is it?"
   -- stands off the last option by the same step `.enroll-form` puts between
   the joy question's list and its free text. Scoped to the forms that do not
   carry that rhythm: the wearable form is not an `.enroll-form`, because its
   aside and its button already bring their own margins and the flex gap would
   compound with both. Inside an `.enroll-form` the gap is already there, and
   this rule would double it. */
form:not(.enroll-form) > .enroll-multi-choices + .enroll-field { margin-block-start: var(--space-6); }
.enroll-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); }
.enroll-field { display: flex; min-width: 0; flex-direction: column; gap: 0.375rem; }
.enroll-field__label { display: block; color: var(--text-primary); font-size: 1.0625rem; font-weight: 700; line-height: normal; }
.enroll-field__hint { margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.25rem; }

.enroll-field__input {
  display: block;
  width: 100%;
  height: var(--control-min-height);
  min-height: var(--control-min-height);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-background);
  color: var(--text-primary);
  font-size: var(--font-action);
  line-height: var(--line-height-action);
}

.enroll-field__input[aria-invalid="true"] { border-width: 4px; padding: calc(var(--space-4) - 3px) calc(var(--space-5) - 3px); }
.enroll-field__input:disabled { opacity: 0.55; cursor: not-allowed; }
.enroll-field__input--narrow { max-width: min(100%, 12.5rem); }

/* One field for a date, and the width is borrowed rather than invented: the
   system declares --narrow (12.5rem) and --code (15rem), and this is the --code
   width. Declared once, here, so the background and the border that is supposed
   to contain it can never be different sizes. */
.enroll-date { min-width: 0; }
.enroll-date__shell {
  position: relative;
  max-width: min(100%, 15rem);
  border-radius: var(--radius-control);
  background: var(--control-background);
}

/* The input is transparent so the template behind it shows through, which is
   why the control's background moved out to the shell above. */
.enroll-date__input { width: 100%; background: transparent; }

/* The template has to be the input's box, not merely the same size as it: the
   input carries a border that insets its text and a line-height of its own, and
   both have to be reproduced here or the two sit a pixel apart. `white-space:
   pre` keeps the space before each separator, which a flex container strips
   from a bare text node. */
.enroll-date__ghost {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  inset: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  color: var(--text-placeholder);
  font-size: var(--font-action);
  line-height: var(--line-height-action);
  white-space: pre;
  pointer-events: none;
}
.enroll-date__input { position: relative; z-index: 1; }

/* The typed half of the template, kept in the DOM as an invisible spacer: it is
   the same string in the same font as the input renders, so what remains starts
   exactly where the text ends without measuring anything. */
.enroll-date__eaten { visibility: hidden; }

/* Each template letter in a cell one digit wide, scaled to fit it, so the
   template holds still as digits replace it. The custom properties are measured
   by date-field.js after the webfont lands; the fallbacks are Inter's ratios at
   the sizes this flow uses. */
.enroll-date__cell {
  display: inline-block;
  width: var(--date-digit-width, 1ch);
  text-align: center;
  transform-origin: center;
}
.enroll-date__cell--M { transform: scaleX(var(--date-scale-M, 0.717)); }
.enroll-date__cell--D { transform: scaleX(var(--date-scale-D, 0.898)); }
.enroll-date__cell--Y { transform: scaleX(var(--date-scale-Y, 0.955)); }

/* The first ::placeholder rule in this file, and the reason --text-placeholder
   exists: the browser default is not a decision, and --text-muted sits too close
   to the typed value to read as unanswered. `opacity: 1` because Firefox applies
   its own on top of the colour. */
.enroll-date__input::placeholder { color: var(--text-placeholder); opacity: 1; }

/* With the script running, the ghost draws the template instead. */
.has-date-field-js .enroll-date__input::placeholder { color: transparent; }

/* A message about the field belongs under the field, where it is read in the
   order it is acted on. #screen-error keeps the page-level slot. */
.enroll-date__message,
.enroll-date__outcome { max-width: min(100%, 30rem); margin-block-start: var(--space-4); }

/* The outcome is not an error and must not wear the error treatment: the person
   has mistyped nothing. Same box as the message, and only the edge differs --
   which is the only thing that differs between the two feedback token sets.
   Note --feedback-success-background resolves to a full-strength lime and is
   NOT the counterpart of --feedback-error-background, which is --surface-card. */
.enroll-date__outcome {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--feedback-success-border);
  border-inline-start-width: 4px;
  border-radius: var(--radius-small);
  background: var(--surface-card);
  box-shadow: var(--shadow-resting);
  color: var(--text-primary);
  font-size: var(--font-body-default);
  line-height: 1.65;
}
.enroll-date__outcome--declined { border-color: var(--feedback-error-border); }

/* The system's own not-ready treatment is bound to the real :disabled
   pseudo-class, which an aria-disabled button never matches -- so it is restated
   here, and the press is given back so it can explain itself. */
.enroll-button[data-gate="not-ready"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto;
}

.enroll-field__input--code { max-width: min(100%, 15rem); letter-spacing: 0.2em; }
textarea.enroll-field__input { min-height: 8rem; resize: vertical; }

/* ---------------------------------------------------------------- consents */

.enroll-consents { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; border: 0; }
.enroll-consents__legend { padding: 0; color: var(--text-primary); font-size: var(--font-body-default); font-weight: 700; }
.enroll-consent { display: flex; width: 100%; min-height: 44px; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-1); cursor: pointer; }

.enroll-consent__input {
  display: grid;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  appearance: none;
  place-content: center;
  border: 2px solid var(--control-border);
  border-radius: 0.375rem;
  background: var(--control-background);
  color: var(--text-on-action);
  cursor: pointer;
}

.enroll-consent__input::before {
  width: 0.65rem;
  height: 0.35rem;
  border-block-end: 2px solid currentcolor;
  border-inline-start: 2px solid currentcolor;
  content: "";
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.enroll-consent__input:checked { background: var(--control-border-selected); }
.enroll-consent__input:checked::before { transform: rotate(-45deg) scale(1); }
.enroll-consent__input[aria-invalid="true"] { border: 4px solid var(--feedback-error-border); }
.enroll-consent:has(.enroll-consent__input:disabled) { opacity: 0.55; cursor: not-allowed; }
.enroll-consent__input:disabled { cursor: not-allowed; }
.enroll-consent__text { color: var(--text-primary); font-size: 1rem; line-height: 1.5625rem; }
.enroll-consent__text a { color: inherit; text-underline-offset: 0.2em; }

/* ----------------------------------------------------------------- pillars */

.enroll-pillars {
  margin-block-start: var(--space-8);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-resting);
}

.enroll-pillars__title { margin: 0; color: var(--text-muted); font-size: var(--font-caption); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.enroll-pillars__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.enroll-pillar { padding: var(--space-2) var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: var(--control-background); color: var(--text-primary); font-size: var(--font-body-default); }

.enroll-pillar--gap,
.enroll-pillar[data-state="gap"] { border-width: 4px; padding: calc(var(--space-2) - 3px) calc(var(--space-4) - 3px); font-weight: 700; }

.enroll-pillars__note { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--font-body-small); line-height: 1.5; }

/* -------------------------------------------------------------- summaries */

.enroll-summary { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); }
.enroll-summary__row { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--divider); border-radius: var(--radius-control); background: var(--surface-subtle); }
.enroll-summary__label { color: var(--text-muted); font-size: var(--font-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.enroll-summary__value { margin: 0; color: var(--text-primary); font-size: var(--font-body-large); line-height: 1.45; }

/* ------------------------------------------------------------------- focus */

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--control-focus-ring); outline-offset: 3px; }
.enroll-button:focus-visible,
.enroll-textlink:focus-visible { outline: 2px solid var(--action-focus-ring); outline-offset: 2px; }
.enroll-option:focus-visible,
.enroll-chip__input:focus-visible + .enroll-chip,
.enroll-chip__input:focus-visible + .enroll-multi-choice,
.enroll-chip__input:focus-visible + .enroll-slot,
.enroll-field__input:focus-visible,
.enroll-consent__input:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }

/* Hover belongs only to devices that actually have hover. */
@media (hover: hover) and (pointer: fine) {
  .enroll__back-link:hover,
  .enroll-textlink:hover,
  .enroll-link:hover { color: var(--text-primary); }

  .enroll-button:hover { background: var(--action-primary-background-hover); box-shadow: var(--shadow-action-raised); }
  .enroll-button--secondary:hover { border-color: var(--action-secondary-border); background: var(--action-secondary-background-hover); }

  .enroll-option:not(:disabled):hover,
  .enroll-chip:not(:disabled):hover,
  .enroll-chip__input:not(:disabled) + .enroll-multi-choice:hover,
  .enroll-chip__input:not(:disabled) + .enroll-slot:hover { border-color: var(--control-border-hover); box-shadow: var(--shadow-action-raised); }

  .enroll-tier:hover { border-color: var(--control-border-hover); box-shadow: var(--shadow-raised); }
}

.enroll-button:active { background: var(--action-primary-background-hover); box-shadow: none; }
.enroll-button--secondary:active { border-color: var(--action-secondary-border); background: var(--action-secondary-background-hover); }

/* Everything above is the phone layout. Wider screens gain breathing room;
   auto-fit grids decide for themselves when two useful columns actually fit. */
@media (min-width: 48rem) {
  .enroll-option { font-size: 1.25rem; line-height: 1.6875rem; }
  .enroll-multi-choice { min-height: var(--choice-min-height); padding-inline: var(--space-6); font-size: 1.25rem; line-height: 1.6875rem; }
  .enroll-chip__input:checked + .enroll-multi-choice { padding-inline: calc(var(--space-6) - 3px); }
}

/* The chosen card, once the choosing is behind them. A statement rather than a
   control: the button is gone, and what is left holds the same vertical space
   so the cards stay aligned across the row. */
.enroll-tier__cta--recorded {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin: 0;
  font-weight: 600;
  color: inherit;
}

.enroll-tier__period { font-family: var(--font-body); font-size: 1rem; font-weight: 400; }
.enroll-tier__summary .enroll-tier__name { display: block; font-size: 1.5rem; }


/* Narrative screens share the parent measure; text can grow beyond the viewport. */
.enroll--interstitial .enroll__body,
.enroll--support .enroll__body { display: flex; flex-direction: column; }
.enroll--interstitial .enroll__body { margin-block-start: var(--space-4); }
.enroll--interstitial .enroll__continuation,
.enroll--support .enroll__continuation { margin-block-start: auto; padding-block-start: var(--space-10); }
.enroll__continuation .enroll__actions { margin-block-start: 0; }
.enroll-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.enroll-eyebrow img { flex: none; }
.enroll-narrative { font-family: var(--font-display); font-size: var(--font-narrative); letter-spacing: var(--letter-spacing-display); line-height: 1.4; }
.enroll-narrative p { margin: 0 0 var(--space-5); }
.enroll-narrative p:last-child { margin-block-end: 0; }
.enroll-highlight { padding-inline: 0.12em; border-radius: 0.2em; background: var(--surface-highlight); color: var(--text-primary); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.enroll--interstitial .enroll__footnotes { margin-block-start: var(--space-5); }
.enroll--support .enroll__head { margin-block-start: 0; }
.enroll--support .enroll__headline,
.enroll--bridge .enroll__headline { max-width: none; }
.enroll--support .enroll__body,
.enroll--bridge .enroll__body { margin-block-start: var(--space-5); }
.enroll-support-context p { margin: 0 0 var(--space-6); }
.enroll-support-card { padding: var(--space-6) var(--space-5); border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-resting); }
.enroll-support-card p { margin: 0 0 var(--space-4); }
.enroll-support-card__links { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.enroll-support-card__links a { display: flex; align-items: center; min-height: var(--control-min-height); padding: var(--space-3) var(--space-5); border: 1px solid var(--control-border); border-radius: var(--radius-small); background: var(--surface-page); color: var(--control-border); font-weight: 600; text-decoration: none; }
.enroll-support-card__emergency { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: var(--space-3); color: var(--text-muted); font-size: var(--font-body-small); font-weight: 600; text-underline-offset: 0.2em; }
.enroll--support .enroll-button { width: auto; max-width: 100%; }
.enroll--support .enroll-button--secondary { flex: 1; }
.enroll-vitality-picture { margin-block-start: var(--space-8); padding-block-end: var(--space-4); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-resting); overflow: hidden; }
.enroll-vitality-picture__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-6); color: var(--text-muted); font-size: var(--font-caption); }
.enroll-vitality-picture__heading h2,
.enroll-score-feature h2 { margin: 0; font-family: var(--font-body); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.enroll-vitality-picture ul { padding: 0; margin: 0; list-style: none; }
.enroll-pillar-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-block-start: 1px solid var(--divider); }
.enroll-pillar-row--focus { background: var(--surface-subtle); }
.enroll-pillar-row__text h3 { margin: 0 0 var(--space-1); font-size: var(--font-body-default); font-weight: 600; }
.enroll-pillar-row__text p { margin: 0; color: var(--text-muted); font-size: var(--font-body-default); line-height: 1.4; }
.enroll-pillar-row__badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--pillar-focus-background); color: var(--pillar-focus-foreground); font-size: var(--font-caption); font-weight: 600; }
.enroll-starting-point { margin-block: var(--space-4); color: var(--text-muted); font-size: var(--font-body-small); }
.enroll-starting-point p { margin: 0; }
.enroll-score-feature { display: flex; align-items: center; gap: var(--space-5); margin-block-start: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface-feature); color: var(--text-on-feature); box-shadow: var(--shadow-raised); }
.enroll-score-feature > div { min-width: 0; }
.enroll-score-feature__cover { width: 6.8125rem; height: 8.125rem; flex: none; object-fit: contain; }
.enroll-score-feature h2 { color: var(--text-on-feature-muted); }
.enroll-score-feature__description { margin: var(--space-2) 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.3; }
.enroll-score-feature__placeholder { margin: var(--space-3) 0 0; color: var(--text-on-feature-muted); font-size: var(--font-body-small); }
.enroll-priority { margin-block-start: var(--space-8); }
.enroll-priority p + p { margin-block-start: var(--space-3); }
.enroll--bridge .enroll__continuation { margin-block-start: var(--space-10); }
.enroll--bridge .enroll-button { width: 100%; }
.enroll-cta-caption { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--font-body-small); text-align: center; }
@media (max-width: 40rem) {
  .enroll-pillar-row { grid-template-columns: 12px minmax(0, 1fr); padding-inline: var(--space-5); }
  .enroll-pillar-row__badge { grid-column: 2; justify-self: start; }
  .enroll-score-feature { gap: var(--space-3); padding: var(--space-4); }
  .enroll-score-feature__cover { width: 4rem; height: auto; }
  .enroll--support .enroll__actions { align-items: stretch; flex-direction: column; }
  .enroll--support .enroll-button { width: 100%; }
}
@media (hover: hover) {
  .enroll-support-card__links a:hover { background: var(--surface-subtle); text-decoration: underline; }
}
/* Long caregiver labels and enlarged text must grow the control, not escape it. */
.enroll--interstitial .enroll-button,
.enroll--support .enroll-button,
.enroll--bridge .enroll-button { height: auto; }
/* Account for the Back link's 44px hit target when spacing visible headings. */
.enroll--bridge .enroll__head { margin-block-start: var(--space-4); }
.enroll--bridge .enroll__headline { font-size: clamp(2.25rem, 1.75rem + 1.5625vw, 3rem); text-wrap: pretty; }
.enroll--support .enroll__headline { font-size: clamp(2.25rem, 1.75rem + 1.4vw, 2.875rem); text-wrap: pretty; }