/* Del Plaza — onboarding*/

/* =============================================================================
   1 · Page Canvas & Breadcrumb
   =============================================================================*/
.onboarding-page {
  background-color: var(--color-surface-secondary); /* Parchment Cream*/
}

.ob-breadcrumb .breadcrumb {
  margin-bottom: var(--spacing-sm);
}

/* 2 · Hero Avenue — the admissions desk in Deep Navy*/
.ob-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--deep-navy);
  color: var(--color-content-on-dark);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-xs);
  box-shadow: var(--shadow-medium);
}

/* Cognac rule sealing the top edge — the counter edge of the desk*/
.ob-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--cognac);
}

.ob-hero__inner {
  max-width: 62ch;
}

.ob-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-nano);
  margin-bottom: var(--spacing-xs);
}

.ob-hero__badge {
  margin-bottom: 0;
  gap: var(--spacing-quark);
}

.ob-hero__badge-text {
  margin-top: var(--spacing-tiny); /* optical centring of uppercase glyphs*/
}

.ob-hero__flag {
  display: block;
  width: 18px;
  height: auto;
}

.ob-hero__overline {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--golden-milk);
}

.ob-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-nano);
}

.ob-hero__lead {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-content-on-dark);
  margin-bottom: var(--spacing-sm);
}

.ob-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-nano);
  list-style: none;
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-xs) 0 0;
  border-top: 1px solid var(--color-border-on-dark);
}

.ob-hero__fact {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-nano);
}

.ob-hero__fact-figure {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--golden-milk);
}

.ob-hero__fact-label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-on-dark);
}

.ob-hero__note {
  font-size: 0.8125rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-content-on-dark);
  border-left: 2px solid var(--cognac);
  padding-left: var(--spacing-nano);
  margin-bottom: 0;
}

/* =============================================================================
   3 · Before You Begin — three documents
   =============================================================================*/
.ob-brief {
  margin-top: var(--spacing-lg);
}

.ob-brief__title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
  margin-bottom: var(--spacing-xxs);
}

.ob-brief__card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xxs) var(--spacing-xs);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.ob-brief__card:hover {
  box-shadow: var(--shadow-heavy);
  transform: translateY(-4px);
}

.ob-brief__icon {
  display: inline-flex;
  color: var(--cognac);
  font-size: 1.375rem;
  margin-bottom: var(--spacing-quark);
}

.ob-brief__card-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
}

.ob-brief__card-text {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--slate-charcoal);
  margin-bottom: 0;
}

/* =============================================================================
   4 · Application Grid — rail beside the steps
   =============================================================================*/
.ob-application {
  margin-top: var(--spacing-lg);
}

/* =============================================================================
   5 · Progress Rail — navigational wayfinding
   =============================================================================*/
.ob-rail {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xxs);
  box-shadow: var(--shadow-light);
}

.ob-rail__head {
  padding-bottom: var(--spacing-nano);
  border-bottom: 1px solid var(--color-border-primary);
  margin-bottom: var(--spacing-nano);
}

.ob-rail__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--cognac);
}

.ob-rail__count {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-content-heading);
  margin: var(--spacing-quark) 0 var(--spacing-nano);
}

.ob-rail__bar {
  height: 3px;
  background-color: var(--muted-silver);
  overflow: hidden;
}

.ob-rail__bar-fill {
  display: block;
  height: 100%;
  width: 12.5%;
  background-color: var(--cognac);
  transition: width 0.35s var(--ease-out);
}

.ob-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-quark);
}

.ob-rail__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-nano);
  width: 100%;
  padding: 0.5rem var(--spacing-nano);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0 0 6px 6px; /* geometry*/
  text-align: left;
  cursor: pointer;
  transition: all 0.2s var(--ease-in-out);
}

.ob-rail__link:hover {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-primary);
}

.ob-rail__link:disabled,
.ob-rail__link[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.ob-rail__item.is-locked .ob-rail__link {
  cursor: not-allowed;
}

.ob-rail__num {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ash-grey);
  flex-shrink: 0;
}

.ob-rail__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ob-rail__title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-content-heading);
}

.ob-rail__sub {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--ash-grey);
}

