/* Home — "On the same account": Bookings and Connect as two showcase cards. */
.hm-more__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.hm-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s;
}
.hm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -40px rgba(11, 16, 32, 0.35);
}
.hm-card:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 3px;
}
.hm-card__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 300px;
  overflow: hidden;
  isolation: isolate;
}
.hm-card--bookings .hm-card__art {
  background: linear-gradient(160deg, #e6fbf6 0%, var(--blue-50) 100%);
}
.hm-card--connect .hm-card__art {
  background: var(--gradient-hero);
}
.hm-card__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  height: 80%;
  right: -14%;
  top: -18%;
  border-radius: var(--radius-panel);
  transform: skewY(-22deg);
  background: linear-gradient(160deg, var(--mint-300) 0%, var(--mint-500) 100%);
  opacity: 0.45;
}
.hm-card--connect .hm-card__art::before {
  opacity: 0.25;
}
.hm-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 32px 32px;
}
.hm-card__body p {
  margin: 0;
  color: var(--ink-600);
  text-wrap: pretty;
}
.hm-card:hover .link-arrow .icon {
  transform: translateX(3px);
}

/* Bookings: the booking page's times */
.hm-slots {
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hm-card:hover .hm-slots {
  transform: translateY(-6px) rotate(-1deg);
}
.hm-slots__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hm-slots__head > span:last-child {
  display: flex;
  flex-direction: column;
}
.hm-slots__head small,
.hm-slots__day {
  color: var(--ink-500);
}
.hm-slots__logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tp-midnight);
  color: #fff;
  font-weight: 700;
}
.hm-slots__day {
  font-weight: 600;
  color: var(--tp-midnight);
}
.hm-slots__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hm-slots__grid i {
  font-style: normal;
  text-align: center;
  padding: 7px 0;
  border-radius: 9px;
  border: 1px solid var(--ink-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hm-slots__grid i.is-picked {
  background: var(--tp-midnight);
  border-color: var(--tp-midnight);
  color: #fff;
}
.hm-slots__pay {
  padding: 10px;
  border-radius: 999px;
  background: var(--tp-blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.hm-card__toast {
  right: 20px;
  bottom: 20px;
  animation: floaty 6s ease-in-out infinite;
}

/* Connect: a platform and the businesses on it */
.hm-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hm-net__path {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.hm-net__flow {
  stroke: url(#hm-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 22 600;
  vector-effect: non-scaling-stroke;
  animation: hm-flow 3.2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(0, 209, 167, 0.8));
}
.hm-net__flow--late {
  animation-delay: 1.6s;
}
@keyframes hm-flow {
  from {
    stroke-dashoffset: 18;
  }
  to {
    stroke-dashoffset: -290;
  }
}
.hm-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background: #fff;
  color: var(--tp-midnight);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.hm-node i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--ink-50);
  font-style: normal;
  font-weight: 700;
  color: var(--blue-600);
}
.hm-node--hub {
  left: 50%;
  top: 50%;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04);
}
.hm-node--hub b {
  font-size: 14px;
}
.hm-node--hub small {
  font-weight: 500;
  color: var(--ink-300);
}
/* The ends of the paths, as fractions of the 360 × 220 drawing. */
.hm-node--a {
  left: 14.4%;
  top: 20%;
}
.hm-node--b {
  left: 14.4%;
  top: 80%;
}
.hm-node--c {
  left: 85.6%;
  top: 20%;
}
.hm-node--d {
  left: 85.6%;
  top: 80%;
}
.hm-node--fee {
  padding: 8px 12px;
  background: var(--tp-mint);
  color: var(--tp-midnight);
}

@media (max-width: 900px) {
  .hm-more__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .hm-card__art {
    height: 260px;
  }
  .hm-card__body {
    padding: 22px;
  }
  .hm-node {
    font-size: 11px;
  }
}

/* The hero's line for developers: the API, SDKs and docs, a click from the top of the page. */
.hm-dev-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-label);
  color: var(--ink-300);
  max-width: 520px;
}
.hm-dev-line__icon {
  display: inline-flex;
  flex: none;
  margin-top: 3px;
  color: var(--mint-400);
}
.hm-dev-line a {
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.hm-dev-line a:hover {
  text-decoration-color: currentColor;
}
.hm-dev-line__links {
  display: block;
  margin-top: 4px;
}

/* Home — "Card issuing": the card and its limits, stacked in one column beside the words. */
.hm-cards {
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(0, 209, 167, 0.14) 0%, transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgba(59, 91, 255, 0.28) 0%, transparent 70%), var(--ink-900);
}
.hm-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.hm-cards__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.hm-cards__text .h2,
.hm-cards__text .lead,
.hm-cards__text p {
  margin: 0;
}
.hm-cards__text .lead {
  max-width: 34ch;
}
.hm-cards__text .hm-steps {
  margin: 12px 0 8px;
}
.hm-issue {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}
.hm-issue .tcard {
  position: relative;
  width: 100%;
  transform: none;
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.7);
}
.hm-issue .limits-mock {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
}
.hm-issue__back {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
}
.hm-issue__back > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}
.hm-issue__back small {
  font-weight: 400;
  color: var(--ink-500);
}
.hm-issue__back b {
  color: var(--mint-700);
}

