/* Fund transfer: bank details table + cancelled cheque.

   The table is a real <table> on desktop; below 576px each row becomes a
   stacked label/value pair via data-label, so the account number never has
   to be read out of a horizontally scrolling table on a phone. */

.ft-hero .ft-eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#f70e88;
}
.ft-hero h1{font-weight:700;color:#1f262e}
.ft-hero .lead{color:#6a747b;max-width:42rem;margin-inline:auto}

.ft-card{
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:18px;
  box-shadow:0 2px 14px rgba(31,38,46,0.05);
  overflow:hidden;
}
.ft-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 24px;
  border-bottom:1px solid #eef1f4;
  background:#fcfdfe;
}
.ft-card-head i{color:#f70e88}
.ft-card-head h2{
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#1f262e;
  margin:0;
}

/* ---- details table ----------------------------------------------------- */

.ft-table{width:100%;margin:0;border-collapse:collapse}
.ft-table th,
.ft-table td{padding:15px 24px;vertical-align:middle;border-top:1px solid #f1f4f7}
.ft-table tr:first-child th,
.ft-table tr:first-child td{border-top:none}
.ft-table tr:nth-child(even){background:#fafbfc}
.ft-table th{
  width:32%;
  text-align:left;
  font-size:0.86rem;
  font-weight:700;
  color:#1f262e;
  white-space:nowrap;
}
.ft-table td{font-size:0.95rem;color:#4a535c}

.ft-value{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ft-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:#1f262e;
}

.ft-copy{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid #e3e8ee;
  background:#fff;
  border-radius:8px;
  padding:4px 10px;
  font-size:0.74rem;
  font-weight:600;
  color:#6a747b;
  cursor:pointer;
  transition:border-color 0.2s ease,color 0.2s ease,background 0.2s ease;
}
.ft-copy:hover,
.ft-copy:focus-visible{border-color:#f70e88;color:#f70e88;background:#fff5fa}
.ft-copy.is-done{border-color:#1ea97c;color:#1ea97c;background:#f2fbf8}

/* ---- cheque ------------------------------------------------------------ */

.ft-cheque{padding:24px}
.ft-cheque img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #eef1f4;
  border-radius:10px;
}
.ft-cheque figcaption{
  margin-top:12px;
  font-size:0.8rem;
  color:#8b949c;
  text-align:center;
}

/* ---- notice ------------------------------------------------------------ */

.ft-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff8f2;
  border:1px solid #f7e2cf;
  border-left:3px solid #e8862b;
  border-radius:12px;
  padding:16px 18px;
}
.ft-note i{color:#e8862b;margin-top:2px}
.ft-note p{margin:0;font-size:0.86rem;color:#6b5a48}
.ft-note p + p{margin-top:8px}

/* ---- stacked table on small screens ------------------------------------ */

@media (max-width:575.98px){
  .ft-table,
  .ft-table tbody,
  .ft-table tr,
  .ft-table th,
  .ft-table td{display:block;width:auto}
  .ft-table tr{padding:14px 18px;border-top:1px solid #f1f4f7}
  .ft-table tr:first-child{border-top:none}
  .ft-table th,
  .ft-table td{padding:0;border-top:none}
  .ft-table th{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#8b949c;
    margin-bottom:4px;
  }
  .ft-cheque{padding:16px}
}