.ob-rail__tick {
  margin-left: auto;
  color: var(--cognac);
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

/* ---- Rail states ----*/
.ob-rail__item.is-current .ob-rail__link {
  background-color: var(--color-surface-secondary);
  border-color: var(--cognac);
  box-shadow: inset 3px 0 0 var(--cognac);
}

.ob-rail__item.is-current .ob-rail__num {
  color: var(--cognac);
}

.ob-rail__item.is-done .ob-rail__tick {
  opacity: 1;
}

.ob-rail__item.is-done .ob-rail__num {
  color: var(--deep-navy);
}

.ob-rail__item.is-closed .ob-rail__link {
  border-color: var(--imperial-plum);
  background-color: rgba(46, 26, 71, 0.06);
  box-shadow: inset 3px 0 0 var(--imperial-plum);
}

.ob-rail__foot {
  margin-top: var(--spacing-nano);
  padding-top: var(--spacing-nano);
  border-top: 1px solid var(--color-border-primary);
  display: grid;
  gap: var(--spacing-quark);
}

.ob-rail__draft,
.ob-rail__guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-quark);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-charcoal);
}

.ob-rail__draft i,
.ob-rail__guarantee i {
  color: var(--cognac);
  margin-top: 0.125rem;
}

.ob-rail__draft.is-saved i {
  color: var(--deep-navy);
}

/* ---- Compact progress below lg ----*/
.ob-mini {
  display: flex;
  align-items: center;
  gap: var(--spacing-nano);
  margin-bottom: var(--spacing-xxs);
}

.ob-mini__count {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
  flex-shrink: 0;
}

.ob-mini__bar {
  flex: 1;
  height: 2px;
  background-color: var(--muted-silver);
  overflow: hidden;
}

.ob-mini__bar-fill {
  display: block;
  height: 100%;
  width: 12.5%;
  background-color: var(--cognac);
  transition: width 0.35s var(--ease-out);
}

/* =============================================================================
   6 · Step Card — one step, four Sections
   =============================================================================*/
.ob-step {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-light);
  overflow: hidden;
  animation: fadeInUp 0.45s var(--ease-out) both;
}

/* One form element holds all eight steps; steps that are not current take no
   space, so the questionnaire occupies a single Block in the grid.*/
.ob-form {
  display: block;
}

.ob-step__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xxs);
  background-color: var(--alabaster);
  border-bottom: 1px solid var(--color-border-primary);
}

.ob-step__heading {
  flex: 1;
  min-width: 0;
}

.ob-step__index {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--cognac);
}

.ob-step__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--slate-charcoal);
  margin-bottom: var(--spacing-quark);
}

.ob-step__title {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--spacing-quark);
}

.ob-step__lead {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--slate-charcoal);
  margin-bottom: 0;
  max-width: 66ch;
}

.ob-step__body {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-md);
}

/* The smallest width a grid item will take is, by default, the smallest width its
   content will take — and one item here holds the Seller Agreement, a document whose
   Schedules are tables a good deal wider than a telephone. Left alone, that one item
   widens the step's single column past the card, and the card's own `overflow: hidden`
   then cuts the right of every Section in the step, not only the Agreement's: the
   register, the ticks, the signature field. That is the fault that reads as "no padding
   on the right" wherever it appears.

   Zeroing the minimum lets the column stay the width of the card, and the wide thing
   inside scrolls within its own frame instead (the Schedules' scrollers, and the
   Agreement's reading frame, are set in _partials/seller-agreement.html.twig). The
   second selector covers the same fault one level down, inside the Response band. */
.ob-step__body > *,
.ob-fields > * {
  min-width: 0;
}

/* Section bands, in source order:
   01 Field Labels · 02 Your Response · 03 In Plain Language · 04 The Agreement */

/* =============================================================================
   7 · Sections — the four mandated bands
   =============================================================================*/
.ob-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-nano);
  padding-bottom: var(--spacing-nano);
  border-bottom: 1px solid var(--color-border-primary);
  margin-bottom: var(--spacing-xs);
}

.ob-section__index {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--cognac);
  border: 1px solid var(--cognac);
  border-radius: 0 0 3px 3px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.ob-section__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--slate-charcoal);
}

.ob-section__title {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0;
}

.ob-section__titles {
  min-width: 0;
}

/* ---- Band accents — each numbered chip takes the colour of the ground it
   introduces, so the four-beat rhythm of a step reads at a glance. ----*/
.ob-section--labels .ob-section__index {
  color: var(--tawny-umber);
  border-color: var(--tawny-umber);
}

.ob-section--fields .ob-section__index {
  background-color: var(--cognac);
  border-color: var(--cognac);
  color: #ffffff;
}

