/**
 * Booking steps injected into the homepage card by miles-booked.js.
 *
 * Everything here lives inside .home-booking-start, whose own stylesheet rule
 *
 *     .home-booking-start button { color:#fff; min-height:52px;
 *                                 border:2px solid var(--color-cta);
 *                                 border-radius:999px; ... }
 *
 * styles EVERY descendant button as a coral CTA pill — which turned the time
 * slots into blank pills (white text on a white ground) and ringed the
 * calendar. That rule is 0,1,1; each selector below is 0,2,0 or higher so it
 * wins on specificity rather than by !important.
 */

/* ---- shared reset for the buttons this component adds ---- */

.miles-booked .miles-booked__slot,
.miles-booked .miles-booked__more,
.miles-cal .miles-cal__day,
.miles-cal .miles-cal__nav {
  min-height: 0;
  margin-top: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}

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

.miles-booked {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
  min-width: 0;
}

/* display:* on the component would otherwise beat the [hidden] attribute,
   leaving empty panels showing as stray divider lines. */
.miles-booked[hidden],
.miles-booked .miles-booked__panel[hidden] {
  display: none;
}

.miles-booked .miles-booked__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-booked .miles-booked__label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
  letter-spacing: -0.01em;
}

.miles-booked .miles-booked__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-soft, #536762);
}

/* ---- status messages ---- */

