/**
 * ENTEMAX onboarding shell.
 *
 * Self-contained on purpose. This surface runs before the application chrome
 * exists, so it loads no framework CSS, no icon font and no web font - the
 * system stack is what the reference composition actually looks like, and it
 * costs no request.
 *
 * The drawer is the one piece worth reading twice. On a wide screen it pushes
 * the canvas instead of covering it: no backdrop, no focus trap, both halves
 * live at once, because the guide exists to be read while the form is filled.
 * Below that width there is not enough room to keep both, so it becomes an
 * overlay and then a sheet - still without dimming the page.
 */

:root {
  --onb-canvas: #f7f9fc;
  --onb-surface: #ffffff;
  --onb-border: #e9edf3;
  --onb-border-soft: #f0f3f8;
  --onb-ink: #0f2547;
  --onb-ink-soft: #5b6b82;
  --onb-muted: #8695a8;
  --onb-blue: #1d4ed8;
  --onb-blue-soft: #eef3fb;
  --onb-navy: #12245c;
  --onb-drawer-w: 480px;
  --onb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html, body { height: 100%; }

.onb-body {
  margin: 0;
  background: var(--onb-canvas);
  color: var(--onb-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- shell ---------- */

.onb-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* The push. Margin rather than transform so the canvas genuinely reflows
     and its centred column re-centres in the space that is left. */
  margin-right: 0;
  transition: margin-right 320ms var(--onb-ease);
}

.onb-header {
  background: var(--onb-surface);
  border-bottom: 1px solid var(--onb-border);
}

.onb-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.onb-brand { display: inline-flex; align-items: center; }
.onb-brand__img { height: 26px; width: auto; display: block; }

.onb-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: -8px -10px;
  border: 0;
  background: transparent;
  color: var(--onb-ink-soft);
  font: inherit;
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: color 160ms var(--onb-ease), background-color 160ms var(--onb-ease);
}

.onb-help-trigger:hover { color: var(--onb-ink); background: var(--onb-blue-soft); }
.onb-help-trigger__icon { width: 20px; height: 20px; display: block; }

.onb-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 32px 80px;
}

.onb-canvas {
  width: 100%;
  max-width: 960px;
  padding-top: 56px;
  text-align: center;
}

/* ---------- phase indicator ---------- */

.onb-phase {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 52px;
}

.onb-phase__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5dde8;
  transition: background-color 240ms var(--onb-ease);
}

.onb-phase__dot.is-done { background: var(--onb-blue); }

/* ---------- brand mark ---------- */

.onb-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.onb-mark__glow {
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 78, 216, 0.10) 0%, rgba(29, 78, 216, 0) 68%);
}

/* Signature, not headline. It was 112px when the screen had four benefit
   blocks under it and needed the weight to hold the top; with those gone it
   only has to be recognised, so it steps back and lets the greeting lead. */
.onb-mark__img {
  position: relative;
  width: 96px;
  height: auto;
  display: block;
}

.onb-mark--sm .onb-mark__img { width: 76px; }

/* ---------- type ---------- */

.onb-title {
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--onb-ink);
}

.onb-title--sm { font-size: 32px; }

.onb-subtitle {
  margin: 0 auto;
  max-width: 620px;
  font-size: 17px;
  color: var(--onb-ink-soft);
}

/* ---------- welcome ----------
   Five elements and a lot of nothing. The extra top space is what puts the
   group slightly above the optical centre rather than pinned to the top of the
   canvas; it collapses on short viewports instead of pushing the button under
   the fold. */

.onb-welcome { padding-top: clamp(24px, 15vh, 180px); }

.onb-welcome .onb-subtitle { max-width: 480px; }

/* Quieter than the reassurance line and without its icon: this is a fact about
   the next two minutes, not a promise that needs illustrating. */
.onb-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--onb-muted);
}

/* ---------- primary CTA ----------
   Contract only. Nothing renders it until there is a destination; the next
   phase adds the anchor and needs no CSS work. */