.ob-section--fields .ob-section__head {
  border-bottom-color: var(--cognac);
}

.ob-section--info .ob-section__index {
  background-color: var(--oxford-light);
  border-color: var(--deep-navy);
  color: var(--deep-navy);
}.ob-section--clause .ob-section__index {
  color: var(--deep-navy);
  border-color: var(--deep-navy);
}

.ob-section--clause .ob-section__head {
  border-bottom-color: var(--deep-navy);
}

/* =============================================================================
   8 · — Field Labels (the register of particulars)
   =============================================================================*/
.ob-manifest {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ob-manifest__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-quark) var(--spacing-nano);
  align-items: baseline;
  padding: var(--spacing-nano) 0;
  border-bottom: 1px dashed var(--muted-silver);
}

.ob-manifest__item:last-child {
  border-bottom: 0;
}

.ob-manifest__num {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--tawny-umber);
  padding-top: 1px;
}

.ob-manifest__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
}

.ob-manifest__note {
  grid-column: 2 / 3;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-charcoal);
}

.ob-manifest__flag {
  justify-self: end;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--slate-charcoal);
  background-color: var(--alabaster);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 3px 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

.ob-manifest__flag--required {
  background-color: var(--cognac);
  border-color: var(--cognac);
  color: #ffffff;
}

.ob-manifest__flag--decisive {
  background-color: var(--imperial-plum);
  border-color: var(--imperial-plum);
  color: #ffffff;
}

/* =============================================================================
   9 · — Your Response (controls)
   =============================================================================*/
.ob-fields {
  display: grid;
  gap: var(--spacing-xs);
}

.ob-fields__pair {
  display: grid;
  gap: var(--spacing-xs);
}

.ob-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-nano);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
}

.ob-field__num {
  font-size: 0.625rem;
  color: var(--cognac);
}

.ob-field__hint {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-charcoal);
  margin: var(--spacing-quark) 0 0;
}

.ob-field--fixed .form-control[readonly] {
  background-color: var(--alabaster);
  color: var(--slate-charcoal);
  cursor: not-allowed;
}

/* ---- Form controls (page-scoped, mirrors the auth/checkout patterns) ----*/
.onboarding-page .form-control,
.onboarding-page .form-select {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--color-content-primary);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 9px 9px; /* geometry*/
  padding: 0.625rem 0.875rem;
  transition: border-color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out);
}

.onboarding-page textarea.form-control {
  min-height: 7rem;
  line-height: 1.7;
  resize: vertical;
}

.onboarding-page .form-control::placeholder {
  color: var(--ash-grey);
  font-weight: 300;
  font-size: 0.875rem;
}

.onboarding-page .form-control:hover,
.onboarding-page .form-select:hover {
  border-color: var(--tawny-umber);
}

.onboarding-page .form-control:focus,
.onboarding-page .form-select:focus {
  border-color: var(--cognac);
  box-shadow: 0 0 0 2px rgba(162, 99, 48, 0.15);
  outline: none;
}

/* Invalid states stay inside the permitted palette: Imperial Plum carries the
   refusal, Muted Silver the neutral, Deep Navy the confirmation.*/
.onboarding-page .form-control.is-invalid,
.onboarding-page .form-select.is-invalid {
  border-color: var(--imperial-plum);
  box-shadow: 0 0 0 2px rgba(46, 26, 71, 0.12);
  background-image: none;
}

.onboarding-page .form-control.is-valid,
.onboarding-page .form-select.is-valid {
  border-color: var(--deep-navy);
  box-shadow: 0 0 0 2px rgba(60, 71, 122, 0.12);
  background-image: none;
}

.onboarding-page .form-message {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
}

.onboarding-page .form-message--error {
  color: var(--imperial-plum);
}

.onboarding-page .form-message--success {
  color: var(--deep-navy);
}

.onboarding-page .form-check-input {
  border-color: var(--color-border-primary);
  border-radius: 0 0 3px 3px;
  margin-top: 0.1875rem;
  flex-shrink: 0;
}

.onboarding-page .form-check-input:checked {
  background-color: var(--deep-navy);
  border-color: var(--deep-navy);
}

.onboarding-page .form-check-input:focus {
  border-color: var(--cognac);
  box-shadow: 0 0 0 2px rgba(162, 99, 48, 0.15);
}

.onboarding-page .form-check-input.is-invalid {
  border-color: var(--imperial-plum);
}

