/* JobHunt — the « Bienvenue » onboarding flow.
   Linked by accounts/templates/accounts/onboarding/layout.html after app.css.
   Every colour is an app.css token: light and dark come from the tokens, and
   the global reduced-motion rule in app.css already zeroes the transitions.
   Sections follow the screens: layout, option cards, chips, dropzone, salary,
   review, account preview, plan, interstitials, phones. */

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

.onb { min-height: 100vh; display: flex; flex-direction: column; }

.onb__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
  width: 100%; max-width: 860px; margin: 0 auto; padding: 0.9rem 1.25rem;
}
.onb__top > .brand__mark { grid-column: 2; font-size: var(--fs-2xl); }
.onb__top > .brand__mark img { width: 28px; height: 28px; }
.onb__back {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-3); text-decoration: none;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.onb__back:hover { background: var(--card-alt); color: var(--ink); border-color: var(--rule); }
.onb__back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.onb__side { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.onb__counter {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xs);
  background: var(--paper-deep); color: var(--ink-2);
}

.onb__progress { height: 4px; background: var(--paper-deep); }
.onb__bar {
  display: block; height: 100%;
  width: calc(var(--onb-progress, 0) * 100%);
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.onb__main { flex: 1 1 auto; width: 100%; max-width: 800px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.onb__main > .flash { margin-bottom: 1.5rem; }

.onb fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A floated legend lays out like a normal block; the next element clears it. */
.onb legend { float: left; width: 100%; padding: 0; }
.onb legend + * { clear: both; }

.onb__eyebrow { display: inline-block; margin-bottom: 0.6rem; color: var(--accent); }
.onb__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 550; line-height: 1.2;
  letter-spacing: -0.03em; color: var(--heading); overflow-wrap: anywhere;
}
.onb__lede {
  margin: 0 0 1.6rem; max-width: 60ch;
  font-family: var(--font-prose); font-size: var(--fs-xl); line-height: 1.55; color: var(--ink-3);
}
.onb__note { margin: 0.25rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-3); }
.onb__note a { color: inherit; }

.onb__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.75rem; }
.onb__actions .btn { min-height: 48px; font-size: var(--fs-base); }
.onb__actions .btn--primary { font-weight: 550; }
.onb__foot { margin-top: 1.5rem; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }

/* --------------------------------------------------------- option cards -- */

.option-list { display: flex; flex-direction: column; gap: 0.6rem; }