.onb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 280px;
  margin-top: 56px;
  padding: 15px 28px;
  border: 0;
  border-radius: 12px;
  background: var(--onb-navy);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--onb-ease), transform 160ms var(--onb-ease);
}

.onb-cta:hover { background: #0d1c4a; }
.onb-cta:active { transform: translateY(1px); }
.onb-cta svg { width: 18px; height: 18px; }

/* ---------- reassurance ---------- */

.onb-reassure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 48px 0 0;
  font-size: 14px;
  color: var(--onb-muted);
}

.onb-reassure svg { width: 18px; height: 18px; display: block; }

/* ---------- help drawer ---------- */

.onb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--onb-drawer-w);
  max-width: 100vw;
  background: var(--onb-surface);
  border-left: 1px solid var(--onb-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms var(--onb-ease), visibility 0s linear 320ms;
  z-index: 40;
  text-align: left;
}

.onb-body[data-onb-drawer='open'] .onb-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 320ms var(--onb-ease), visibility 0s linear 0s;
}

/* Push only where both halves fit. */
@media (min-width: 1200px) {
  .onb-body[data-onb-drawer='open'] .onb-shell { margin-right: var(--onb-drawer-w); }
}

.onb-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--onb-border);
}

.onb-drawer__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--onb-ink);
}

.onb-drawer__title:focus { outline: none; }

.onb-drawer__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13.5px;
  color: #12855c;
}

.onb-drawer__duration svg { width: 16px; height: 16px; display: block; }

.onb-drawer__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--onb-ink-soft);
  cursor: pointer;
  transition: background-color 160ms var(--onb-ease);
}

.onb-drawer__close:hover { background: var(--onb-blue-soft); }
.onb-drawer__close svg { width: 19px; height: 19px; display: block; }

.onb-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 32px;
}

.onb-drawer__note {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--onb-blue-soft);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--onb-ink-soft);
}

.onb-drawer__note svg { flex: none; width: 18px; height: 18px; color: var(--onb-blue); }

.onb-drawer__steps { list-style: none; margin: 0; padding: 0; }

.onb-drawer__step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--onb-border-soft);
}

.onb-drawer__step:last-child { border-bottom: 0; }

.onb-drawer__step-no {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--onb-blue);
  padding-top: 2px;
  letter-spacing: 0.04em;
}

.onb-drawer__step-text h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--onb-ink);
}

.onb-drawer__step-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--onb-muted);
}

/* Menü yolu: adım metninin altında, panele bakarken parmakla izlenecek satır.
   Ok karakterleri içerikten gelir; burada yalnızca ayırt edici zemin verilir. */
.onb-drawer__step-path {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--onb-border);
  border-radius: 8px;
  background: var(--onb-blue-soft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--onb-ink-soft);
  word-break: break-word;
}

/* Cümle içi bağlantı: metnin akışını bozmadan tıklanabilir olduğu belli olsun -
   mavi, ince altı çizgili, yanında minik gitme simgesi. Simge metinden
   kopmasın diye inline-flex ve baseline'a hizalı. */
.onb-drawer__inline-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--onb-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.onb-drawer__inline-link:hover { text-decoration-thickness: 2px; }

.onb-drawer__inline-link svg {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 1px;
}

.onb-drawer__inline-link:focus-visible {
  outline: 2px solid var(--onb-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Pazaryerinin kendi rehberine dış bağlantı - destek kutusuyla aynı dilde,
   ama tıklanabilir olduğu belli olsun diye mavi ve ok simgeli. */
.onb-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid var(--onb-border);
  border-radius: 11px;
  font-size: 13.5px;
  color: var(--onb-blue);
  text-decoration: none;
}

.onb-drawer__link:hover { background: var(--onb-blue-soft); }
.onb-drawer__link svg { flex: none; width: 16px; height: 16px; }

.onb-drawer__link:focus-visible {
  outline: 2px solid var(--onb-blue);
  outline-offset: 2px;
}

/* Destek satırı: çerçevesiz, sessiz bir kapanış cümlesi - kutu değil.
   (Kutu görünümü bilinçli kaldırıldı; yanındaki kulaklık simgesi yönü veriyor.) */
.onb-drawer__support {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 22px 2px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--onb-muted);
}