/* ---- Number field with unit mark ----*/
.ob-input-suffix {
  display: flex;
  align-items: stretch;
}

.ob-input-suffix .form-control {
  border-radius: 0 0 0 9px;
}

.ob-input-suffix__mark {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacing-xxxs);
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-left: 0;
  border-radius: 0 0 9px 0;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-content-heading);
}

/* ---- Checkbox rows ----*/
.ob-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-xxxs);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-in-out);
}

.ob-check:hover {
  border-color: var(--cognac);
  background-color: rgba(249, 243, 229, 0.6);
}

.ob-check.is-checked {
  border-color: var(--deep-navy);
  background-color: var(--color-surface-secondary);
}

.ob-check__text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--slate-charcoal);
}

.ob-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--spacing-quark);
}

.ob-check--grid {
  align-items: center;
  padding: var(--spacing-quark) var(--spacing-nano);
}

.ob-check--grid .ob-check__text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-heading);
}

/* ---- Choice cards (radios) ----*/
.ob-choices {
  display: grid;
  gap: var(--spacing-nano);
}

.ob-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  padding: var(--spacing-xxs);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-in-out);
}

.ob-choice:hover {
  border-color: var(--cognac);
  box-shadow: var(--shadow-light);
  transform: translateY(-2px);
}

.ob-choice.is-selected {
  border-color: var(--cognac);
  background-color: var(--color-surface-secondary);
  box-shadow: inset 3px 0 0 var(--cognac);
}

.ob-choice--decline.is-selected {
  border-color: var(--imperial-plum);
  box-shadow: inset 3px 0 0 var(--imperial-plum);
}

.ob-choice__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-quark);
}

.ob-choice__input {
  margin-top: 0.1875rem;
  flex-shrink: 0;
}

.ob-choice__title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-content-heading);
}

.ob-choice__desc {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--slate-charcoal);
}

.ob-choice__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-quark);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.5625rem;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 0 0 3px 3px;
}

.ob-choice__tag--eligible {
  background-color: var(--cognac);
  color: #ffffff;
}

.ob-choice__tag--decline {
  background-color: var(--imperial-plum);
  color: #ffffff;
}

/* ---- Key figure ----*/
.ob-keyfigure {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-nano);
  margin-bottom: var(--spacing-nano);
}

.ob-keyfigure__value {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--deep-navy);
}

.ob-keyfigure__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--slate-charcoal);
}

/* ---- Register readout (Step 08) ----*/
.ob-register {
  display: grid;
  gap: var(--spacing-xxs);
}

.ob-register__group {
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xxs) var(--spacing-xxxs);
}

.ob-register__heading {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--deep-navy);
  margin-bottom: var(--spacing-quark);
  padding-bottom: var(--spacing-quark);
  border-bottom: 1px solid var(--color-border-primary);
}

.ob-register__list {
  margin: 0;
}

.ob-register__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--spacing-quark) 0;
  border-bottom: 1px dashed var(--muted-silver);
}

.ob-register__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ob-register__row dt {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--slate-charcoal);
}

.ob-register__row dd {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-content-heading);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- Signature field — Univers Italic, as a hand would write ----*/
.ob-signature__input {
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
}

/* 10 · — In Plain Language*/
.ob-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs);
  background-color: var(--oxford-light);
  border-left: 4px solid var(--deep-navy);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.ob-info__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--deep-navy);
}

.ob-info__body {
  min-width: 0;
}

.ob-info__body p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--slate-charcoal);
  margin-bottom: var(--spacing-nano);
  max-width: 68ch;
}

.ob-info__list {
  list-style: none;
  margin: 0 0 var(--spacing-nano);
  padding: 0;
  display: grid;
  gap: var(--spacing-quark);
}

.ob-info__list li {
  position: relative;
  padding-left: var(--spacing-xxs);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--slate-charcoal);
}

.ob-info__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 2px;
  background-color: var(--deep-navy);
}

.ob-info__list strong {
  font-weight: 600;
  color: var(--color-content-heading);
}

.ob-info__aside {
  margin: var(--spacing-nano) 0 0;
  padding-top: var(--spacing-nano);
  border-top: 1px solid rgba(60, 71, 122, 0.35);
  font-style: italic;
}

.ob-info__aside strong {
  font-weight: 600;
  color: var(--color-content-heading);
}

.ob-info__body > p:last-child {
  margin-bottom: 0;
}

