/* ==========================================================================
   APPLICATION FORM
   --------------------------------------------------------------------------
   Loaded on top of style.css, which is the landing page's stylesheet. Every
   colour, radius and typeface here comes from that file's tokens — this only
   adds the handful of things a multi-step form needs and a marketing page
   does not: the step rail, the panel sizing, and the one-time code boxes.

   The panels are deliberately narrower and shorter than the landing page's
   80px-padded sections. A form is worked through, not read.
   ========================================================================== */


/* ==========================================================================
   01. PAGE
   ========================================================================== */
.apply-page {
  padding: 34px 0 60px;
  background-color: var(--color-page-background);
}

.apply-shell {
  max-width: 780px;
  margin: 0 auto;
}

/* A form panel, sized for a form rather than for a landing section. */
.apply-panel {
  padding: 26px 28px 28px;
  margin-bottom: 14px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

.apply-panel__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.apply-panel__note {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.apply-panel__group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.apply-panel__group-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ==========================================================================
   02. STEP RAIL
   Three steps, so it stays readable rather than becoming a progress bar with
   numbers nobody reads.
   ========================================================================== */
.apply-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.apply-step {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  opacity: 0.62;
  transition: opacity 0.2s var(--easing-standard),
              border-color 0.2s var(--easing-standard);
}

.apply-step.is-current { opacity: 1; border-color: var(--color-black); }
.apply-step.is-done    { opacity: 1; }

.apply-step__number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 7px;
  border-radius: var(--radius-badge);
  background-color: var(--color-surface-light);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.apply-step.is-current .apply-step__number {
  background-color: var(--color-black);
  color: var(--color-white);
}

.apply-step.is-done .apply-step__number {
  background-color: var(--color-accent-yellow);
  color: var(--color-black);
}

.apply-step__title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-black);
}

.apply-step__note {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 300;
  color: var(--color-text-muted);
}


/* ==========================================================================
   03. PANES
   ========================================================================== */
.apply-pane { display: none; }
.apply-pane.is-active { display: block; animation: apply-pane-in 0.28s var(--easing-standard); }

@keyframes apply-pane-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.apply-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.apply-actions .button { flex: 1; justify-content: center; }
.apply-actions .button--outline { flex: 0 0 auto; }


/* ==========================================================================
   04. FIELDS
   form-field, form-field__label, form-input and form-field__phone-group all
   come from style.css. These are only the arrangements.
   ========================================================================== */
.apply-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.apply-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apply-grid__wide  { grid-column: 1 / -1; }

textarea.form-input { min-height: 88px; resize: vertical; line-height: 1.6; }
select.form-input   { cursor: pointer; }

.apply-error {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--color-negative);
}

.apply-hint {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 300;
  color: var(--color-text-muted);
}

.form-input.has-error { border-color: var(--color-negative); }


/* ---- Choice tiles: applicant type, and what they are applying for ---- */
.apply-choices { display: grid; gap: 10px; margin-bottom: 12px; }
.apply-choices--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.apply-choice {
  position: relative;
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.18s var(--easing-standard),
              background-color 0.18s var(--easing-standard);
}

.apply-choice input { position: absolute; opacity: 0; pointer-events: none; }
.apply-choice:hover { border-color: var(--color-text-faint); }
.apply-choice:has(input:checked) {
  border-color: var(--color-black);
  background-color: var(--color-surface-light);
}

.apply-choice__icon { font-size: 17px; color: var(--color-black); }
.apply-choice__title { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 500; color: var(--color-black); }
.apply-choice__note  { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 300; color: var(--color-text-muted); }


/* ==========================================================================
   05. ONE-TIME CODE
   ========================================================================== */
/* minmax(0, 1fr), not 1fr. A plain 1fr means minmax(auto, 1fr), and an input's
   automatic minimum width is its default size — around twenty characters. Six
   columns that each refuse to go below that is how six small boxes end up two
   thousand pixels wide. */
.apply-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 320px;
}

.apply-code__digit {
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background-color: var(--color-surface-light);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--color-black);
  outline: none;
  transition: border-color 0.18s, background-color 0.18s;
}

.apply-code__digit:focus { border-color: var(--color-black); background-color: var(--color-white); }
.apply-code__digit.is-filled { background-color: var(--color-white); }
.apply-code.has-error .apply-code__digit { border-color: var(--color-negative); }