.onb-drawer__support svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--onb-muted); }
.onb-drawer__support span { display: block; }

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

.onb-help-trigger:focus-visible,
.onb-drawer__close:focus-visible,
.onb-quiet-link:focus-visible,
.onb-cta:focus-visible {
  outline: 2px solid var(--onb-blue);
  outline-offset: 3px;
}

/* ---------- preparing status region ---------- */

/*
 * The working note is the calm sentence under the timeline, and the only thing
 * on this screen that changes without the run changing: it escalates as the wait
 * grows so a long import does not read as a frozen page. Same weight as the
 * reassurance line below it - it is company, not an alert.
 */
.onb-working-note {
  margin: 40px 0 0;
  font-size: 15px;
  color: var(--onb-ink-soft);
  transition: opacity 240ms var(--onb-ease);
}

.onb-working-note[data-onb-fading='1'] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .onb-working-note { transition: none; }
}

/* Heard, never seen: step transitions the poll writes for a screen reader. */
.onb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- blocked actions ---------- */

/*
 * A blocked screen used to end in nothing. It now offers a way out, and the
 * hierarchy is the point: at most one action, and the support line reads as a
 * quiet sentence rather than a second button competing with it.
 *
 * Column rather than row, so the primary sits alone and the support line reads
 * as an afterthought - which is what it is when there is a real action above it,
 * and the only thing on offer when there is not.
 */
.onb-blocked-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* The CTA already carries its own top margin; the group does not add another. */
.onb-blocked-actions .onb-cta { margin-top: 40px; }

/*
 * No border, no fill, no arrow-sized weight. Support is not a failure state and
 * must not be dressed as one.
 */
.onb-quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--onb-ink-soft);
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 6px;
  transition: color 160ms var(--onb-ease);
}

.onb-quiet-link:hover { color: var(--onb-ink); text-decoration: underline; }
.onb-quiet-link span { font-size: 13px; }

/* Standing alone, it carries the whole burden of not being a dead end. */
.onb-blocked-actions .onb-quiet-link:only-child { margin-top: 40px; }

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  /* Not enough room for both; the drawer floats but still never dims the page. */
  .onb-drawer { box-shadow: -18px 0 46px rgba(15, 37, 71, 0.10); }
}

@media (max-width: 900px) {
  .onb-drawer {
    top: auto;
    left: 0;
    width: 100%;
    height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--onb-border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .onb-body[data-onb-drawer='open'] .onb-drawer { transform: translateY(0); }
}

@media (max-width: 640px) {
  .onb-header__inner { padding: 16px 20px; }
  .onb-main { padding: 0 20px 64px; }
  .onb-canvas { padding-top: 40px; }
  .onb-phase { margin-bottom: 38px; }
  .onb-title { font-size: 29px; }
  .onb-title--sm { font-size: 24px; }
  .onb-subtitle { font-size: 15.5px; }
  .onb-subtitle br { display: none; }
  .onb-mark__img { width: 76px; }
  .onb-cta { width: 100%; min-width: 0; }
}

/* ---------- selection (screen 02) ---------- */

/* Welcome is a wide, ceremonial screen. From here on the user is working, so
   the heading steps down and the column narrows to the width of the choices. */
.onb-title--compact { font-size: 30px; margin-bottom: 10px; }
.onb-subtitle--compact { font-size: 16px; }

.onb-select { text-align: center; }

.onb-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin: 38px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.onb-choices--more { margin-top: 12px; }
.onb-choices__item { min-width: 0; }

/* `display: grid` above outranks the user agent's [hidden] rule, so without
   this the collapsed list renders open. */
.onb-choices[hidden] { display: none; }

/* A surface, not a card: one hairline, no shadow at rest, and the only thing
   that changes on hover is how present that hairline is. The logo carries the
   brand colour; the row never does. */
.onb-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 74px;
  padding: 0 18px;
  border: 1px solid var(--onb-border);
  border-radius: 12px;
  background: var(--onb-surface);
  text-decoration: none;
  transition: border-color 160ms var(--onb-ease),
              box-shadow 160ms var(--onb-ease),
              transform 160ms var(--onb-ease);
}

