/* ============================================================
   Legend's Best — How it works.

   The page is one order's journey, so the page is built as a journey: a
   single line runs down the left from the first step to the last, and the
   content hangs off it. That line is the one bold idea here. Everything
   else is deliberately quiet, because the job of this page is to settle
   somebody's nerves about money they have already sent, and a page full of
   competing shapes does the opposite.

   Colour is the site's own sky blue on white. The only second colour is a
   warm amber, used once, on the state the order is in right now.
   ============================================================ */

.hiw-top { padding: 26px 0 8px; }
.hiw-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: 14px 0 30px;
}
.hiw-top__say h1 {
  margin: 10px 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(32px, 5.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink-900, #0b1220);
}
.hiw-top__say p {
  margin: 0;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--gray-600, #64748b);
}
.hiw-top__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.hiw-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-600, #0164ce);
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.hiw-link:hover { color: var(--blue-700, #0059c4); }

/* ---- the states, as the tracker says them ---- */
.hiw-states {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 26px 24px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, .4);
}
.hiw-state {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  padding: 0 0 22px;
}
.hiw-state:last-child { padding-bottom: 0; }
/* The thread between one state and the next. */
.hiw-state:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  bottom: 4px;
  width: 2px;
  background: var(--border, #e2e8f0);
}
.hiw-state.is-done:not(:last-child)::before { background: var(--blue-600, #0164ce); }
.hiw-state__dot {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border, #e2e8f0);
  background: #fff;
  position: relative;
  z-index: 1;
}
.hiw-state.is-done .hiw-state__dot { border-color: var(--blue-600, #0164ce); background: var(--blue-600, #0164ce); }
.hiw-state.is-done .hiw-state__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center/13px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='m1 5 3.6 3.6L12 1.2' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The one place a second colour is spent: the state an order is in now. */
.hiw-state.is-live .hiw-state__dot { border-color: #c9922c; }
.hiw-state.is-live .hiw-state__dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #c9922c;
}
@media (prefers-reduced-motion: no-preference) {
  .hiw-state.is-live .hiw-state__dot::after { animation: hiw-pulse 2.4s ease-in-out infinite; }
}
@keyframes hiw-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .6; }
}
.hiw-state b { font-size: 15.5px; font-weight: 650; color: var(--ink-900, #0b1220); align-self: center; }
.hiw-state i {
  grid-column: 2;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-600, #64748b);
  margin-top: 2px;
}

/* ---- headings shared by the sections below ---- */
.hiw-h2 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.016em;
  color: var(--ink-900, #0b1220);
}
.hiw-lede { margin: 0 0 28px; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--gray-600, #64748b); }

/* ---- the rail: one line, four steps ---- */
.hiw-steps { padding: 46px 0 10px; }
.hiw-rail { list-style: none; margin: 30px 0 0; padding: 0; position: relative; }
.hiw-step {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: clamp(18px, 3vw, 34px);
  padding: 0 0 46px;
}
.hiw-step:last-child { padding-bottom: 8px; }
/* The line that makes the page a journey rather than four boxes. */
.hiw-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue-600, #0164ce), color-mix(in srgb, var(--blue-600, #0164ce) 18%, transparent));
}
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  .hiw-step:not(:last-child)::before { background: #cfe0f7; }
}
.hiw-step__n {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--blue-600, #0164ce);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.hiw-step__body h3 {
  margin: 12px 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.25;
  color: var(--ink-900, #0b1220);
}
.hiw-step__body p { margin: 0 0 14px; max-width: 64ch; font-size: 15.5px; line-height: 1.68; color: var(--ink-700, #334155); }
.hiw-notes { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 64ch; }
.hiw-notes li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600, #64748b);
}
.hiw-notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--blue-600, #0164ce);
}
.hiw-go { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.hiw-go a {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--blue-600, #0164ce);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hiw-go a:hover { color: var(--blue-700, #0059c4); }
.hiw-small { margin: 4px 0 0; font-size: 13.5px; color: var(--gray-500, #94a3b8); }

/* The four ways to pay, side by side, with a hairline between them rather
   than four shadowed cards. */
.hiw-pays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin: 4px 0 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.hiw-pay { padding: 18px 20px; border-right: 1px solid var(--border, #e2e8f0); }
.hiw-pay:last-child { border-right: 0; }
.hiw-pay h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 650; color: var(--ink-900, #0b1220); }
.hiw-pay p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-600, #64748b); }

/* ---- the honest section ---- */
.hiw-trouble { padding: 40px 0; }
.hiw-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border, #e2e8f0); border: 1px solid var(--border, #e2e8f0); border-radius: 20px; overflow: hidden; }
.hiw-case { background: #fff; padding: 22px 24px; }
.hiw-case h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; color: var(--ink-900, #0b1220); }
.hiw-case p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--gray-600, #64748b); }

/* ---- track ---- */
.hiw-track { padding: 30px 0 46px; }
.hiw-track__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--blue-700, #0059c4), var(--blue-600, #0164ce) 62%, #0375d7);
  color: #fff;
}
.hiw-track__card .hiw-h2 { color: #fff; }
.hiw-track__card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hiw-track__label { display: block; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.hiw-track__row { display: flex; gap: 10px; flex-wrap: wrap; }
.hiw-track__row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  /* 16px or iOS zooms the page the moment it is tapped. */
  font: inherit;
  font-size: 16px;
}
.hiw-track__row input::placeholder { color: rgba(255, 255, 255, .6); }
.hiw-track__row input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hiw-track__card .btn-solid { background: #fff; color: var(--blue-700, #0059c4); }
.hiw-track__card .btn-solid:hover { background: rgba(255, 255, 255, .9); }
.hiw-track__help { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); }
.hiw-track__help.is-bad { color: #ffd9d4; }

/* ---- buying or selling ---- */
.hiw-who { padding: 10px 0 46px; }
.hiw-who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 4vw, 40px); margin-top: 22px; }
.hiw-who__col h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 19px; color: var(--ink-900, #0b1220); }
.hiw-who__col p { margin: 0 0 14px; max-width: 54ch; font-size: 15px; line-height: 1.68; color: var(--gray-600, #64748b); }

/* ---- questions ---- */
.hiw-faq { padding: 0 0 60px; }
.hiw-faq__list { margin-top: 20px; border-top: 1px solid var(--border, #e2e8f0); }
.hiw-q { border-bottom: 1px solid var(--border, #e2e8f0); }
.hiw-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink-900, #0b1220);
  cursor: pointer;
  list-style: none;
}
.hiw-q summary::-webkit-details-marker { display: none; }
.hiw-q summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--blue-600, #0164ce);
  border-bottom: 2px solid var(--blue-600, #0164ce);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease, ease);
}
.hiw-q[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.hiw-q summary:focus-visible { outline: 2px solid var(--blue-600, #0164ce); outline-offset: 2px; border-radius: 6px; }
.hiw-q p { margin: 0 0 20px; max-width: 70ch; font-size: 15px; line-height: 1.7; color: var(--gray-600, #64748b); }

@media (max-width: 860px) {
  .hiw-top__grid { grid-template-columns: 1fr; gap: 26px; }
  .hiw-track__card { grid-template-columns: 1fr; }
  .hiw-step { grid-template-columns: 44px minmax(0, 1fr); }
  .hiw-step__n { width: 44px; height: 44px; border-radius: 15px; font-size: 18px; }
  .hiw-step:not(:last-child)::before { left: 21px; top: 44px; }
  .hiw-pay { border-right: 0; border-bottom: 1px solid var(--border, #e2e8f0); }
  .hiw-pay:last-child { border-bottom: 0; }
}