.apply-verify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.apply-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-badge);
  background-color: var(--color-surface-light);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.apply-verified-tag.is-verified {
  background-color: var(--color-positive-soft);
  color: var(--color-positive);
}


/* ==========================================================================
   06. UPLOADS
   ========================================================================== */
.apply-upload {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
}

.apply-upload + .apply-upload { margin-top: 9px; }
.apply-upload.is-filled { border-style: solid; border-color: var(--color-positive); background-color: var(--color-positive-soft); }
.apply-upload.has-error { border-style: solid; border-color: var(--color-negative); }

.apply-upload__info { flex: 1; min-width: 0; }
.apply-upload__name { display: block; font-size: 13px; font-weight: 500; color: var(--color-black); }
.apply-upload__note { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 300; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.apply-upload__tag {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-badge);
  background-color: var(--color-white);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.apply-upload__tag--required { color: var(--color-negative); }
.apply-upload input[type="file"] { display: none; }


/* ==========================================================================
   07. SUMMARY AND OUTCOME
   ========================================================================== */
.apply-summary { border-top: 1px solid var(--color-border); }

.apply-summary__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.apply-summary__label { font-weight: 300; color: var(--color-text-muted); }
.apply-summary__value { font-weight: 500; color: var(--color-black); word-break: break-word; }

.apply-done { text-align: center; padding: 12px 0 4px; }

.apply-done__tick {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: var(--radius-card);
  background-color: var(--color-positive-soft);
  color: var(--color-positive);
  font-size: 25px;
}

.apply-reference {
  margin: 16px auto 0;
  padding: 14px 18px;
  max-width: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
}

.apply-reference small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.apply-reference b {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.apply-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  margin-bottom: 14px;
  border-left: 3px solid var(--color-accent-yellow);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
  background-color: var(--color-accent-yellow-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-black-soft);
}

.apply-notice--error {
  border-left-color: var(--color-negative);
  background-color: var(--color-negative-soft);
}

.apply-notice i { flex: none; margin-top: 2px; }


/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */
@media (max-width: 767.98px) {
  .apply-panel { padding: 20px 18px 22px; }
  .apply-grid, .apply-grid--three, .apply-choices--two { grid-template-columns: 1fr; }
  .apply-summary__row { grid-template-columns: 1fr; gap: 2px; }
  .apply-steps { grid-template-columns: 1fr; gap: 6px; }
  .apply-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  .apply-step__number { margin-bottom: 0; }
  .apply-code { max-width: none; }
}


/* ==========================================================================
   09. TWO-COLUMN LAYOUT
   --------------------------------------------------------------------------
   The brand rail on the left, the form on the right. The rail is sticky from
   lg up so the reassurance and the two escape links stay in view while a long
   form is worked through — a visitor who reaches step 3 and wants to check an
   existing application should not have to scroll back to the top to find it.
   ========================================================================== */
.apply-page { padding: 28px 0 60px; }

.apply-layout { align-items: flex-start; }

.apply-rail {
  padding: 26px 26px 24px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

@media (min-width: 992px) {
  .apply-rail { position: sticky; top: 24px; }
}

.apply-rail__logo { display: block; margin-bottom: 20px; }
.apply-rail__logo img { display: block; height: 34px; width: auto; }

.apply-rail__title {
  margin: 12px 0 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.16;
  color: var(--color-black);
}

.apply-rail__text {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.apply-rail__points { list-style: none; margin: 18px 0 0; padding: 0; }

.apply-rail__points li {
  display: flex;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.apply-rail__points i { flex: none; margin-top: 2px; font-size: 13px; color: var(--color-black); }

.apply-rail__actions {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.apply-rail__footnote {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-faint);
}


/* ==========================================================================
   10. MOBILE VERIFICATION
   --------------------------------------------------------------------------
   The number and the Send button sit on one line; the code panel below only
   appears once a code has actually gone out. Showing six empty boxes before
   anybody has asked for a code invites people to type in them and wonder why
   nothing happens.
   ========================================================================== */
.apply-verify { display: flex; gap: 8px; align-items: stretch; }
.apply-verify__number { flex: 1; min-width: 0; }
.apply-verify__send { flex: none; white-space: nowrap; }

.apply-otp {
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
  animation: apply-otp-in 0.25s var(--easing-standard);
}

@keyframes apply-otp-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.apply-otp.is-verified {
  border-color: var(--color-positive);
  background-color: var(--color-positive-soft);
}

.apply-otp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.apply-otp__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-black);
}

.apply-otp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.apply-otp__resend {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: underline;
  cursor: pointer;
}

.apply-otp__resend[disabled] {
  color: var(--color-text-faint);
  text-decoration: none;
  cursor: default;
}

/* The boxes themselves: bigger, and they fill the panel rather than hugging
   one edge of it. */
.apply-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 340px;
}

.apply-code__digit {
  height: 52px;
  background-color: var(--color-white);
}

.apply-code__digit:focus {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, 0.07);
}