.onb-choice:hover {
  border-color: #cbd6e6;
  box-shadow: 0 2px 8px rgba(15, 37, 71, 0.05);
  transform: translateY(-1px);
}

.onb-choice:focus-visible {
  outline: 2px solid var(--onb-blue);
  outline-offset: 2px;
}

/* A fixed box every wordmark is fitted into, so eleven logos of very different
   proportions still line up on one axis and none of them is stretched. `contain`
   does the fitting; the box never crops. */
.onb-choice__logo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
}

.onb-choice__logo img {
  max-width: 150px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.onb-choice__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--onb-muted);
  transition: color 160ms var(--onb-ease), transform 160ms var(--onb-ease);
}

.onb-choice:hover .onb-choice__arrow { color: var(--onb-ink-soft); transform: translateX(2px); }

/* Channels outside the priority set: they connect, but their onboarding import
   is not wired yet. Dimmed so they read as not-quite-ready rather than broken;
   hover restores full colour because the row is still a working link. */
.onb-choice--muted .onb-choice__logo img {
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 160ms var(--onb-ease), opacity 160ms var(--onb-ease);
}

.onb-choice--muted .onb-choice__arrow { opacity: 0.5; }

.onb-choice--muted:hover .onb-choice__logo img { filter: grayscale(0); opacity: 1; }
.onb-choice--muted:hover .onb-choice__arrow { opacity: 1; }

/* ---------- disclosure ---------- */

.onb-more { margin-top: 22px; }

.onb-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--onb-blue);
  cursor: pointer;
}

.onb-more__toggle:hover .onb-more__label { text-decoration: underline; }
.onb-more__toggle:focus-visible { outline: 2px solid var(--onb-blue); outline-offset: 3px; border-radius: 6px; }

.onb-more__chevron {
  width: 17px;
  height: 17px;
  transition: transform 200ms var(--onb-ease);
}

.onb-more__toggle[aria-expanded='true'] .onb-more__chevron { transform: rotate(180deg); }

/* ---------- empty state ---------- */

.onb-empty {
  max-width: 560px;
  margin: 40px auto 0;
}

.onb-empty__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--onb-ink);
}

.onb-empty__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--onb-ink-soft);
}

/* ---------- connect (screen 03) ---------- */

.onb-connect { text-align: center; }

.onb-connect__head { margin-bottom: 30px; }

.onb-connect__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-bottom: 18px;
}

.onb-connect__logo img { max-height: 32px; width: auto; display: block; }

/* One column, the width of the login form. The drawer pushes this canvas rather
   than covering it, so the form has to stay usable while it is open. */
.onb-form {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.onb-alert {
  max-width: 460px;
  margin: 0 auto 20px;
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 14.5px;
  text-align: left;
}

.onb-alert--err { background: #fdeeee; color: #a12a2a; }

/* A caption for the run of fields under it. No rule, no background, no box -
   the space above it is what separates the groups. */
.onb-group {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--onb-muted);
}

.onb-group + .onb-field { margin-top: 0; }
.onb-field + .onb-group { margin-top: 24px; }

.onb-field { margin-bottom: 14px; }

.onb-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--onb-ink);
}

.onb-label__opt {
  margin-left: 6px;
  font-weight: 400;
  color: var(--onb-muted);
}

.onb-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--onb-surface);
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  transition: border-color 160ms var(--onb-ease), box-shadow 160ms var(--onb-ease);
}

.onb-input:focus-within {
  border-color: var(--onb-blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10);
}

.onb-field--err .onb-input { border-color: #d98a8a; }

.onb-input input,
.onb-input select {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--onb-ink);
  outline: none;
}