.option {
  position: relative;
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%; padding: 1rem 1.1rem;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.option:hover { border-color: var(--ink-3); }
/* The global ring (3px accent) — the wash-coloured token is invisible on paper. */
.option:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.option:has(:checked) { background: var(--accent-wash); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.option__icon { width: 24px; height: 24px; flex: none; color: var(--accent); }
.option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.option__label { font-size: var(--fs-base); font-weight: 550; letter-spacing: -0.01em; line-height: 1.35; }
.option__sub { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.option--rich { padding: 1.1rem 1.15rem; }
/* Hidden unless checked. The sibling form needs no :has(), so the tick shows everywhere. */
.option__check { display: none; width: 20px; height: 20px; flex: none; margin-left: auto; color: var(--accent); }
.option > input:checked ~ .option__check { display: block; }

.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.option-grid .option {
  flex-direction: column; justify-content: center; gap: 0.6rem;
  min-height: 108px; padding: 1.1rem 0.75rem; text-align: center;
}
.option-grid .option__icon { width: 26px; height: 26px; }
.option-grid .option__body { align-items: center; }
.option-grid .option__label { font-size: var(--fs-md); }
.option-grid .option__check { position: absolute; top: 0.55rem; right: 0.55rem; width: 16px; height: 16px; margin: 0; }
.option--more { border-style: dashed; border-color: var(--rule-strong); background: transparent; color: var(--ink-2); }
.option--more:hover { color: var(--ink); background: var(--card); }
/* « Voir plus » is a native disclosure (no script needed): one card while
   closed, the whole row once open, with its own grid of the remaining sectors. */
.option-grid__more { display: block; min-width: 0; }
.option-grid__more > summary { list-style: none; height: 100%; }
.option-grid__more > summary::-webkit-details-marker { display: none; }
.option-grid__more[open] { grid-column: 1 / -1; }
.option-grid__more[open] > summary { display: none; }
.option--wide { grid-column: 1 / -1; }
.option-grid .option--wide { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 1rem 1.1rem; text-align: left; }
.option-grid .option--wide .option__body { align-items: flex-start; }
.option-grid .option--wide .option__check { position: static; width: 20px; height: 20px; margin-left: auto; }

/* ---------------------------------------------------------------- chips -- */
/* The combobox itself (.chips-search, .chip__remove) and the salary toggle
   (.segmented, .salary__*) are app-wide: see the forms section of app.css. */

.onb .chip { font-size: var(--fs-sm); padding: 0.3rem 0.7rem; min-height: 36px; }
.onb .chip-row { margin-top: 0.75rem; gap: 0.45rem; }
.onb .chips-recommended .chip-row { margin-top: 0; }

/* ------------------------------------------------------------- dropzone -- */

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 2rem 1.25rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--rule-strong); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink);
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.dropzone:hover { border-color: var(--accent); }
.dropzone:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone__icon { width: 30px; height: 30px; color: var(--accent); transform: scaleY(-1); }
.dropzone__badge { margin-bottom: 0.5rem; background: var(--accent-wash); color: var(--accent); white-space: normal; text-align: center; }
.dropzone__title { font-size: var(--fs-lg); font-weight: 550; }
.dropzone__or { font-size: var(--fs-sm); color: var(--ink-3); }
.dropzone__hint { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.dropzone .btn { margin-top: 0.3rem; }
.dropzone__file { margin-top: 0.5rem; font-size: var(--fs-md); font-weight: 550; color: var(--accent); overflow-wrap: anywhere; }
.dropzone__file:empty { display: none; }

.upload-bar { height: 6px; margin-top: 1rem; border-radius: 999px; overflow: hidden; background: var(--paper-deep); }
.upload-bar__fill {
  display: block; height: 100%;
  width: calc(var(--upload-progress, 0) * 100%);
  background: var(--accent); border-radius: inherit;
  transition: width 0.15s var(--ease);
}
.upload-bar__text { margin: 0.4rem 0 0; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.upload-bar.is-preparing .upload-bar__fill { width: 35%; animation: onb-upload-preparing 1.4s ease-in-out infinite alternate; }
.upload-bar__recovery { display: inline-block; margin-left: 0.35rem; color: var(--accent); }
.onb__note--analysis { margin: -0.8rem 0 1.25rem; }
@keyframes onb-upload-preparing { from { transform: translateX(0); } to { transform: translateX(185%); } }

.result-card {
  padding: 0.35rem 1.15rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.result-card__row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.result-card__row:last-child { border-bottom: 0; }
.result-card__row > svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--tone, var(--ink-3)); }
.result-card__row strong { font-weight: 600; }
.result-card__row.t-amber { margin: 0 -1.15rem; padding-inline: 1.15rem; background: var(--tone-wash); color: var(--tone); }

.cv-analysis { margin-top: 1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); }
.cv-analysis__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
.cv-analysis__title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--heading); }
.cv-analysis__free { background: var(--accent-wash); color: var(--accent); white-space: normal; }
.cv-analysis__status { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0; font-size: var(--fs-md); line-height: 1.6; }
.cv-analysis__status > svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--tone, var(--accent)); }
.cv-analysis__spinner { width: 16px; height: 16px; flex: none; margin-top: 0.2rem; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: onb-analysis-spin 0.9s linear infinite; }
.cv-analysis__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.8rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cv-analysis__steps li { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.cv-analysis__steps li::before { content: ""; width: 7px; height: 7px; margin: 0 3px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
.cv-analysis__steps .is-complete::before { display: none; }
.cv-analysis__steps svg { width: 14px; height: 14px; flex: none; }
.cv-analysis__steps .is-complete { color: var(--ink-2); }
.cv-analysis__steps [aria-current="step"] { color: var(--accent); font-weight: 600; }
.cv-analysis__steps [aria-current="step"]::before { background: currentColor; }
.cv-analysis__review { margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--feature-bg); color: var(--ink); font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; }
.cv-analysis__review.t-amber { border-left-color: var(--tone); background: var(--tone-wash); }
.cv-analysis__review h3 { margin: 0 0 0.4rem; font-size: var(--fs-base); font-weight: 600; }
.cv-analysis__review p { margin: 0.5rem 0 0; }
.cv-analysis__gaps { margin: 0.6rem 0; padding-left: 1.2rem; }
.cv-analysis__gaps li + li { margin-top: 0.5rem; }
.cv-analysis__gaps strong { font-weight: 600; }
.cv-analysis__gaps span { display: block; }
.cv-analysis__summary { margin: 0 0 0.75rem; font-family: var(--font-prose); line-height: 1.6; overflow-wrap: anywhere; }
.cv-analysis__counts { margin: 0.75rem 0; font-size: var(--fs-md); color: var(--ink-2); }
.cv-analysis__subtitle { margin: 1.1rem 0 0.5rem; font-size: var(--fs-md); font-weight: 600; color: var(--heading); }
.cv-analysis__experiences { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
.cv-analysis__experience { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.35rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.cv-analysis__role { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.5; }
.cv-analysis__company { margin: 0.15rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.cv-analysis__dates { max-width: 24ch; margin: 0; font-size: var(--fs-sm); line-height: 1.6; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cv-analysis__skills { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.75rem 0; }
.cv-analysis__skills li { max-width: 100%; padding: 0.25rem 0.6rem; border-radius: var(--radius); background: var(--paper-deep); color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cv-analysis__languages { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.cv-analysis__languages > div { flex: 1 1 9rem; min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--fs-md); line-height: 1.5; overflow-wrap: anywhere; }
.cv-analysis__languages dt { font-weight: 600; }
.cv-analysis__languages dd { margin: 0.15rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.cv-analysis__languages-empty { margin-bottom: 1rem; }
.cv-analysis__connection { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rule); font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.cv-analysis__connection a { color: var(--accent); }
@keyframes onb-analysis-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .upload-bar.is-preparing .upload-bar__fill { animation: none; }
  .cv-analysis__spinner { animation: pulse 1.2s ease-in-out infinite; border-color: var(--accent); }
  .onb__bar, .upload-bar__fill { transition: none; }
}

/* --------------------------------------------------------------- salary -- */

.onb input[type="range"] { display: block; width: 100%; margin: 1rem 0 0; accent-color: var(--accent); }

/* --------------------------------------------------------------- review -- */

.review { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.review dt, .review dd { margin: 0; }
.review__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
}
.review__label { align-self: start; padding-top: 0.25rem; }
.review__value { font-size: var(--fs-base); line-height: 1.45; overflow-wrap: anywhere; }
.review__skipped { font-family: var(--font-prose); font-style: italic; color: var(--ink-3); }
.review__row form { display: contents; }

/* ---------------------------------------------- final account preview -- */

.signup-preview { padding-bottom: 1.5rem; }
.signup-preview__intro { margin-bottom: 1.75rem; }
.signup-preview .signup-preview__title {
  max-width: 20ch; font-family: var(--font-prose); font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 450; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance;
}
.signup-preview__intro .onb__lede { max-width: 56ch; margin-bottom: 0; color: var(--ink-2); }
.signup-preview__summary {
  padding: 1.5rem; border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg); background: var(--accent-wash);
}
.signup-preview__section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.signup-preview__section-head h2 { margin: 0; color: var(--ink-2); line-height: 1.5; }
.signup-preview__check { display: inline-flex; flex: none; color: var(--accent); }
.signup-preview__check svg { width: 22px; height: 22px; }
.signup-preview__criteria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 1.1rem 0 0.8rem; }
.signup-preview__criterion { min-width: 0; }
.signup-preview__criterion dt { margin: 0 0 0.35rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.signup-preview__criterion dd { margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--heading); overflow-wrap: anywhere; }
.signup-preview__criterion--titles { grid-column: 1 / -1; }
.signup-preview__criterion--titles dd { font-family: var(--font-prose); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.25; }
.signup-preview__edit { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: var(--fs-sm); line-height: 1.5; color: var(--accent); }
.signup-preview__edit svg { flex: none; width: 15px; height: 15px; }
.signup-preview__cv, .signup-preview__next { margin-top: 2rem; }
.signup-preview__heading { margin: 0 0 0.7rem; color: var(--heading); font-size: var(--fs-xl); font-weight: 550; line-height: 1.35; letter-spacing: -0.02em; text-wrap: balance; }
.signup-preview__possibilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.signup-preview__possibility { min-width: 0; padding: 1rem 0 0; border-top: 2px solid var(--accent); }
.signup-preview__possibility--future { border-top-color: var(--rule-strong); }
.signup-preview__possibility .signup-preview__availability { margin: 0 0 0.65rem; color: var(--accent); font-size: var(--fs-sm); font-weight: 550; }
.signup-preview__possibility--future .signup-preview__availability { color: var(--ink-2); }
.signup-preview__possibility h3 { margin: 0 0 0.5rem; color: var(--heading); font-size: var(--fs-lg); font-weight: 550; line-height: 1.4; }
.signup-preview__possibility p { margin: 0; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); }
.signup-preview__possibility .signup-preview__detail { margin-top: 0.65rem; font-size: var(--fs-sm); }
.signup-preview__account { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); }
.signup-preview__account-lede { margin: 0 0 1.1rem; font-family: var(--font-prose); font-size: var(--fs-xl); line-height: 1.5; color: var(--ink-2); }
.signup-preview__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.signup-preview__fields .field { min-width: 0; }
.signup-preview__fields .input { font-size: 16px; }
.signup-preview__fields .input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.signup-preview__confirmation { margin: 0.1rem 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.signup-preview .signup-preview__actions { position: static; margin-top: 1rem; padding: 0; background: none; }
.signup-preview__actions .btn { white-space: normal; text-align: center; }
.signup-preview__login { text-align: center; }
.signup-preview__login a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }

/* ----------------------------------------------------------------- plan -- */

.plan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plan__row { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.plan__when { padding-top: 0.25rem; color: var(--accent); }
.plan__row > p { margin: 0; font-family: var(--font-prose); font-size: var(--fs-xl); line-height: 1.5; }

.cost {
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  background: var(--feature-bg); border-radius: var(--radius-lg);
  font-family: var(--font-prose); font-size: var(--fs-xl); line-height: 1.55; color: var(--ink);
}
.cost p { margin: 0; }
.cost p + p { margin-top: 0.6rem; }
.cost strong { font-family: var(--font-mono); font-size: 0.95em; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ---------------------------------------------- launch interest / plans -- */

.interest .onb__lede { max-width: 66ch; color: var(--ink-2); }
.interest__heading { margin: 0 0 0.45rem; font-size: var(--fs-xl); font-weight: 600; line-height: 1.4; color: var(--heading); }
.interest__help { margin: 0 0 1rem; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2); }
.interest__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.interest-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 1.25rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.interest-plan:hover { border-color: var(--accent); }
.interest-plan:has(:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.interest-plan:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.interest-plan__radio { position: absolute; top: 1.3rem; right: 1.25rem; width: 19px; height: 19px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.interest-plan__status { align-self: flex-start; max-width: calc(100% - 2rem); margin-bottom: 1rem; font-size: var(--fs-sm); line-height: 1.5; font-weight: 550; color: var(--accent); }
.interest-plan__status--future { color: var(--ink-2); }
.interest-plan__name { margin-bottom: 0.4rem; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.025em; color: var(--heading); }
.interest-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-height: 2.8rem; font-size: var(--fs-5xl); font-weight: 550; line-height: 1.25; letter-spacing: -0.04em; color: var(--heading); }
.interest-plan__price--pending { font-size: var(--fs-3xl); line-height: 1.7; letter-spacing: -0.03em; }
.interest-plan__price small { font-size: var(--fs-base); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.interest-plan__description { margin: 0.65rem 0 1rem; font-family: var(--font-prose); font-size: var(--fs-xl); line-height: 1.45; color: var(--ink-2); }
.interest-plan__features { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; font-size: var(--fs-base); line-height: 1.5; }
.interest-plan__features > span { display: flex; align-items: flex-start; gap: 0.55rem; }
.interest-plan__features svg { flex: none; width: 16px; height: 16px; margin-top: 0.15rem; color: var(--accent); }
.interest-plan__choice { display: block; margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--rule); font-size: var(--fs-md); line-height: 1.5; font-weight: 550; color: var(--ink-2); }
.interest-plan__selected { display: none; }
.interest-plan__radio:checked ~ .interest-plan__choice { color: var(--accent); }
.interest-plan__radio:checked ~ .interest-plan__choice .interest-plan__unselected { display: none; }
.interest-plan__radio:checked ~ .interest-plan__choice .interest-plan__selected { display: inline; }
.interest__contact { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.interest .field__label, .interest .field__help, .interest .field__error { font-size: var(--fs-md); line-height: 1.6; }
.interest .field__error p { margin: 0.4rem 0 0; }
.interest .input { font-size: 16px; }
.interest .input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.interest__consent { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding: 0.35rem 0; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2); cursor: pointer; }
.interest__consent input { flex: none; width: 19px; height: 19px; margin: 0.1rem 0 0; accent-color: var(--accent); cursor: pointer; }
.interest__consent input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.interest__consent-field { margin-bottom: 0; }
.interest .interest__actions { position: static; margin-top: 1.25rem; padding: 0; background: none; }
.interest .interest__access-note { margin: 0.25rem 0 0; font-size: var(--fs-md); text-align: center; }

/* -------------------------------------------------------- interstitials -- */

.onb__illustration { display: block; width: min(240px, 60%); margin: 0 auto 1.5rem; }
.onb__illustration svg { display: block; width: 100%; height: auto; }
.onb__intro { max-width: 34rem; margin: 0.5rem auto 0; text-align: center; }
.onb__intro .onb__lede { margin-inline: auto; }

.check-list { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.check-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-base); line-height: 1.5; }
.check-list svg { width: 18px; height: 18px; flex: none; margin-top: 0.2rem; color: var(--accent); }

/* --------------------------------------------------------------- phones -- */

@media (max-width: 620px) {
  .onb__top { padding: 0.65rem 0.75rem; gap: 0.5rem; }
  .onb__top > .brand__mark { font-size: var(--fs-xl); }
  .onb__back { width: 44px; height: 44px; }
  .onb__main { padding: 1.25rem 1rem 0; }
  .onb__title { font-size: var(--fs-3xl); }
  .onb__lede { font-size: var(--fs-xl); margin-bottom: 1.25rem; }
  .onb__actions {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: 1.25rem; padding: 0.75rem 0 1rem;
    background: linear-gradient(to top, var(--paper) 78%, transparent);
  }
  .option { padding: 0.9rem 1rem; }
  .cv-analysis__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-analysis__experience { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .cv-analysis__dates { max-width: none; }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .option-grid .option { min-height: 96px; }
  .option-grid .option--wide { min-height: 0; }
  .review__row { grid-template-columns: minmax(0, 1fr) auto; }
  .review__label { grid-column: 1; padding-top: 0; }
  .review__value { grid-column: 1; }
  .review__row .icon-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .signup-preview { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .signup-preview__summary, .signup-preview__account { padding: 1.1rem; }
  .signup-preview__criteria { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .signup-preview__possibilities, .signup-preview__fields { grid-template-columns: minmax(0, 1fr); }
  .signup-preview__next, .signup-preview__account { margin-top: 1.5rem; }
  .plan__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .interest__plans { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .interest-plan { padding: 1.1rem; }
  .interest-plan__radio { top: 1.15rem; right: 1.1rem; }
  .interest__contact { margin-top: 1.25rem; padding-top: 1.25rem; }
  .interest { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .onb__illustration { width: min(200px, 55%); margin-bottom: 1rem; }
}