.apply-code.has-error { animation: apply-code-shake 0.4s var(--easing-standard); }

@keyframes apply-code-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(5px); }
}

@media (max-width: 575.98px) {
  .apply-verify { flex-direction: column; }
  .apply-verify__send { width: 100%; justify-content: center; }
  .apply-code { max-width: none; gap: 6px; }
  .apply-code__digit { height: 46px; font-size: 16px; }
}


/* ==========================================================================
   11. TAG FIELDS
   --------------------------------------------------------------------------
   Free text on specialisation gives you "debt recovery", "Debt Recovery" and
   "loan default matters" for the same thing, and none of them match when a
   case is allocated. Suggestions make the common answers one tap; typing is
   still allowed, because no list covers everybody.
   ========================================================================== */
.tag-field__chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-field__chosen:not(:empty) { margin-bottom: 8px; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: var(--radius-badge);
  background-color: var(--color-black);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-white);
}

.tag-chip button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  color: var(--color-white);
  cursor: pointer;
}

.tag-chip button:hover { background-color: rgba(255, 255, 255, 0.32); }

.tag-field__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.tag-suggestion {
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-badge);
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.tag-suggestion:hover { border-color: var(--color-black); color: var(--color-black); }


/* ==========================================================================
   12. UPLOAD ROWS
   ========================================================================== */
.apply-upload__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-badge);
  background-color: var(--color-white);
  font-size: 14px;
  color: var(--color-text-muted);
}

.apply-upload.is-filled .apply-upload__icon { color: var(--color-positive); }
.apply-upload.has-error .apply-upload__icon { color: var(--color-negative); }
.apply-upload__choose { flex: none; white-space: nowrap; }

/* Read-only fields the lookups fill in, so they do not look broken. */
.form-input[readonly] {
  background-color: var(--color-surface-light);
  color: var(--color-text-muted);
  cursor: default;
}


/* ==========================================================================
   13. DOCUMENTS ON THE STATUS PAGE
   --------------------------------------------------------------------------
   An applicant opens this page to find out one thing: is there anything I have
   to do. So the state of each document is the loudest part of the row, and the
   button that fixes it sits right next to the reason it was refused.
   ========================================================================== */
.status-document {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.status-document + .status-document { margin-top: 8px; }

.status-document--verified { border-color: var(--color-positive); background-color: var(--color-positive-soft); }
.status-document--rejected { border-color: var(--color-negative); background-color: var(--color-negative-soft); }
.status-document--missing  { border-style: dashed; background-color: var(--color-surface-light); }

.status-document__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-badge);
  background-color: var(--color-white);
  font-size: 13px;
  color: var(--color-text-muted);
}

.status-document--verified .status-document__icon { color: var(--color-positive); }
.status-document--rejected .status-document__icon { color: var(--color-negative); }

.status-document__body { flex: 1; min-width: 0; }

.status-document__name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-black);
}

.status-document__note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.status-document--rejected .status-document__note { color: var(--color-negative); }

.status-document__form { flex: none; margin: 0; }
.status-document__choose { cursor: pointer; white-space: nowrap; }

@media (max-width: 575.98px) {
  .status-document { flex-wrap: wrap; }
  .status-document__form { width: 100%; }
  .status-document__choose { width: 100%; justify-content: center; }
}