.onb-input select { appearance: none; cursor: pointer; padding-right: 38px; }
.onb-input input::placeholder { color: #a4b0c2; }

.onb-input__chevron {
  position: absolute;
  right: 13px;
  width: 17px;
  height: 17px;
  color: var(--onb-muted);
  pointer-events: none;
}

.onb-input__reveal {
  flex: none;
  width: 42px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--onb-muted);
  cursor: pointer;
  border-radius: 0 10px 10px 0;
}

.onb-input__reveal:hover { color: var(--onb-ink-soft); }
.onb-input__reveal svg { width: 18px; height: 18px; display: block; }
.onb-input__reveal .onb-eye--hide { display: none; }
.onb-input__reveal[aria-pressed='true'] .onb-eye--show { display: none; }
.onb-input__reveal[aria-pressed='true'] .onb-eye--hide { display: block; }

.onb-field__msg {
  margin: 6px 0 0;
  font-size: 13px;
  color: #a12a2a;
}

.onb-field__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--onb-muted);
}

/* The shared CTA, sized for a form rather than for a hero. */
.onb-cta--form {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 50px;
  margin-top: 22px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 10px;
}

.onb-cta--form[disabled] { background: #8593b4; cursor: progress; }
.onb-cta--form[disabled]:hover { background: #8593b4; }

/* ---------- field help ---------- */

/* Only on the few fields that genuinely need a sentence. It sits beside the
   label, opens on hover and on keyboard focus, and carries one line - anything
   longer belongs in the shared drawer. */
.onb-help {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

.onb-help__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--onb-muted);
  cursor: help;
  transition: color 140ms var(--onb-ease);
}

.onb-help__dot svg { width: 16px; height: 16px; display: block; }
.onb-help__dot:hover { color: var(--onb-blue); }
.onb-help__dot:focus-visible { outline: 2px solid var(--onb-blue); outline-offset: 2px; }

.onb-help__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 260px;
  padding: 9px 12px;
  transform: translateX(-50%);
  border-radius: 9px;
  background: var(--onb-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms var(--onb-ease), visibility 140ms var(--onb-ease);
}

.onb-help__dot:hover + .onb-help__bubble,
.onb-help__dot:focus-visible + .onb-help__bubble {
  opacity: 1;
  visibility: visible;
}

/* ---------- trust line ---------- */

.onb-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--onb-muted);
}

.onb-trust svg { flex: none; width: 15px; height: 15px; display: block; }

/* The CTA follows the trust line directly, so it keeps its own top margin off. */
.onb-trust + .onb-cta--form { margin-top: 10px; }

.onb-back { margin: 26px 0 0; font-size: 14.5px; }

.onb-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--onb-ink-soft);
  text-decoration: none;
}

.onb-back a:hover { color: var(--onb-blue); }
.onb-back a:hover span { text-decoration: underline; }
.onb-back svg { width: 16px; height: 16px; }

/* ---------- selection / connect responsive ---------- */

/* One column well before the phone breakpoint: with the drawer open the canvas
   loses 480px, and two 74px rows in what is left would be cramped. */
@media (max-width: 900px) {
  .onb-choices { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 640px) {
  .onb-title--compact { font-size: 24px; }
  .onb-subtitle--compact { font-size: 15px; }
  .onb-choices { margin-top: 30px; }
  .onb-choice { height: 68px; padding: 0 15px; gap: 12px; }
  .onb-choice__logo { height: 30px; }
  .onb-choice__logo img { max-width: 132px; max-height: 30px; }
  .onb-connect__head { margin-bottom: 26px; }
  .onb-cta--form { height: 48px; }
}

/* ---------- run timeline (screens 05-07) ---------- */

/* One axis, not three cards.

   The nodes and the connectors between them are a single system so that the
   completion moment planned for the next phase has something to morph: the
   connectors are SVG paths on a known geometry rather than borders, and a path
   can become a letterform where a border cannot.

   Nothing here spins or fills. A page that animates while it waits is asking to
   be watched, and this one explicitly is not - the only thing that moves is a
   node changing state, and only when the run actually changed. */

.onb-stage { text-align: center; }

/* Sized to its own content rather than to a column, so the group sits
   optically centred under the heading instead of hugging the left edge of a
   box far wider than the labels. The cap keeps a long label wrapping instead of
   widening the page. */
.onb-timeline {
  width: max-content;
  max-width: min(420px, 100%);
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.onb-timeline__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  min-height: 68px;
}

.onb-timeline__step:last-child { min-height: 28px; }

/* The rail column owns both the node and the line below it, so the line always
   starts under its own node however tall the row grows. */
.onb-timeline__rail {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  justify-items: center;
  height: 100%;
}

.onb-timeline__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--onb-border);
  background: var(--onb-surface);
  color: transparent;
  transition: border-color 220ms var(--onb-ease), background-color 220ms var(--onb-ease), color 220ms var(--onb-ease);
}