/* 11 · — The Seller Agreement clause, set in full*/
.ob-clause {
  position: relative;
  overflow: hidden;
  background-color: var(--deep-navy);
  color: var(--color-content-on-dark);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xxs);
  transition: box-shadow 0.3s var(--ease-out);
}

.ob-clause::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--cognac);
  transition: height 0.3s var(--ease-out);
}

.ob-clause:hover {
  box-shadow: var(--shadow-heavy);
}

.ob-clause:hover::before {
  height: 5px;
}

.ob-clause__seal {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-quark);
  background-color: var(--golden-milk);
  color: var(--deep-navy);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.5625rem;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0 0 3px 3px;
  margin-bottom: var(--spacing-xxs);
  transition: background-color 0.2s var(--ease-out);
}

.ob-clause__seal + .ob-clause__text,
.ob-clause__seal + .ob-clause__part {
  margin-top: 0;
}

.ob-clause__ref {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-quark);
}

.ob-clause__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-content-on-dark);
  max-width: 68ch;
  margin-bottom: var(--spacing-xxs);
}

.ob-clause__part {
  border-top: 1px solid var(--color-border-on-dark);
  padding-top: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.ob-clause__part:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.ob-clause__part .ob-clause__text:last-child {
  margin-bottom: 0;
}

/* ---- Clause cloned into the terminal panel ----*/
.ob-terminal__clause .ob-clause {
  margin-top: var(--spacing-xs);
}

.ob-terminal__clause .ob-clause__seal {
  display: none;
}

/* =============================================================================
   12 · Step Navigation & Withdrawal
   =============================================================================*/
.ob-step__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-nano);
  padding: var(--spacing-xs);
  background-color: var(--alabaster);
  border-top: 1px solid var(--color-border-primary);
}

.ob-nav__primary {
  margin-left: auto;
  order: 2;
}

.ob-nav__secondary {
  order: 1;
}

.ob-nav__exit {
  order: 3;
  flex-basis: 100%;
}

.ob-exit__link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--slate-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ob-exit__link:hover {
  color: var(--cognac);
}

.ob-exit__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-nano);
  margin-top: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-xxxs);
  background-color: #ffffff;
  border: 1px solid var(--muted-silver);
  border-radius: 0 0 8px 8px;
}

.ob-exit__text {
  flex-basis: 100%;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--slate-charcoal);
  margin-bottom: 0;
}

/* =============================================================================
   13 · Terminal Panel — the application closes here
   =============================================================================*/
.ob-terminal,
.ob-received {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  animation: fadeInUp 0.45s var(--ease-out) both;
}

.ob-terminal__band,
.ob-received__band {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  padding: var(--spacing-sm) var(--spacing-xs);
  color: var(--color-content-on-dark);
}

.ob-terminal__band {
  background-color: var(--imperial-plum);
}

.ob-received__band {
  background-color: var(--deep-navy);
}

.ob-terminal__seal,
.ob-received__seal {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  background-color: var(--golden-milk);
  border-radius: 0 0 9px 9px;
}

.ob-terminal__seal {
  color: var(--imperial-plum);
}

.ob-received__seal {
  color: var(--deep-navy);
}

.ob-terminal__heading,
.ob-received__heading {
  min-width: 0;
}

.ob-terminal__actor,
.ob-received__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--golden-milk);
}

.ob-terminal__title,
.ob-received__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--parchment-cream);
  margin: var(--spacing-quark) 0;
}

.ob-terminal__ref,
.ob-received__ref {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-content-on-dark);
}

.ob-terminal__ref strong,
.ob-received__ref strong {
  font-weight: 600;
  color: #ffffff;
}

.ob-terminal__body,
.ob-received__body {
  padding: var(--spacing-sm) var(--spacing-xs);
}

.ob-terminal__code {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--cognac);
  margin-bottom: var(--spacing-nano);
}

.ob-terminal__reason {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--slate-charcoal);
  max-width: 68ch;
  margin-bottom: var(--spacing-xxs);
}

.ob-terminal__remedies {
  margin-top: var(--spacing-sm);
}

.ob-remedies__title {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-nano);
}

.ob-remedies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-nano);
}

.ob-remedies li {
  position: relative;
  padding-left: var(--spacing-xxs);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--slate-charcoal);
}

.ob-remedies li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 2px;
  background-color: var(--cognac);
}

.ob-terminal__note {
  margin: var(--spacing-sm) 0 0;
  padding-top: var(--spacing-nano);
  border-top: 1px dashed var(--muted-silver);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--slate-charcoal);
}