.hm-code__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-caption);
  color: var(--ink-300);
}

@media (max-width: 1100px) {
  .hm-cards__grid {
    gap: 48px;
  }
}
@media (max-width: 900px) {
  .hm-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-issue {
    order: 2;
  }
}

/* Home — one product to a section: a single wide card, picture beside the words. */

.hm-more__grid--one {
  grid-template-columns: minmax(0, 1fr);
}

.hm-more__grid--one .hm-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.hm-more__grid--one .hm-card__art {
  height: auto;
  min-height: 360px;
}

.hm-more__grid--one .hm-card__body {
  justify-content: center;
  padding: 40px;
}

@media (max-width: 900px) {
  .hm-more__grid--one .hm-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-more__grid--one .hm-card__art {
    min-height: 300px;
  }

  .hm-more__grid--one .hm-card__body {
    padding: 28px;
  }
}

/* Home — For AI agents: the install commands and links, without the file's extract. */
.skill__solo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Hero: the mark, in motion ----
   The logo's two cards, drawn large: the blue one takes payments in, the mint one spends and
   earns back. Beside them, the account's feed tells the same story on one 6s cycle that starts
   at once: a customer's payment lands (light runs into the blue card), a card spend goes out
   (light leaves the mint card), and the spend earns its cashback. Only transforms, opacity and
   stroke offsets animate. Under reduced motion nothing moves and the feed shows all three rows;
   the pause button (site.js, WCAG 2.2.2) stops it all. */