/* ==========================================================================
   14. STAGE TRACK
   --------------------------------------------------------------------------
   Four stages across the top. The rail is drawn on the list rather than on
   each step, so the line between two steps is one continuous piece and does
   not develop hairline gaps at some zoom levels.

   The rail sits behind the markers, and each marker has an opaque background,
   so the line appears to run between them rather than through them.
   ========================================================================== */
.stage-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail. It stops half a column short at each end so it does not stick out
   past the first and last markers. */
.stage-track::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-color: var(--color-border);
}

.stage-track__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  text-align: center;
}

.stage-track__marker {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-white);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-faint);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.stage-track__title {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.stage-track__note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-text-faint);
}

/* ---- done ---- */
.stage-track__step--done .stage-track__marker {
  border-color: var(--color-black);
  background-color: var(--color-black);
  color: var(--color-white);
}
.stage-track__step--done .stage-track__title { color: var(--color-black); }

/* ---- where it is now ---- */
.stage-track__step--current .stage-track__marker {
  border-color: var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 0 0 4px rgba(13, 13, 15, 0.08);
}
.stage-track__step--current .stage-track__title {
  font-weight: 600;
  color: var(--color-black);
}

/* ---- declined ---- */
.stage-track__step--failed .stage-track__marker {
  border-color: var(--color-negative);
  background-color: var(--color-negative);
  color: var(--color-white);
}
.stage-track__step--failed .stage-track__title { color: var(--color-negative); font-weight: 600; }


/* ==========================================================================
   15. PROGRESS LOG
   --------------------------------------------------------------------------
   The full history, as a vertical timeline. Every entry gets its own row with
   a marker and a divider, so six events read as six things that happened in
   order rather than as one block of text.
   ========================================================================== */
.progress-log { margin: 0; padding: 0; list-style: none; }

.progress-log__item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.progress-log__item:last-child { border-bottom: 0; padding-bottom: 0; }
.progress-log__item:first-child { padding-top: 0; }

/* The connecting line runs from under one marker to the next. It is left off
   the last row, so the timeline ends rather than trailing away. */
.progress-log__item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 42px;
  bottom: -14px;
  width: 2px;
  background-color: var(--color-border);
}

.progress-log__item:first-child::before { top: 28px; }
.progress-log__item:last-child::before { display: none; }

.progress-log__marker {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface-light);
  font-size: 13px;
  color: var(--color-text-muted);
}

.progress-log__body { flex: 1; min-width: 0; padding-top: 3px; }

.progress-log__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-black);
}

.progress-log__detail {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.progress-log__time {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 300;
  color: var(--color-text-faint);
}

.progress-log__now {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 9px;
  border-radius: var(--radius-badge);
  background-color: var(--color-black);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  vertical-align: 2px;
}

/* Colour only where it means something. */
.progress-log__item--good .progress-log__marker {
  border-color: var(--color-positive);
  background-color: var(--color-positive-soft);
  color: var(--color-positive);
}

.progress-log__item--bad .progress-log__marker {
  border-color: var(--color-negative);
  background-color: var(--color-negative-soft);
  color: var(--color-negative);
}

.progress-log__item--warn .progress-log__marker {
  border-color: var(--color-accent-yellow);
  background-color: var(--color-accent-yellow-soft);
  color: var(--color-black);
}

.progress-log__item.is-current .progress-log__marker {
  border-color: var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, 0.08);
}


/* ==========================================================================
   16. RESPONSIVE
   --------------------------------------------------------------------------
   Below sm the four stages stack. A horizontal rail through stacked steps
   would draw across the labels, so it becomes a vertical one.
   ========================================================================== */
@media (max-width: 575.98px) {
  .stage-track { grid-template-columns: 1fr; gap: 14px; }

  .stage-track::before {
    top: 16px;
    bottom: 16px;
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .stage-track__step { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; }
  .stage-track__label { flex: 1; }
}


/* The rate table on a proposal. Deliberately plain — somebody is reading this
   to find one number. */
.proposal-rates {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

.proposal-rates th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-solid, #e5e5ea);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  text-align: left;
}

.proposal-rates td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-solid, #ececf0);
  font-size: 0.86rem;
  color: var(--text-body, #3f3f46);
}

.proposal-rates tr:last-child td { border-bottom: none; }
.proposal-rates .text-end { text-align: right; }