.ob-terminal__foot,
.ob-received__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-nano);
  padding: var(--spacing-xs);
  background-color: var(--alabaster);
  border-top: 1px solid var(--color-border-primary);
}

/* =============================================================================
   14 · Received Panel — the file is with the compliance desk
   =============================================================================*/
.ob-received__facts {
  display: grid;
  gap: var(--spacing-nano);
  margin-bottom: var(--spacing-sm);
}

.ob-received__fact {
  padding: var(--spacing-nano) var(--spacing-xxxs);
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 8px 8px;
}

.ob-received__fact dt {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--cognac);
  margin-bottom: 2px;
}

.ob-received__fact dd {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-content-heading);
  margin: 0;
  overflow-wrap: anywhere;
}

.ob-received__subtitle {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--spacing-nano);
}

.ob-accepted {
  list-style: none;
  margin: 0 0 var(--spacing-sm);
  padding: 0;
}

.ob-accepted__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  padding: var(--spacing-quark) 0;
  border-bottom: 1px dashed var(--muted-silver);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--slate-charcoal);
}

.ob-accepted__item:last-child {
  border-bottom: 0;
}

.ob-accepted__item i {
  color: var(--cognac);
  margin-top: 0.125rem;
}

.ob-accepted__item strong {
  font-weight: 600;
  color: var(--color-content-heading);
}

.ob-next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-nano);
}

.ob-next-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-xxxs);
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 8px 8px;
}

.ob-next-steps__num {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cognac);
  flex-shrink: 0;
}

.ob-next-steps__body {
  min-width: 0;
}

.ob-next-steps__title {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-content-heading);
}

.ob-next-steps__text {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--slate-charcoal);
}

/* =============================================================================
   15 · Closing Note
   =============================================================================*/
.ob-concierge {
  margin-top: var(--spacing-md);
}

/* =============================================================================
   16 · Responsive Amplification — mobile-first
   =============================================================================*/
@media (min-width: 660px) {
  .ob-hero {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .ob-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
  }

  .ob-hero__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-quark);
  }

  .ob-step__head,
  .ob-step__body,
  .ob-terminal__body,
  .ob-received__body {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .ob-fields__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ob-register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ob-received__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ob-register__row {
    grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--spacing-nano);
  }
}

@media (min-width: 1024px) {
  .ob-hero {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .ob-step__head,
  .ob-step__body,
  .ob-terminal__body,
  .ob-received__body {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .ob-rail {
    position: sticky;
    top: var(--spacing-sm);
    padding: var(--spacing-xs);
  }
}

@media (min-width: 1200px) {
  .ob-step__body {
    padding-bottom: var(--spacing-lg);
  }

  .ob-hero__inner {
    max-width: 66ch;
  }
}

/* =============================================================================
   17 · Print — the paperwork reads on paper
   =============================================================================*/
@media print {
  .ob-rail,
  .ob-mini,
  .ob-step__nav,
  .ob-breadcrumb {
    display: none !important;
  }

  .ob-step {
    box-shadow: none;
    page-break-inside: avoid;
  }

  .ob-clause,
  .ob-info {
    border: 1px solid var(--muted-silver);
  }
}

/* ---- The market chooser --------------------------------------------------------------
   The first decision on the page: which market the applicant is applying to. It sits at the top of
   the page, just below the breadcrumb and outside the form, because everything the form asks — the
   legal forms, the register, the register number, the clauses — is written from the market it names.

   It stands on a card of its own, and the card borrows the notice's geometry (components.css:
   .auth-success--flash.auth-success--oxford-light) — a Muted-Silver hairline re-tinted navy against
   the warm ground (the pale ground swallows the grey, as that panel's own note says), the house's
   sharp top squared against a 12px foot, and a 3px lintel — but wears the house's own colours: a
   Golden Milk ground, and the lintel in Imperial Plum. The panel's ink is left alone, for the same
   reason it is left alone there: both grounds are ones the house already puts its dark ink on. */
.ob-market {
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-xxs) var(--spacing-xs);
    background-color: var(--golden-milk);
    border: 1px solid rgba(60, 71, 122, 0.22);
    border-top: 3px solid var(--imperial-plum);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-light);
}

.ob-market__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.35rem;
}

.ob-market__select {
    font-weight: 600;
}

.ob-market__hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    opacity: 0.8;
}