.flow {
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}
.flow__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.flow__lines {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
.flow__pulse {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: var(--dash) 200;
  stroke-dashoffset: var(--dash);
  opacity: 0;
}
.flow__pulse--in {
  --dash: 10;
  stroke: var(--blue-200);
  filter: drop-shadow(0 0 6px rgba(147, 165, 255, 0.9));
}
.flow__pulse--out {
  --dash: 16;
  stroke: var(--mint-300);
  filter: drop-shadow(0 0 6px rgba(77, 226, 195, 0.9));
}
.flow__card {
  filter: drop-shadow(0 28px 36px rgba(6, 10, 30, 0.45));
}
.flow__flash {
  opacity: 0;
}
.flow__sheen {
  opacity: 0;
}
.flow__toggle {
  position: absolute;
  right: 4px;
  bottom: 4px;
}

/* The feed: three rows that land one after another, in step with the mark. */
.hm-feed {
  position: absolute;
  left: -2%;
  bottom: -14%;
  width: min(290px, 62%);
}
.hm-feed__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-feed__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgba(11, 16, 32, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-inverse);
}
.hm-feed__row + .hm-feed__row {
  margin-top: 8px;
}
/* A step to the right each, so the three read as a stack that builds. */
.hm-feed__row--out {
  margin-left: 18px;
  margin-right: -18px;
}
.hm-feed__row--back {
  margin-left: 36px;
  margin-right: -36px;
}
.hm-feed__ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--blue-200);
  background: rgba(59, 91, 255, 0.22);
}
.hm-feed__row--in .hm-feed__ic svg {
  transform: rotate(180deg);
}
.hm-feed__row--out .hm-feed__ic {
  color: var(--ink-200);
  background: rgba(255, 255, 255, 0.1);
}
.hm-feed__row--back .hm-feed__ic {
  color: var(--ink-900);
  background: var(--mint-400);
}
.hm-feed__what {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.hm-feed__what b {
  font-size: 13px;
  font-weight: 600;
}
.hm-feed__what small {
  font-size: 11.5px;
  color: var(--ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-feed__amt {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hm-feed__row--out .hm-feed__amt {
  color: var(--ink-200);
}
.hm-feed__row--back .hm-feed__amt {
  color: var(--mint-300);
}

@media (max-width: 640px) {
  .hm-feed {
    left: 0;
    bottom: -16%;
    width: 232px;
  }
  .hm-feed__row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 10px 7px 7px;
    border-radius: 11px;
  }
  .hm-feed__row + .hm-feed__row {
    margin-top: 6px;
  }
  .hm-feed__row--out {
    margin-left: 12px;
    margin-right: -12px;
  }
  .hm-feed__row--back {
    margin-left: 24px;
    margin-right: -24px;
  }
  .hm-feed__ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .hm-feed__ic svg {
    width: 13px;
    height: 13px;
  }
  .hm-feed__what b,
  .hm-feed__amt {
    font-size: 11.5px;
  }
  .hm-feed__what small {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .flow__card--in {
    animation: flow-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .flow__card--out {
    animation: flow-out 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .flow__drift--in {
    animation: flow-drift 9s ease-in-out infinite;
  }
  .flow__drift--out {
    animation: flow-drift 9s -4.5s ease-in-out infinite;
  }
  .flow__glow {
    animation: flow-breathe 12s ease-in-out infinite;
  }
  .flow__glow--mint {
    animation-delay: -6s;
  }
  .flow__pulse {
    opacity: 1;
  }
  .flow__pulse--in {
    animation: flow-pulse-in 6s calc(var(--i) * 0.08s) cubic-bezier(0.45, 0, 0.3, 1) infinite;
  }
  .flow__pulse--out {
    animation: flow-pulse-out 6s calc(var(--i) * 0.08s) cubic-bezier(0.3, 0, 0.55, 1) infinite;
  }
  .flow__flash--in {
    animation: flow-flash-in 6s ease-out infinite;
  }
  .flow__flash--out {
    animation: flow-flash-out 6s ease-out infinite;
  }
  .flow__sheen--in {
    animation: flow-sheen-in 6s ease-in-out infinite;
  }
  .flow__sheen--out {
    animation: flow-sheen-out 6s ease-in-out infinite;
  }
  .hm-feed__row {
    animation: 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both;
  }
  .hm-feed__row--in {
    animation-name: hm-feed-in;
  }
  .hm-feed__row--out {
    animation-name: hm-feed-out;
  }
  .hm-feed__row--back {
    animation-name: hm-feed-back;
  }
  .hm-feed__row--back .hm-feed__ic {
    animation: hm-feed-pop 6s ease-out infinite both;
  }
  .flow[data-paused] *,
  .flow[data-offscreen] * {
    animation-play-state: paused !important;
  }
}
@keyframes flow-in {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
}
@keyframes flow-out {
  from {
    opacity: 0;
    transform: translate(-72px, -28px);
  }
}
@keyframes flow-drift {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes flow-breathe {
  50% {
    opacity: 0.55;
  }
}
/* A pulse is a dash on a 100-long path: offset --dash hides it before the start, −100 past the
   end. The cycle (each 1% is 60ms): money in arrives by 0.7s (the blue card flashes and the
   first row lands); the spend leaves the mint card from 1.9s (second row at 2s); its cashback
   lands at 3s; the rows clear from 5.4s and the cycle starts again. */
@keyframes flow-pulse-in {
  0% {
    stroke-dashoffset: var(--dash);
  }
  12%,
  100% {
    stroke-dashoffset: -100;
  }
}
@keyframes flow-pulse-out {
  0%,
  31% {
    stroke-dashoffset: var(--dash);
  }
  52%,
  100% {
    stroke-dashoffset: -100;
  }
}
@keyframes flow-flash-in {
  0%,
  9% {
    opacity: 0;
  }
  12% {
    opacity: 0.24;
  }
  24%,
  100% {
    opacity: 0;
  }
}
@keyframes flow-flash-out {
  0%,
  29% {
    opacity: 0;
  }
  32% {
    opacity: 0.28;
  }
  44%,
  100% {
    opacity: 0;
  }
}
@keyframes flow-sheen-in {
  0%,
  9% {
    opacity: 0;
    transform: translateX(0);
  }
  11% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0;
    transform: translateX(86px);
  }
}
@keyframes flow-sheen-out {
  0%,
  29% {
    opacity: 0;
    transform: translateX(0);
  }
  31% {
    opacity: 1;
  }
  44%,
  100% {
    opacity: 0;
    transform: translateX(86px);
  }
}
@keyframes hm-feed-in {
  0%,
  9% {
    opacity: 0;
    transform: translateY(10px);
  }
  14%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hm-feed-out {
  0%,
  31% {
    opacity: 0;
    transform: translateY(10px);
  }
  36%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hm-feed-back {
  0%,
  48% {
    opacity: 0;
    transform: translateY(10px);
  }
  53%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hm-feed-pop {
  0%,
  50% {
    transform: scale(0.6);
  }
  56% {
    transform: scale(1.12);
  }
  61%,
  100% {
    transform: none;
  }
}

/* ---- 0.79% in. 0.89% back. ----
   Under the hero, the rate and the cashback in the logo's two colours, with the £1,000 loop
   (site.js) on a dark panel beside them. */
.gmb {
  padding-bottom: 24px;
}
.gmb__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.gmb__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.gmb__in,
.gmb__back {
  font-variant-numeric: tabular-nums;
}
.gmb__in {
  display: inline-block;
  color: var(--blue-500);
}
.gmb__back {
  color: var(--mint-600);
}
.gmb__in small {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.gmb__text .lead {
  margin-top: 20px;
  max-width: 40ch;
}
.gmb__ticks {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-secondary);
}
.gmb__ticks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gmb__ticks svg {
  color: var(--mint-600);
}
.gmb .loop {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
@media (max-width: 900px) {
  .gmb__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---- Accept payments: five ways in, one code panel ----
   The list is the tabs ([data-tabs] in site.js); each tab shows its code and its docs. */
.ways {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: stretch;
}
.ways__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ways__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  font: inherit;
  text-align: start;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.ways__tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.ways__tab.is-active {
  background: var(--surface-card);
  border-color: var(--ink-100);
  box-shadow: 0 18px 40px -24px rgba(11, 16, 32, 0.35);
}
.ways__tab:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
}
.ways__tab > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ways__tab small {
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.ways__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--blue-600);
  background: var(--blue-50);
}
.ways__tab.is-active .ways__icon {
  color: var(--text-inverse);
  background: var(--blue-500);
}
.ways__code {
  display: flex;
  min-width: 0;
}
.ways__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.ways__panel[hidden] {
  display: none;
}
.ways__panel pre {
  flex: 1;
}
.ways__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-label);
  color: var(--ink-300);
}
.ways__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--mint-300);
  text-decoration: none;
}
.ways__links a:hover {
  color: var(--text-inverse);
}
.ways__signals {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-secondary);
}
.ways__signals li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ways__signals svg {
  color: var(--mint-600);
}

/* ---- Card issuing: create, spend, earn back ---- */
.hm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hm-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hm-steps li > div {
  min-width: 0;
  flex: 1;
}
.hm-steps h3 {
  margin: 4px 0 4px;
  color: var(--text-inverse);
}
.hm-steps p {
  margin: 0;
  font-size: var(--fs-label);
}
.hm-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-label);
  color: var(--text-inverse);
  background: var(--blue-500);
}
.hm-steps__num--mint {
  color: var(--ink-900);
  background: var(--mint-400);
}
/* ---- Use cases: a warm picture of each, then a few lines ----
   The pictures are ours (assets/img/use-cases/), drawn in the brand's sunrise, lilac and mint. */
.hm-uc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hm-uc {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  background: var(--surface-card);
  overflow: hidden;
}
.hm-uc__art {
  aspect-ratio: 8 / 5;
  background: var(--sunrise-50);
  border-bottom: 1px solid var(--ink-100);
}
.hm-uc__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-uc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 22px 24px 20px;
}
.hm-uc__body h3,
.hm-uc__body p {
  margin: 0;
}
.hm-uc__body > p:not([class]) {
  color: var(--text-secondary);
  font-size: var(--fs-label);
  text-wrap: pretty;
}
.hm-uc__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sunrise-700);
}
/* What comes back, as one clear figure: a quiet mint panel, the same height in every card. */
.hm-uc__back {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  margin-top: auto !important;
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mint-50), rgba(230, 251, 246, 0.55));
  box-shadow: inset 0 0 0 1px rgba(0, 173, 139, 0.14);
}
.hm-uc__back i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 77, 63, 0.12),
    0 0 0 1px rgba(0, 173, 139, 0.14);
  color: var(--mint-700);
}
.hm-uc__back b {
  grid-column: 1;
  grid-row: 1;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--mint-800);
}
.hm-uc__back span {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-600);
  text-wrap: balance;
}
.hm-uc__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 2px 2px 0;
  font-size: var(--fs-caption);
}
.hm-uc__docs a {
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
}
.hm-uc__docs a:hover {
  text-decoration: underline;
}
.hm-uc__note {
  margin: 24px 0 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
@media (max-width: 1000px) {
  .hm-uc-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .ways {
    grid-template-columns: minmax(0, 1fr);
  }
  .ways__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .ways__list {
    grid-template-columns: minmax(0, 1fr);
  }
}