.onb-timeline__node svg { width: 20px; height: 20px; display: block; }

.onb-timeline__link {
  width: 2px;
  height: 100%;
  min-height: 20px;
  color: var(--onb-border);
  transition: color 220ms var(--onb-ease);
}

.onb-timeline__body { padding-top: 3px; min-width: 0; }

.onb-timeline__label {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--onb-muted);
  letter-spacing: -0.01em;
  transition: color 220ms var(--onb-ease);
}

.onb-timeline__meta {
  display: block;
  margin-top: 3px;
  min-height: 18px;
  font-size: 13.5px;
  color: var(--onb-muted);
  font-variant-numeric: tabular-nums;
}

.onb-timeline__meta:empty { min-height: 0; }

/* --- states --- */

.onb-timeline__step.is-completed .onb-timeline__node {
  border-color: var(--onb-blue);
  background: var(--onb-blue);
  color: #ffffff;
}

/*
 * Warning is a step that finished with records to look at later. It is not a
 * failure and is never dressed as one - no red, no alarm - but it stopped
 * sharing completed's solid blue disc, because at a glance that is the only
 * thing the eye reads and it made "3 records to review" look like "nothing to
 * do". Hollow instead of solid, amber instead of blue: a different silhouette
 * before it is a different colour, which is what survives being seen quickly.
 *
 * Deliberately not the orange of is-blocked (#c2410c on #fff4ed). That one has
 * stopped and needs somebody; this one is still going.
 */
.onb-timeline__step.is-warning .onb-timeline__node {
  border-color: #b8860b;
  background: #fdfaf1;
  color: #8a6508;
}

/* The connector stays blue for both: progress continued past this step either
   way, and the completion motion planned around this geometry is unchanged. */
.onb-timeline__step.is-completed .onb-timeline__link,
.onb-timeline__step.is-warning .onb-timeline__link { color: var(--onb-blue); }

.onb-timeline__step.is-completed .onb-timeline__label,
.onb-timeline__step.is-warning .onb-timeline__label { color: var(--onb-ink); }

/* Working is the one the eye should land on: the ring is the accent colour and
   the centre is filled, which reads as present without moving. */
.onb-timeline__step.is-working .onb-timeline__node {
  border-color: var(--onb-blue);
  background: var(--onb-blue-soft);
  color: var(--onb-blue);
}

.onb-timeline__step.is-working .onb-timeline__label {
  color: var(--onb-ink);
  font-weight: 600;
}

.onb-timeline__step.is-working .onb-timeline__meta { color: var(--onb-ink-soft); }

.onb-timeline__step.is-blocked .onb-timeline__node {
  border-color: #c2410c;
  background: #fff4ed;
  color: #c2410c;
}

.onb-timeline__step.is-blocked .onb-timeline__label { color: var(--onb-ink); }

@media (max-width: 640px) {
  .onb-timeline { margin-top: 32px; width: 100%; max-width: none; }
  .onb-timeline__step { min-height: 62px; column-gap: 14px; }
  .onb-timeline__label { font-size: 15px; }
}

/* ---------- ready (screen 07) ---------- */