.miles-booked .miles-booked__status {
  margin: 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 10px;
  background: var(--color-sage-soft, #edf2ed);
  color: var(--color-text, #1a2e2a);
}

.miles-booked .miles-booked__status--error {
  background: rgba(232, 115, 74, 0.12);
  color: #8c3c1c;
}

.miles-booked .miles-booked__status--empty {
  background: var(--color-background-deep, #f2ede4);
  color: var(--color-text-soft, #536762);
}

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

.miles-booked .miles-booked__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 7px;
  min-width: 0;
}

.miles-booked .miles-booked__slot {
  padding: 9px 4px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border-color: var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 9px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.miles-booked .miles-booked__slot:hover {
  background: var(--color-sage-soft, #edf2ed);
  border-color: var(--color-brand, #2c5f5a);
}

.miles-booked .miles-booked__slot[aria-pressed="true"] {
  color: #fff;
  background: var(--color-brand, #2c5f5a);
  border-color: var(--color-brand, #2c5f5a);
}

.miles-booked .miles-booked__slot:focus-visible,
.miles-booked .miles-booked__more:focus-visible,
.miles-cal .miles-cal__day:focus-visible,
.miles-cal .miles-cal__nav:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 2px;
}

.miles-booked .miles-booked__more {
  align-self: flex-start;
  padding: 6px 0;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-brand, #2c5f5a);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}

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

.miles-booked .miles-booked__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.miles-booked .miles-booked__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.miles-booked .miles-booked__field--wide { grid-column: 1 / -1; }

.miles-booked .miles-booked__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-booked .miles-booked__field input,
.miles-booked .miles-booked__field select,
.miles-booked .miles-booked__field textarea {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 10px 12px;
  color: var(--color-text, #1a2e2a);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 9px;
}

.miles-booked .miles-booked__field textarea {
  resize: vertical;
  min-height: 54px;
}

.miles-booked .miles-booked__field input[type="checkbox"] {
  width: auto;
  align-self: flex-start;
}

.miles-booked .miles-booked__field input:focus-visible,
.miles-booked .miles-booked__field select:focus-visible,
.miles-booked .miles-booked__field textarea:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.45);
  outline-offset: 1px;
  border-color: var(--color-brand, #2c5f5a);
}

/* The continue/confirm buttons SHOULD look like the card's CTA, so they keep
   the inherited .home-booking-start button styling and only need width. */
.miles-booked .miles-booked__go { width: 100%; }

/* ---- month calendar ----
   Replaces the native date field, which cannot grey out individual days. */

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

.miles-cal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
  width: 100%;
  /* The card's form is a grid; without this the calendar's intrinsic width
     wins and pushes the whole card wider than the hero allows. */
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.16));
  border-radius: 11px;
}

.miles-cal .miles-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.miles-cal .miles-cal__month {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-cal .miles-cal__nav {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-brand, #2c5f5a);
  background: var(--color-sage-soft, #edf2ed);
}

.miles-cal .miles-cal__nav:hover { background: var(--color-sage, #dce7df); }

.miles-cal .miles-cal__dow,
.miles-cal .miles-cal__grid {
  display: grid;
  /* minmax(0, 1fr) so columns may shrink below their content. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.miles-cal .miles-cal__dow span {
  padding-bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-text-soft, #536762);
}

.miles-cal .miles-cal__day {
  aspect-ratio: 1;
  min-height: 32px;
  max-height: 46px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage, #dce7df);
  transition: background 0.13s, color 0.13s;
}

.miles-cal .miles-cal__day:hover:not(:disabled) {
  background: var(--color-brand, #2c5f5a);
  color: #fff;
}

/* Closed or fully booked — visibly inert, not merely unclickable. */
.miles-cal .miles-cal__day:disabled {
  cursor: not-allowed;
  font-weight: 400;
  color: rgba(83, 103, 98, 0.38);
  background: transparent;
}

.miles-cal .miles-cal__day.is-closed {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.miles-cal .miles-cal__day[aria-current="date"] {
  color: #fff;
  background: var(--color-brand-dark, #204944);
}

.miles-cal .miles-cal__pad { aspect-ratio: 1; }

.miles-cal .miles-cal__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 2px;
  font-size: 12.5px;
  text-align: center;
  color: var(--color-text-soft, #536762);
}

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

@media (max-width: 460px) {
  .miles-booked .miles-booked__fields { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .miles-booked .miles-booked__slot,
  .miles-cal .miles-cal__day { transition: none; }
}

@media (forced-colors: active) {
  .miles-booked .miles-booked__slot,
  .miles-cal .miles-cal__day { border: 1px solid ButtonText; }
  .miles-cal .miles-cal__day:disabled { color: GrayText; border-color: GrayText; }
  .miles-booked .miles-booked__slot[aria-pressed="true"],
  .miles-cal .miles-cal__day[aria-current="date"] {
    background: Highlight;
    color: HighlightText;
  }
}

/* ---- the larger appointment engine ----
   Its date row is rendered by appointment-engine.js; these rules only add the
   unavailable state and give the injected booking steps room. */

.miles-appointment-engine__date.is-unavailable {
  cursor: not-allowed;
  opacity: 0.38;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.miles-booked-engine {
  margin-top: 18px;
  min-width: 0;
}

/* Inside the engine the card's narrow column no longer applies, so the slot
   grid and fields can breathe. */
.miles-booked-engine .miles-booked__slots {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}

.miles-booked-engine .miles-booked__fields {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.miles-booked-engine .miles-booked__go {
  width: auto;
  min-width: 260px;
  align-self: flex-start;
}

/* ---- confirmation dialog ----
   The details, card and confirmation steps run here rather than inline. */

.miles-modal[hidden] { display: none; }

.miles-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;              /* above the site header (1030) and nav (1020) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.miles-modal__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(20, 45, 41, 0.55);
  border: 0;
  border-radius: 0;
  backdrop-filter: blur(2px);
}

.miles-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: min(88vh, 780px);
  background: var(--color-background, #faf7f2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20, 45, 41, 0.28);
  overflow: hidden;
}

.miles-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-modal__title {
  margin: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-modal__close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-soft, #536762);
  background: var(--color-sage-soft, #edf2ed);
  border: 0;
  border-radius: 999px;
}

.miles-modal__close:hover { background: var(--color-sage, #dce7df); }

.miles-modal__close:focus-visible,
.miles-modal__backdrop:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: -3px;
}

.miles-modal__body {
  padding: 18px;
  overflow-y: auto;
}

/* Inside the dialog the panels are the whole content, so drop the inline rule. */
.miles-modal__body .miles-booked__panel {
  padding-top: 0;
  border-top: 0;
  gap: 12px;
}

.miles-modal__body .miles-booked__fields {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.miles-modal__body .miles-booked__go {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: var(--color-cta, #e8734a);
  border: 2px solid var(--color-cta, #e8734a);
  border-radius: 999px;
}

.miles-modal__body .miles-booked__go:hover {
  background: var(--color-cta-hover, #ce5e38);
  border-color: var(--color-cta-hover, #ce5e38);
}

.miles-modal__body .miles-booked__go:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Stripe renders the card inputs into an iframe here — never our own fields. */
.miles-booked__card {
  min-height: 42px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 10px;
}

@media (max-width: 520px) {
  .miles-modal { padding: 0; align-items: flex-end; }
  .miles-modal__panel { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
}

/* ---- completed state ----
   Mirrors .miles-appointment-card exactly — same surface, radius, status
   strip, two-column body and footer — so the booked state reads as the same
   component rather than something else dropped in its place. */

.miles-booked-confirm[hidden] { display: none; }

.miles-booked-confirm {
  overflow: hidden;
  margin: 0 30px 30px;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 90, 0.18);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(26, 46, 42, 0.08);
}

.miles-booked-confirm__status {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 46px;
  padding: 10px 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage-soft, #edf2ed);
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-booked-confirm__status > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand, #2c5f5a);
}

.miles-booked-confirm__body {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
  padding: 34px;
}

.miles-booked-confirm__eyebrow {
  margin: 0 0 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand, #2c5f5a);
}

.miles-booked-confirm__body h3 {
  margin: 0 0 8px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a2e2a);
}

.miles-booked-confirm__address {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-soft, #536762);
}

.miles-booked-confirm__body dl {
  display: grid;
  /* Fixed two columns so the four facts fill a clean 2x2, matching the
     summary card, rather than auto-fit leaving an empty cell. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 12px;
  overflow: hidden;
}

.miles-booked-confirm__body dl > div {
  padding: 14px 16px;
  background: #ffffff;
}

.miles-booked-confirm__body dt {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-booked-confirm__body dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #1a2e2a);
}

.miles-booked-confirm__footer {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 15px 22px 15px 30px;
  background: var(--color-background, #faf7f2);
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-booked-confirm__footer p {
  margin: 0;
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft, #536762);
}

.miles-booked-confirm__again { flex: none; }

@media (max-width: 900px) {
  .miles-booked-confirm__body { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px; }
}

@media (max-width: 420px) {
  .miles-booked-confirm__body dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .miles-booked-confirm { margin: 0 16px 20px; }
  .miles-booked-confirm__footer { flex-direction: column; align-items: stretch; padding: 18px; }
  .miles-booked-confirm__again { width: 100%; }
}

/* theme.css gives these a display value, which beats the [hidden] attribute —
   so hiding them for the confirmed state needs saying explicitly. */
.miles-appointment-engine__heading[hidden],
.miles-appointment-engine__shell[hidden],
.miles-appointment-card[hidden],
.miles-appointment-engine__disclosure[hidden] {
  display: none;
}

/* The confirmation is an <article>, so its status strip, body and footer are
   caught by the same global `article > div` card rule in theme.css. They set
   their own surfaces, so the inherited box is removed and theirs restored. */

.miles-booked-confirm > div {
  border: 0 !important;
  box-shadow: none !important;
}

.miles-booked-confirm > .miles-booked-confirm__status {
  background: var(--color-sage-soft, #edf2ed) !important;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)) !important;
}

.miles-booked-confirm > .miles-booked-confirm__body { background: #ffffff !important; }

.miles-booked-confirm > .miles-booked-confirm__footer {
  background: var(--color-background, #faf7f2) !important;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)) !important;
}

/* Same :hover twin, same fix, for the confirmation card. */
.miles-booked-confirm > div:hover,
.miles-booked-confirm > div:focus-within { box-shadow: none !important; }

.miles-booked-confirm > .miles-booked-confirm__status:hover { background: var(--color-sage-soft, #edf2ed) !important; }
.miles-booked-confirm > .miles-booked-confirm__body:hover { background: #ffffff !important; }
.miles-booked-confirm > .miles-booked-confirm__footer:hover { background: var(--color-background, #faf7f2) !important; }

/* Before a service is chosen there is nothing to navigate, so the month bar
   and weekday row are hidden and only the prompt shows. */
.miles-cal[data-empty="true"] .miles-cal__bar,
.miles-cal[data-empty="true"] .miles-cal__dow {
  display: none;
}

.miles-cal[data-empty="true"] {
  padding: 18px 16px;
}

.miles-cal[data-empty="true"] .miles-cal__note {
  padding: 0;
  text-align: center;
}

/* ---- routing questions ----
   Shown before the booking form on /book/. Matches the appointment engine's
   own card treatment so the two read as one journey. */

.miles-triage {
  padding-block: 44px 0 !important;
  background: var(--color-background, #faf7f2);
}

.miles-triage__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 36px 30px;
  background: #ffffff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.16));
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(26, 46, 42, 0.09);
}

.miles-triage__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage, #dce7df);
  border-radius: 999px;
}

.miles-triage__tick { font-size: 11px; }

.miles-triage__title {
  margin: 4px 0 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a2e2a);
}

.miles-triage__intro,
.miles-triage__help {
  margin: 0;
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-soft, #536762);
}

.miles-triage__step {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand, #2c5f5a);
}

.miles-triage__progress {
  width: 100%;
  height: 4px;
  background: var(--color-sage-soft, #edf2ed);
  border-radius: 999px;
  overflow: hidden;
}

.miles-triage__progress span {
  display: block;
  height: 100%;
  background: var(--color-brand, #2c5f5a);
  border-radius: 999px;
  transition: width 260ms ease;
}

.miles-triage__question {
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}

.miles-triage__label {
  padding: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-triage__options {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.miles-triage__option {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  width: 100%;
  padding: 15px 18px;
  text-align: left;
  cursor: pointer;
  color: var(--color-text, #1a2e2a);
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  transition: background 0.14s, border-color 0.14s;
}

.miles-triage__option:hover {
  background: var(--color-sage, #dce7df);
  border-color: var(--color-brand, #2c5f5a) !important;
}

.miles-triage__option:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
}

.miles-triage__option-label { font-size: 15px; font-weight: 600; }
.miles-triage__option-desc { font-size: 12.5px; color: var(--color-text-soft, #536762); }

.miles-triage__back {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  cursor: pointer;
  color: var(--color-text-soft, #536762);
  background: none;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
}

.miles-triage__back:hover { color: var(--color-text, #1a2e2a); }

/* ---- stop screen ---- */

.miles-triage__card[data-stop="true"] { border-color: rgba(232, 115, 74, 0.4); }

.miles-triage__stop-heading {
  margin: 4px 0 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-triage__stop-message {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-soft, #536762);
}

.miles-triage__stop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
}

.miles-triage__cta { text-decoration: none; }
.miles-triage__cta::after, .miles-triage__cta::before { content: none !important; }

@media (max-width: 560px) {
  .miles-triage__card { padding: 26px 20px 24px; border-radius: 18px; }
  .miles-triage__stop-actions { flex-direction: column; align-items: stretch; }
  .miles-triage__cta { text-align: center; }
}