/* Two scenes, one cell. The timeline that was on screen a moment ago collapses
   toward the middle and the mark arrives where it collected - so both have to
   occupy the same space, or the page would jump between them.

   Everything below is the finished screen by default. The motion state is
   opt-in, set by a marker the preparing screen carries over exactly once, which
   means no JavaScript, reduced motion and every later visit all land here with
   nothing hidden and nothing waiting. */

.onb-ready { text-align: center; }

.onb-ready__scene {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-bottom: 6px;
}

.onb-ready__timeline,
.onb-ready__mark { grid-area: 1 / 1; }

/* The finished screen, as rendered. */
.onb-ready__timeline { display: none; }
.onb-ready__mark { margin-bottom: 0; }
.onb-ready__final { opacity: 1; }

.onb-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 56px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

/* Numbers on the surface: no card, no border, no tile. The figure carries the
   weight and everything under it steps back. */
.onb-metric { min-width: 96px; }

.onb-metric__value {
  display: block;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--onb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.onb-metric__label {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--onb-ink-soft);
}

.onb-metric__detail {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--onb-muted);
}

.onb-ready__close { margin-top: 34px; }
.onb-ready .onb-cta { margin-top: 26px; }

/* --- the first arrival --- */

[data-onb-motion='first'] .onb-ready__timeline {
  display: block;
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--onb-ease), transform 520ms var(--onb-ease);
}

[data-onb-motion='first'] .onb-ready__mark {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 380ms var(--onb-ease), transform 380ms var(--onb-ease);
}

[data-onb-motion='first'] .onb-ready__mark .onb-mark__glow {
  opacity: 0;
  transition: opacity 420ms var(--onb-ease);
}

[data-onb-motion='first'] .onb-ready__final {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--onb-ease), transform 260ms var(--onb-ease);
}

/* Text goes first and quietly, so what remains reads as geometry rather than a
   list losing its words. */
[data-onb-motion='first'] .onb-ready__timeline .onb-timeline__body {
  transition: opacity 220ms var(--onb-ease), transform 220ms var(--onb-ease);
}

.onb-ready.is-collapsing .onb-timeline__body {
  opacity: 0;
  transform: translateY(-5px);
}

/* Then the rail draws itself in toward the middle. No bounce, no rotation,
   nothing that repeats. */
.onb-ready.is-collapsing .onb-ready__timeline {
  opacity: 0;
  transform: scaleY(0.55);
}

.onb-ready.is-marked .onb-ready__mark {
  opacity: 1;
  transform: scale(1);
}

/* One breath, and then it stays put. */
.onb-ready.is-glowing .onb-ready__mark .onb-mark__glow { opacity: 1; }

.onb-ready.is-settled .onb-ready__final {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .onb-ready__scene { min-height: 150px; }
  .onb-metrics { gap: 12px 36px; margin-top: 26px; }
  .onb-metric__value { font-size: 30px; }
  .onb-ready__close { margin-top: 28px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .onb-shell,
  .onb-drawer,
  .onb-phase__dot,
  .onb-help-trigger,
  .onb-drawer__close,
  .onb-cta,
  .onb-choice,
  .onb-choice__arrow,
  .onb-choice--muted .onb-choice__logo img,
  .onb-more__chevron,
  .onb-input,
  .onb-help__dot,
  .onb-help__bubble {
    transition: none !important;
  }
  .onb-timeline__node,
  .onb-timeline__link,
  .onb-timeline__label {
    transition: none !important;
  }
  /* The completion transition is skipped outright rather than shortened: the
     finished screen is what the markup already is, so there is nothing to
     restore and nothing to wait for. */
  [data-onb-motion='first'] .onb-ready__timeline { display: none; }
  [data-onb-motion='first'] .onb-ready__mark,
  [data-onb-motion='first'] .onb-ready__final {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-onb-motion='first'] .onb-ready__mark .onb-mark__glow { opacity: 1; transition: none; }
  .onb-ready__timeline,
  .onb-ready__mark,
  .onb-ready__final,
  .onb-timeline__body {
    transition: none !important;
  }
  .onb-cta:active { transform: none; }
  .onb-choice:hover { transform: none; }
  .onb-choice:hover .onb-choice__arrow { transform: none; }
}