:root {
  /* Sydney Forex design system - CSS colour palette.docx */
  --sf-navy-950: #031F3B;
  --sf-navy-900: #06325B;
  --sf-navy-800: #074A7D;
  /* Sampled from the approved home page artwork; deeper and more saturated
     than --sf-blue-700, which reads grey beside it. --sf-blue-900 and
     --sf-blue-650 are the dark and bright ends of the same hero sweep, named
     here because the public page bands now reach for them too. */
  --sf-blue-900: #013A8A;
  --sf-blue-800: #0145A6;
  --sf-blue-650: #025BCE;
  --sf-blue-700: #075AA5;
  --sf-blue-600: #0875C9;
  --sf-green-700: #07883D;
  --sf-green-600: #0A9F49;
  --sf-green-500: #19B55A;
  --sf-green-300: #95d0ad;
  --sf-green-100: #ced9d2;
  --sf-gold-600: #e8a512;
  --sf-gold-800: #c98a08;
  --sf-white: #FFFFFF;
  --sf-grey-50: #F7F9FC;
  --sf-grey-100: #EEF2F6;
  --sf-grey-300: #CBD5E1;
  --sf-grey-600: #526273;
  --sf-grey-900: #152238;
  --sf-success: #07883D;
  --sf-warning: #D97706;
  --sf-error: #C62828;
  --sf-shadow: 0 10px 30px rgba(3, 31, 59, 0.12);
  --sf-radius-sm: 6px;
  --sf-radius-md: 10px;
  --sf-radius-lg: 16px;
  --sf-container: 1280px;

  /* Legacy semantic aliases - mapped onto the palette above so every
     existing component picks up the exact spec colours automatically. */
  --ink: var(--sf-grey-900);
  --muted: var(--sf-grey-600);
  --line: var(--sf-grey-300);
  --panel: var(--sf-white);
  --canvas: var(--sf-grey-50);
  --brand: var(--sf-navy-800);
  --brand-dark: var(--sf-navy-950);
  --brand-deep: var(--sf-navy-950);
  --brand-navy: var(--sf-navy-950);
  --accent: var(--sf-gold-600);
  --accent-dark: var(--sf-gold-800);
  --accent-soft: #e9f8ee;
  --success: var(--sf-success);
  --warning: var(--sf-warning);
  --gold: #e8a512;
  --gold-soft: #fdf2df;
  --gold-dark: #c98a08;
  --red-accent: var(--sf-error);
  --blue-accent: var(--sf-blue-600);
  --light-blue-bg: var(--sf-grey-50);
  --cream-bg: #f5f0e8;
}

.container-xl {
  max-width: min(100%, var(--sf-container));
}

html {
  font-size: 16px;
}

body {
  background: #fff;
  color: var(--sf-grey-900);
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.6;
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  color: var(--sf-navy-950);
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  line-height: 1.2;
}

a {
  color: var(--brand);
}

.btn {
  border-radius: 5px;
  font-weight: 650;
}

/* Basic button code.docx */
.sf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--sf-radius-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
/* Navy on gold clears AA at 6.9:1; white on the same gold only reached 2.9:1. */
.sf-button--primary {
  color: var(--sf-navy-950);
  background: var(--sf-gold-600);
}
.sf-button--primary:hover {
  background: var(--sf-gold-800);
  transform: translateY(-1px);
}
.sf-button--secondary {
  color: var(--sf-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
}
.sf-button--navy {
  color: var(--sf-navy-950);
  background: var(--sf-gold-600);
}
.sf-button--navy:hover {
  background: var(--sf-gold-800);
  color: var(--sf-navy-950);
}
.sf-button:focus-visible {
  outline: 3px solid rgba(8, 117, 201, 0.35);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-success {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-success:hover,
.btn-success:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--brand-dark);
  color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, .2);
}

.site-header {
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-deep) 100%);
  box-shadow: 0 8px 24px rgba(2, 31, 64, .18);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-nav {
  background: transparent;
  padding-block: .55rem;
}

.site-nav .navbar-brand.brand-logo {
  align-items: center;
  display: inline-flex;
  margin-right: 1rem;
  padding: 0;
  text-decoration: none;
}

.brand-lockup {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: .18rem;
  line-height: 1;
}

.brand-mark-logo {
  display: block;
  height: 56px;
  width: auto;
}

.brand-tagline {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-lockup--light .brand-tagline {
  color: rgba(255, 255, 255, .78);
}

/* Dark surfaces use their own artwork (sydney-forex-mark-dark-bg.png) with the
   wordmark reversed to white, since the royal blue only reaches 2.1:1 against
   the navy. The gold swoosh and the red S and X are untouched, so the mark
   needs no plate or padding here. */

.site-header-member .brand-mark-logo,
.footer-brand-col .brand-mark-logo {
  height: 58px;
}

.footer-brand-col .brand-lockup {
  align-items: flex-start;
}

@media (max-width: 420px) {
  .brand-mark-logo {
    height: 38px;
  }

  .brand-tagline {
    font-size: .52rem;
  }
}

.site-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}

.site-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

.site-nav .nav-link {
  color: rgba(255, 255, 255, .88);
  font-size: .92rem;
  font-weight: 650;
  padding: .45rem .75rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: #fff;
}

.site-nav .nav-link.active {
  color: #fff;
  position: relative;
}

.site-nav .nav-link.active::after {
  background: var(--accent);
  border-radius: 2px;
  bottom: .1rem;
  content: "";
  height: 2px;
  left: .75rem;
  position: absolute;
  right: .75rem;
}

.site-nav .nav-auth {
  gap: .35rem;
}

.site-nav .nav-login {
  font-weight: 700;
}

.site-nav .btn-register {
  border-radius: var(--sf-radius-sm);
  font-weight: 750;
  margin-left: .25rem;
  padding: .45rem 1.1rem;
}

.site-nav .logout-link {
  background: transparent;
  border: 0;
}

.site-nav .member-name {
  color: #fff;
  display: block;
  font-size: .9rem;
  font-weight: 700;
  padding: .45rem .75rem;
  text-decoration: none;
}

.site-nav a.member-name:hover,
.site-nav a.member-name:focus {
  color: #fff;
  opacity: .85;
  text-decoration: underline;
}

.member-name-ico {
  margin-right: .35rem;
}

.page-shell {
  background: var(--canvas);
  min-height: calc(100vh - 180px);
  padding-block: 1rem;
}

.page-shell-wide {
  background: #fff;
  min-height: calc(100vh - 180px);
  padding-block: 0;
}

.page-home .page-shell-wide,
.page-auth .page-shell-wide {
  background: #fff;
}

.home-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.youtube-link img,
.notice-panel img {
  height: auto;
  max-width: 100%;
}

.panel-box,
.rate-card,
.notice-panel,
.stat-card,
.team-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
}

.panel-box,
.notice-panel {
  padding: 1rem;
}

.panel-box h2,
.notice-panel h2,
.rate-card h2 {
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 760;
  letter-spacing: .04em;
  margin: 0 0 .85rem;
  text-transform: uppercase;
}

.form-label {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.form-control,
.form-select {
  border-color: #cbd7e0;
  border-radius: 5px;
}

.status-message {
  color: var(--success);
  font-weight: 700;
  margin: .75rem 0 0;
}

.login-box a {
  color: var(--accent);
  font-size: .86rem;
  font-weight: 700;
}

.login-note {
  color: var(--muted);
  font-size: .9rem;
  margin: .75rem 0;
}

.login-status {
  color: var(--gold);
  font-size: .86rem;
}

.section-heading {
  margin-bottom: 1rem;
  text-align: center;
}

.section-heading p {
  color: var(--brand);
  font-size: .92rem;
  font-weight: 760;
  letter-spacing: .08em;
  margin: 0 0 .25rem;
  text-transform: uppercase;
}

.section-heading h1,
.section-heading h2 {
  color: var(--brand-dark);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 760;
  line-height: 1.18;
  margin: 0;
}

.rate-card {
  overflow: hidden;
}

.rate-card h2 {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  border-bottom: 1px solid var(--line);
  color: #fff;
  margin: 0;
  padding: .85rem 1rem;
  text-align: center;
}

.rate-date {
  color: var(--accent-dark);
  font-weight: 720;
  margin: .85rem 1rem;
  text-align: center;
}

.site-footer {
  background: var(--brand-navy);
  color: #fff;
  font-size: .9rem;
  padding: 1.4rem 0 1.1rem;
}

.footer-inner {
  display: grid;
  gap: .85rem;
  text-align: center;
}

.footer-brand {
  display: grid;
  gap: .15rem;
}

.footer-brand strong {
  font-size: 1rem;
}

.footer-brand span,
.footer-copy {
  color: rgba(255, 255, 255, .72);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
  justify-content: center;
}

.footer-links a {
  color: #fff;
  font-weight: 650;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #9fd9b8;
  text-decoration: underline;
}

.page-hero {
  background: linear-gradient(90deg, var(--brand-navy) 0%, var(--sf-navy-900) 42%, #6b83a0 82%, #c3cfdc 100%);
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  margin-bottom: 1rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.5vw, 1.8rem);
  position: relative;
}

.page-hero::after {
  background:
    radial-gradient(120px 120px at 88% -10%, rgba(255, 255, 255, .18), transparent 70%),
    radial-gradient(220px 220px at 102% 130%, rgba(31, 157, 85, .22), transparent 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero.compact {
  padding-block: clamp(.75rem, 1.5vw, 1rem);
}

.page-hero p {
  font-size: .72rem;
  font-weight: 780;
  letter-spacing: .1em;
  margin: 0 0 .25rem;
  text-transform: uppercase;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  font-weight: 780;
  line-height: 1.12;
  margin: 0;
  max-width: 900px;
}

.content-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.content-main {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.1rem, 3vw, 2rem);
}

.content-main.wide {
  max-width: 1050px;
}

.content-main h2 {
  color: var(--brand-dark);
  font-size: 1.25rem;
  font-weight: 760;
  margin: 1.2rem 0 .55rem;
}

.content-main h2:first-child {
  margin-top: 0;
}

.content-main p,
.content-main li {
  color: #344452;
  font-size: 1rem;
  line-height: 1.65;
}

.content-aside {
  display: grid;
  gap: 1rem;
}

.stat-card {
  padding: 1rem;
}

.stat-card span {
  color: var(--muted);
  display: block;
  font-size: .8rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat-card strong {
  color: var(--accent);
  display: block;
  font-size: 1.55rem;
}

.notice-band {
  align-items: flex-start;
  background: linear-gradient(90deg, var(--gold-soft), #fff);
  border: 1px solid #f4d36b;
  border-left: 5px solid var(--gold);
  border-radius: 7px;
  color: #4d3a04;
  display: flex;
  gap: .6rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.notice-band strong {
  white-space: nowrap;
}

.member-processing-notice,
.transaction-summary-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
}

.member-processing-notice {
  border-left: 5px solid var(--accent);
  padding: clamp(1.1rem, 3vw, 2rem);
}

.member-processing-notice h2,
.transaction-summary-card h2 {
  color: var(--brand-dark);
  font-size: 1.1rem;
  font-weight: 760;
  margin: 0 0 .8rem;
}

.member-processing-notice p {
  color: #344452;
  line-height: 1.65;
}

.member-processing-notice p:last-child {
  margin-bottom: 0;
}

.transaction-summary-card {
  align-self: start;
  overflow: hidden;
}

.transaction-summary-card h2 {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  color: #fff;
  padding: .9rem 1rem;
}

.transaction-summary-card dl {
  margin: 0;
}

.transaction-summary-card dl div {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.transaction-summary-card dt {
  color: var(--muted);
  font-weight: 720;
}

.transaction-summary-card dd {
  background: var(--brand);
  border-radius: 999px;
  color: #fff;
  font-weight: 780;
  margin: 0;
  min-width: 2.25rem;
  padding: .3rem .65rem;
  text-align: center;
}

.transaction-summary-card .summary-total {
  background: var(--gold-soft);
}

.transaction-summary-card .summary-total dt {
  color: var(--brand-dark);
}

.transaction-summary-card .summary-total dd {
  background: var(--accent);
}

.summary-status {
  color: var(--accent-dark);
  font-size: .9rem;
  font-weight: 700;
  margin: 1rem;
}

.member-table-card,
.detail-card,
.member-subnav {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
}

.member-table-wrap {
  overflow-x: auto;
}

.member-table {
  margin: 0;
  min-width: 900px;
}

.member-table th {
  background: var(--brand-deep);
  color: #fff;
  font-size: .78rem;
  text-transform: uppercase;
}

.member-table td {
  border-color: var(--line);
  font-size: .9rem;
}

.member-table .numeric {
  text-align: right;
}

.member-table a {
  color: var(--brand);
  font-weight: 720;
}

.status-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: .76rem;
  font-weight: 780;
  padding: .3rem .6rem;
}

.status-pill.pending {
  background: var(--gold-soft);
  color: #745500;
}

.status-pill.processed {
  background: #e5f7f0;
  color: var(--success);
}

.detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.detail-card {
  overflow: hidden;
}

.detail-card h2 {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  color: #fff;
  font-size: 1rem;
  margin: 0;
  padding: .85rem 1rem;
}

.detail-card h2 .ico {
  margin-right: .45rem;
}

/* ============================================================
   Beneficiary details - profile card
   ============================================================ */
.back-link {
  color: var(--brand);
  display: inline-block;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .8rem;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.profile-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
}

.profile-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  height: 68px;
  justify-content: center;
  width: 68px;
}

.profile-meta {
  flex: 1 1 240px;
  min-width: 0;
}

.profile-meta h2 {
  color: var(--brand-dark);
  font-size: 1.4rem;
  font-weight: 780;
  margin: 0;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .5rem 0 .2rem;
}

.profile-pill {
  background: #eaf2fb;
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 750;
  padding: .25rem .7rem;
}

.profile-pill.ghost {
  background: var(--gold-soft);
  color: #745500;
}

.profile-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin-top: .5rem;
}

.profile-chip {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}

.profile-chip:hover {
  color: var(--brand);
}

.profile-chip .ico {
  margin-right: .3rem;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ============================================================
   Remittance details - summary card
   ============================================================ */
.remit-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
}

.remit-summary-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.remit-ref {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}

.remit-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
}

.remit-amount span {
  color: var(--muted);
  display: block;
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.remit-amount strong {
  color: var(--brand-dark);
  font-size: 1.35rem;
  font-weight: 800;
}

.remit-amount.receive strong {
  color: var(--success);
}

.remit-meta {
  border-top: 1px solid var(--line);
  color: #344452;
  margin: 1rem 0 0;
  padding-top: .8rem;
}

.accounts-empty {
  color: var(--muted);
  padding: 2.2rem 1rem;
  text-align: center;
}

.accounts-empty .ico {
  display: block;
  font-size: 2rem;
  margin-bottom: .5rem;
}

.accounts-empty p {
  margin: 0 0 .8rem;
}

@media (min-width: 768px) {
  .profile-actions {
    margin-left: auto;
  }
}

.detail-list {
  margin: 0;
}

.detail-list div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: .35rem;
  padding: .8rem 1rem;
}

.detail-list dt {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detail-list dd {
  color: #263746;
  margin: 0;
  white-space: pre-line;
}

.member-subnav {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .65rem;
}

.member-subnav a {
  border-radius: 5px;
  color: var(--brand);
  font-weight: 720;
  padding: .5rem .75rem;
  text-decoration: none;
}

.member-subnav a.active,
.member-subnav a:hover {
  background: var(--brand-deep);
  color: #fff;
}

.member-form-card {
  max-width: 680px;
}

.notice-band.success {
  background: #e5f7f0;
  border-color: #91d1ba;
  border-left-color: var(--success);
  color: var(--success);
}

.beneficiary-accounts-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  margin-top: 1rem;
  overflow: hidden;
}

.beneficiary-detail-actions,
.section-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.beneficiary-detail-actions {
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.section-toolbar {
  border-bottom: 1px solid var(--line);
  padding: 1rem;
}

.section-toolbar p {
  color: var(--accent);
  font-size: .76rem;
  font-weight: 760;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.section-toolbar h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  margin: .15rem 0 0;
}

.beneficiary-table {
  min-width: 850px;
}

.beneficiary-bank-table {
  min-width: 850px;
}

.count-pill {
  background: var(--gold-dark);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-weight: 780;
  min-width: 2rem;
  padding: .25rem .55rem;
  text-align: center;
}

a.count-pill-link {
  color: #fff;
  text-decoration: none;
  transition: background .15s ease;
}

a.count-pill-link:hover,
a.count-pill-link:focus {
  background: var(--gold);
  color: #fff;
}

.table-actions {
  text-align: right;
  white-space: nowrap;
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.field-full {
  grid-column: 1 / -1;
}

/* ============================================================
   Record form (sectioned cards + sticky action bar)
   ============================================================ */
.form-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  padding: clamp(1.1rem, 3vw, 1.5rem);
}

.form-section + .form-section {
  margin-top: 1rem;
}

.form-section-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: .85rem;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
}

.form-section-ico {
  align-items: center;
  background: #eaf0f7;
  border-radius: 12px;
  color: var(--sf-navy-800);
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.form-section-ico svg {
  height: 20px;
  width: 20px;
}

.form-section-head h2 {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.form-section-head p {
  color: var(--muted);
  font-size: .85rem;
  margin: 0;
}

.form-actions {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  bottom: 1rem;
  box-shadow: 0 10px 28px rgba(5, 47, 85, .12);
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  position: sticky;
  z-index: 5;
}

.step-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1rem;
}

.step-grid article {
  padding: 1rem;
}

.step-grid span {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-weight: 760;
  height: 2rem;
  justify-content: center;
  margin-bottom: .75rem;
  width: 2rem;
}

.step-grid h2,
.step-grid h3,
.team-strip h2 {
  color: var(--brand-dark);
  font-size: 1.1rem;
  font-weight: 760;
}

.check-list li {
  margin-bottom: .25rem;
}

.info-table,
.timeline-table {
  display: grid;
  gap: .5rem;
}

.info-table {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.info-table span,
.timeline-table div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .75rem;
}

.timeline-table div {
  align-items: center;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
}

.timeline-table span {
  color: var(--muted);
  text-align: right;
}

.contact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.faq-list {
  display: grid;
  gap: .55rem;
}

/* Shared page shell: rounded card with a navy header band.
   Used by Contact, About, Procedure and FAQs. */
.page-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 10px 30px rgba(28, 45, 61, .07);
  margin-bottom: 1.2rem;
  overflow: hidden;
}

/* Two grounds share this band, split by audience rather than by controller.

   The base is the signed-in one: Remittance, Beneficiaries and Members, all
   [Authorize]. Register is NOT one of them - it is the anonymous signup flow,
   so it takes --public below and must stay with the public pages.

   The fade to a light steel was introduced to give the gold .form-head-cta a
   ground at the right-hand end. Worth knowing before relying on it: gold
   #e8a512 against that steel measures 1.35:1, where the same gold against the
   public band's blue end is 2.90:1. The steel is the weaker of the two, so if
   the member area is ever restyled this is not the reason to keep it. */
.page-panel-head {
  background: linear-gradient(90deg, var(--brand-navy) 0%, var(--sf-navy-900) 42%, #6b83a0 82%, #c3cfdc 100%);
  color: #fff;
  padding: clamp(1.2rem, 3vw, 1.75rem) clamp(1.2rem, 3vw, 2rem);
}

/* The public one, applied by _PageHead. The header and footer moved into the
   approved blue while this band stayed navy, which left every public inner
   page clashing with the chrome above and below it. Same family and the same
   dark-left to bright-right direction as the home hero, so the three read as
   one page. Text sits in the deep end, where white clears AA comfortably. */
.page-panel-head--public {
  background: linear-gradient(90deg, var(--sf-blue-900) 0%, var(--sf-blue-800) 46%, var(--sf-blue-650) 100%);
}

.page-panel-head h1 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .35rem;
}

.page-breadcrumb {
  color: rgba(255, 255, 255, .8);
  display: flex;
  flex-wrap: wrap;
  font-size: .85rem;
  gap: .45rem;
}

.page-breadcrumb a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}

.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.page-panel-body {
  padding: clamp(1.3rem, 3vw, 2rem);
}

/* Opt-in two-column body with a divider (Contact, About). */
.panel-split {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: minmax(0, 1fr);
}

.page-lead {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}

/* Policies: a long legal document, so it gets a sticky contents rail on wide
   screens and a capped measure so the prose stays readable. */
.policy-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .policy-layout {
    align-items: start;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  }

  .policy-toc {
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    position: sticky;
    top: 1.25rem;
  }
}

.policy-toc {
  background: var(--canvas);
  border-radius: var(--sf-radius-md);
  padding: 1rem 1.1rem;
}

.policy-toc h2 {
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 0 .6rem;
  text-transform: uppercase;
}

.policy-toc ol {
  margin: 0;
  padding-left: 1.1rem;
}

.policy-toc li {
  margin-bottom: .35rem;
}

.policy-toc a {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
  text-decoration: none;
}

.policy-toc a:hover,
.policy-toc a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.policy-doc {
  max-width: 68ch;
}

.policy-section {
  margin-bottom: 1.8rem;
  /* Anchor jumps from the contents rail must clear the sticky header. */
  scroll-margin-top: 5rem;
}

.policy-section:last-child {
  margin-bottom: 0;
}

.policy-section h2 {
  align-items: baseline;
  color: var(--brand-dark);
  display: flex;
  font-size: 1.05rem;
  font-weight: 800;
  gap: .5rem;
  margin: 0 0 .6rem;
}

.policy-num {
  color: var(--accent-dark);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.policy-section p {
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 0 .7rem;
}

.policy-section ul {
  margin: 0 0 .9rem;
  padding-left: 1.2rem;
}

.policy-section li {
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.7;
  margin-bottom: .4rem;
}

.policy-section strong {
  color: var(--brand-dark);
}

/* Terms & Conditions: the sibling document to the Privacy Policy above, so it
   reuses .policy-* for the contents rail and clause bodies rather than growing
   a second look for the same job. These additions cover only what a terms
   document has and a policy does not - a document fact strip, numbered
   sub-clauses, a defined-terms list and a fee schedule.

   The clause wording in the view is compliance-approved copy reproduced
   verbatim from the published terms; only its presentation is ours. Emphasis
   here is typographic - never reword a clause to make it fit a component. */
.terms-meta {
  background: var(--canvas);
  border-left: 3px solid var(--accent);
  border-radius: var(--sf-radius-md);
  display: grid;
  gap: 1rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  margin: 0 0 1.9rem;
  padding: 1.15rem 1.3rem;
}

.terms-meta dt {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .07em;
  margin: 0 0 .28rem;
  text-transform: uppercase;
}

.terms-meta dd {
  color: var(--brand-dark);
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

/* Sub-clauses (12.1, 13.2, ...) and the named subheads inside clause 20. */
.terms-sub {
  color: var(--brand-dark);
  font-size: .93rem;
  font-weight: 800;
  margin: 1.35rem 0 .5rem;
}

.terms-sub-num {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  margin-right: .4rem;
}

.terms-defs {
  border-left: 2px solid var(--line);
  display: grid;
  gap: .85rem;
  margin: 0 0 .9rem;
  padding-left: 1.1rem;
}

.terms-def-term {
  color: var(--brand-dark);
  display: block;
  font-size: .92rem;
  font-weight: 800;
}

.terms-def-body {
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.7;
  margin: .15rem 0 0;
}

.terms-fees {
  margin: 0 0 1.2rem;
  overflow-x: auto;
}

.terms-fees table {
  border-collapse: collapse;
  min-width: 330px;
  width: 100%;
}

.terms-fees caption,
.terms-fees th {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}

.terms-fees caption {
  padding: 0 0 .55rem;
}

.terms-fees th {
  border-bottom: 1px solid var(--line);
  padding: 0 0 .5rem;
}

.terms-fees td {
  border-bottom: 1px solid var(--sf-grey-100);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.6;
  padding: .72rem 0;
}

.terms-fees tr:last-child td {
  border-bottom: 0;
}

/* Inline qualifiers on a fee row ("unless promotional terms apply") sit under
   the condition they qualify rather than competing with it. */
.terms-fees td em {
  color: var(--muted);
  display: block;
  font-size: .82rem;
  font-style: normal;
}

.terms-fees th:last-child,
.terms-fees td:last-child {
  padding-left: 1.2rem;
  text-align: right;
  white-space: nowrap;
}

.terms-fee-amount {
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.terms-fee-amount--none {
  color: var(--success);
}

.terms-fee-amount--var {
  color: var(--muted);
  font-weight: 700;
}

/* Reserved for clauses a customer most often trips over - own-funds payment,
   no automatic refund, the 30-day claim window. Used sparingly: once every
   clause is a callout, none of them is. */
.terms-callout {
  background: var(--gold-soft);
  border-radius: var(--sf-radius-md);
  display: flex;
  gap: .85rem;
  margin: 0 0 1rem;
  padding: .95rem 1.1rem;
}

.terms-callout-ico {
  color: var(--accent-dark);
  flex: none;
  line-height: 0;
}

.terms-callout-ico svg {
  height: 20px;
  width: 20px;
}

/* The clause 20 callout wraps a paragraph plus a list, so trim whichever
   element ends up last rather than assuming a single paragraph. */
.terms-callout > div {
  min-width: 0;
}

.terms-callout p:last-child,
.terms-callout ul:last-child {
  margin-bottom: 0;
}

.terms-backtop {
  border-top: 1px solid var(--line);
  margin-top: 2.2rem;
  padding-top: 1rem;
}

.terms-backtop a {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.terms-backtop a:hover,
.terms-backtop a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.prose-col h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.6rem 0 .55rem;
}

.prose-col h2:first-of-type {
  margin-top: 0;
}

.prose-col p {
  color: #3d4c5a;
  font-size: .9rem;
  line-height: 1.75;
  margin: 0 0 .8rem;
}

.prose-col p:last-child {
  margin-bottom: 0;
}

.about-aside {
  display: grid;
  gap: .8rem;
  align-content: start;
}


.fact-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--sf-radius-sm);
  padding: .8rem .95rem;
}

.fact-card span {
  color: var(--muted);
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fact-card strong {
  color: var(--brand-dark);
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: .1rem 0 .2rem;
}

.fact-card p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
  margin: 0;
}


/* Procedure - numbered step flow */
/* List styles for the public content pages. Scoped to .prose-col /
   .spec-list so the member-area .detail-list and .check-list are untouched. */
.prose-col .check-list,
.spec-list {
  display: grid;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose-col .check-list li,
.spec-list li {
  color: #3d4c5a;
  font-size: .88rem;
  line-height: 1.55;
  padding-left: 1.6rem;
  position: relative;
}

.prose-col .check-list li::before {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  content: "\2713";
  display: inline-flex;
  font-size: .62rem;
  font-weight: 800;
  height: 1.05rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: .2rem;
  width: 1.05rem;
}

.spec-list li::before {
  background: var(--sf-blue-600);
  border-radius: 50%;
  content: "";
  height: .42rem;
  left: .32rem;
  position: absolute;
  top: .6rem;
  width: .42rem;
}

/* FAQs - accordion */
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm);
  box-shadow: none;
  padding: 0;
}

.faq-item summary {
  align-items: center;
  color: var(--brand-dark);
  cursor: pointer;
  display: flex;
  font-size: .92rem;
  font-weight: 700;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: .95rem 1.1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--brand);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(8, 117, 201, .35);
  outline-offset: -3px;
}

.faq-chevron {
  color: var(--muted);
  flex: 0 0 auto;
  height: 1.15rem;
  transition: transform .2s ease;
  width: 1.15rem;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--line);
}

.faq-item p {
  color: #3d4c5a;
  font-size: .88rem;
  line-height: 1.7;
  margin: 0;
  padding: .9rem 1.1rem 1.05rem;
}

.help-band {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}

.help-band h2 {
  color: var(--brand-dark);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.help-band p {
  color: var(--muted);
  font-size: .88rem;
  margin: 0;
}

.help-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.help-band-actions .sf-button {
  min-height: 42px;
  padding: .6rem 1.3rem;
}

.sf-button--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--brand-dark);
}

.sf-button--outline:hover {
  border-color: var(--gold);
  color: var(--brand);
}

/* Bank Details - numbered EFT steps */
.numbered-list {
  counter-reset: nstep;
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.numbered-list li {
  color: #3d4c5a;
  counter-increment: nstep;
  font-size: .88rem;
  line-height: 1.55;
  padding-left: 2rem;
  position: relative;
}

.numbered-list li::before {
  align-items: center;
  background: var(--sf-navy-900);
  border-radius: 50%;
  color: #fff;
  content: counter(nstep);
  display: inline-flex;
  font-size: .7rem;
  font-weight: 700;
  height: 1.35rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: .1rem;
  width: 1.35rem;
}

.prose-note {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
  margin: 0;
}

.fact-card strong a {
  color: inherit;
  text-decoration: none;
}

.fact-card strong a:hover,
.fact-card strong a:focus-visible {
  text-decoration: underline;
}

.fact-card-cta {
  margin-top: .75rem;
  min-height: 40px;
  padding: .55rem 1.1rem;
  width: 100%;
}

/* Forms - document list */
.document-grid {
  display: grid;
  gap: .7rem;
  grid-template-columns: minmax(0, 1fr);
}

.document-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm);
  box-shadow: none;
  color: var(--ink);
  display: flex;
  gap: .9rem;
  padding: .9rem 1rem;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.document-card:hover,
.document-card:focus-visible {
  background: var(--canvas);
  border-color: var(--sf-blue-600);
  color: var(--ink);
}

.document-ico {
  align-items: center;
  background: #eaf3fb;
  border-radius: var(--sf-radius-sm);
  color: var(--sf-blue-600);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.document-ico svg {
  height: 1.35rem;
  width: 1.35rem;
}

.document-body {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.document-body strong {
  color: var(--brand-dark);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

.document-body small {
  color: var(--muted);
  font-size: .76rem;
}

.document-arrow {
  color: var(--muted);
  flex: 0 0 auto;
  height: 1.1rem;
  margin-left: auto;
  width: 1.1rem;
}

.rates-empty {
  padding: 1.5rem 0;
  text-align: center;
}

.rates-empty h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .4rem;
}

.rates-empty p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 1rem;
}

.contact-info-col h2,
.contact-form-col h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .3rem;
}

.contact-info-lead {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 1.5rem;
}

.contact-info-list {
  display: grid;
  gap: 1.15rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.contact-info-list li {
  align-items: flex-start;
  color: var(--ink);
  display: flex;
  font-size: .88rem;
  gap: .85rem;
  line-height: 1.5;
}

.contact-info-list .ico {
  color: var(--brand-dark);
  flex: 0 0 auto;
  height: 1.3rem;
  margin-top: .1rem;
  width: 1.3rem;
}

.contact-info-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.contact-info-list a:hover,
.contact-info-list a:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}

.contact-social.footer-social {
  gap: .55rem;
}

.contact-social .footer-social-ico {
  height: 38px;
  width: 38px;
}

.contact-social .footer-social-ico svg {
  height: 20px;
  width: 20px;
}

.contact-social .sm-facebook svg,
.contact-social .sm-linkedin svg {
  height: 19px;
  width: 19px;
}

.contact-social .sm-youtube svg {
  height: 21px;
  width: 21px;
}

/* The label above each address block, and the two tinted notices - office
   visits and the 24/7 portal - which sit in the list at full column width. */
.contact-label {
  color: var(--brand-dark);
  display: block;
  font-weight: 700;
}

.contact-info-list li.contact-callout {
  background: #e8f3fe;
  border-radius: var(--sf-radius-md);
  color: var(--brand-dark);
  padding: .9rem 1rem;
}

.contact-info-list li.contact-callout .ico {
  color: var(--sf-blue-650);
}

.contact-callout-title {
  color: var(--sf-blue-650);
  display: block;
  font-weight: 700;
}

.contact-form-note {
  color: var(--muted);
  font-size: .82rem;
  margin: 0;
}

.contact-message-form {
  display: grid;
  gap: .8rem;
}

.contact-message-form .form-control {
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm);
  font-size: .88rem;
  padding: .7rem .85rem;
}

.contact-message-form .form-control::placeholder {
  color: #9aa7b4;
}

.contact-message-form .form-control:focus {
  border-color: var(--sf-blue-600);
  box-shadow: 0 0 0 3px rgba(8, 117, 201, .15);
}

.contact-message-form textarea.form-control {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-message-form .contact-send {
  justify-self: start;
  margin-top: .4rem;
}


.team-strip {
  margin-top: 1rem;
  padding: 1rem;
}

.team-strip div {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
}

.team-strip span {
  background: #f8fafc;
  border-radius: 6px;
  padding: .75rem;
}

.team-strip strong,
.team-strip small {
  display: block;
}

.team-strip small {
  color: var(--muted);
}

.team-strip small a {
  color: var(--muted);
  text-decoration: none;
}

.team-strip small a:hover,
.team-strip small a:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .step-grid,
  .contact-grid,
  .team-strip div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 992px) {
  .home-grid {
    grid-template-columns: 230px minmax(0, 1fr) 230px;
  }

  .content-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .panel-split {
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .panel-split > :first-child {
    padding-right: 2.2rem;
  }

  .panel-split > :last-child {
    border-left: 1px solid var(--line);
    padding-left: 2.2rem;
  }

  /* Prose-led pages want the wider column on the left. */
  .panel-split--prose {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-strip div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

/* ============================================================
   Landing hero: Sydney photo + calculator widget
   ============================================================ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Hero-only: the shared .sf-button caption is 700 and reads too heavy against
   the lightened hero title, so keep the site-wide button weight untouched. */
.hero-actions .sf-button {
  font-size: .95rem;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 20px;
}

.hero-rate-card {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
  color: var(--ink);
  justify-self: stretch;
  padding: 1.25rem 1.2rem 1.15rem;
  width: min(100%, 390px);
}

.hero-rate-head {
  margin-bottom: 1rem;
}

.hero-rate-flagline {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-rate-head h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 800;
  margin: .2rem 0 0;
}

.hero-conv-label {
  color: var(--muted);
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin: .75rem 0 .35rem;
  text-transform: uppercase;
}

.hero-conv-row {
  align-items: stretch;
  border: 1px solid #cbd7e0;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
}

.hero-conv-prefix {
  align-items: center;
  background: #eef3f8;
  border-left: 1px solid #cbd7e0;
  color: var(--brand-dark);
  display: flex;
  font-weight: 800;
  min-width: 4.2rem;
  justify-content: center;
  padding: 0 .7rem;
}

.hero-conv-input {
  border: 0;
  flex: 1;
  font-size: 1.1rem;
  font-weight: 750;
  min-width: 0;
  outline: none;
  padding: .7rem .8rem;
  width: 100%;
}

.hero-conv-receive {
  background: #f4faf7;
  border-color: #b7dfc8;
}

.hero-conv-output {
  align-items: center;
  color: var(--accent-dark);
  display: flex;
  flex: 1;
  font-size: 1.2rem;
  font-weight: 800;
  padding: .7rem .8rem;
}

.hero-conv-select {
  border-radius: 10px;
  font-size: .92rem;
  margin-bottom: .2rem;
  padding: .65rem .75rem;
}

.hero-send-btn {
  margin-top: 1rem;
}

.hero-rate-empty {
  color: var(--muted);
  margin-bottom: .9rem;
}

.hero-rate-updated {
  color: var(--muted);
  font-size: .76rem;
  margin: .75rem 0 0;
  text-align: center;
}

/* Live rates bar */
.live-rates-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(2, 31, 64, .06);
  margin-top: -1.4rem;
  position: relative;
  z-index: 2;
}

.live-rates-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.2rem;
  padding: 1rem 0;
}

.live-rates-label {
  background: var(--brand-deep);
  border-radius: 999px;
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .4rem .8rem;
  text-decoration: none;
  text-transform: uppercase;
}

.live-rates-label:hover,
.live-rates-label:focus-visible {
  background: var(--brand);
  color: #fff;
}

.live-rates-more {
  color: var(--brand);
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.live-rates-more:hover,
.live-rates-more:focus-visible {
  text-decoration: underline;
}

.live-rates-grid {
  display: grid;
  flex: 1;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.live-rate-chip {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .85rem;
}

.live-rate-pair {
  color: var(--muted);
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.live-rate-chip strong {
  color: var(--brand-dark);
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: .15rem 0;
}

.live-rate-chip small {
  color: var(--muted);
  display: block;
  font-size: .78rem;
  line-height: 1.25;
}

.stay-informed {
  margin-top: 1.4rem;
}

.stay-informed h3 {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 760;
  margin: 0 0 .55rem;
}

/* CTA band */
.cta-band {
  align-items: center;
  background:
    radial-gradient(420px 220px at 12% 0%, rgba(31, 157, 85, .22), transparent 60%),
    linear-gradient(120deg, var(--brand-navy), var(--brand) 68%, var(--accent-dark) 140%);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(2, 31, 64, .18);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: 1.6rem auto 1.4rem;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.cta-copy h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  margin: 0 0 .3rem;
}

.cta-copy p {
  color: rgba(255, 255, 255, .9);
  margin: 0;
  max-width: 60ch;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.btn-cta-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff;
}

.btn-cta-ghost:hover,
.btn-cta-ghost:focus-visible {
  background: #fff;
  color: var(--brand-deep);
}

/* Auth pages */
.auth-page {
  align-items: center;
  background: linear-gradient(180deg, #e6f2fd 0%, #f2f8fe 48%, #e9f3fd 100%);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: center;
  min-height: calc(100vh - 180px);
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 2.8rem) 1rem;
  position: relative;
}

/* The harbour is held right back - it is a wash behind the card, not a photo
   the customer is meant to look at. */
.auth-page::before {
  background: url("/assets/images/sydney-harbour-hero.jpg") center bottom / cover no-repeat;
  content: "";
  filter: saturate(.3) brightness(1.3);
  inset: 0;
  opacity: .22;
  position: absolute;
  z-index: -2;
}

/* Hand-lettered mark from the approved design. It only appears where there is
   real room beside the card, so it never crowds the form. */
.auth-page::after {
  background: url("/assets/images/login-people-connected.png") center / contain no-repeat;
  content: "";
  display: none;
  height: min(30vw, 260px);
  pointer-events: none;
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-58%);
  width: min(23vw, 210px);
  z-index: -1;
}

@media (min-width: 1360px) {
  .auth-page::after {
    display: block;
  }
}

.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(2, 31, 64, .1);
  max-width: 440px;
  padding: clamp(1.3rem, 3vw, 2rem);
  width: 100%;
}

.auth-card-wide {
  max-width: 560px;
}

.auth-card-head {
  margin-bottom: 1.2rem;
  text-align: center;
}

.auth-eyebrow {
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0 0 .35rem;
  text-transform: uppercase;
}

.auth-card h1 {
  color: var(--brand-dark);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  margin: 0 0 .4rem;
}

.auth-lead {
  color: var(--muted);
  margin: 0;
}

.auth-alert {
  background: #fff7e8;
  border: 1px solid #f0d39a;
  border-left: 4px solid var(--warning);
  border-radius: 10px;
  color: #7a4b00;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: .75rem .9rem;
}

.auth-form .form-control-lg {
  border-radius: 10px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.1rem;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.auth-links a {
  color: var(--brand);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-links a:hover,
.auth-links a:focus-visible {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Login - split shell: navy brand panel beside the form. Register still uses
   the single .auth-card above, so these are separate classes on purpose.
   --------------------------------------------------------------------------- */

.auth-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-lg);
  box-shadow: 0 26px 60px rgba(3, 31, 59, .14);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 940px;
  overflow: hidden;
  width: 100%;
}

/* Below the split breakpoint this collapses to a slim band so the card still
   carries the brand instead of opening on a bare white form. */
.auth-aside {
  color: var(--brand-dark);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  isolation: isolate;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.5rem 1.6rem;
  position: relative;
}

/* The band keeps the logo, title and trust points; the longer copy and the
   legal footer only earn their space in the full-height split. */
.auth-aside-copy,
.auth-aside-foot {
  display: none;
}

/* Same skyline as the hero, held well back so the copy stays legible. */
.auth-aside::before {
  background: url("/assets/images/hero-background.jpg") center / cover no-repeat;
  content: "";
  inset: 0;
  opacity: .14;
  position: absolute;
  z-index: -2;
}

.auth-aside::after {
  background: linear-gradient(158deg, rgba(219, 237, 253, .92) 0%, rgba(240, 248, 255, .96) 78%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* The harbour closes the panel off. It is decorative, so it carries an empty
   alt and is hidden from assistive technology in the markup. */
.auth-aside-scene {
  border-radius: 10px;
  display: none;
  filter: saturate(.72) brightness(1.06);
  height: 150px;
  object-fit: cover;
  width: 100%;
}

.auth-aside .brand-mark-logo {
  height: 46px;
}

.auth-aside-title {
  color: var(--brand-dark);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .55rem;
}

.auth-aside-copy {
  color: #31404c;
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 24rem;
}

.auth-aside-points {
  display: grid;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-aside-points li {
  color: var(--brand-dark);
  font-size: .9rem;
  font-weight: 600;
  min-height: 26px;
  padding-left: 2.25rem;
  position: relative;
}

/* A filled disc rather than a bare tick: the approved design reads the three
   points as confirmed facts, and the disc carries that at a glance. */
.auth-aside-points li::before {
  align-items: center;
  background: var(--sf-green-600);
  border-radius: 50%;
  color: #fff;
  content: "\2713";
  display: flex;
  font-size: .78rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: -1px;
  width: 26px;
}

.auth-aside-foot {
  border-top: 1px solid rgba(3, 31, 59, .14);
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .04em;
  margin: 0;
  padding-top: 1.1rem;
}

.auth-panel {
  padding: clamp(1.6rem, 3.6vw, 2.6rem);
}

.auth-panel-head {
  margin-bottom: 1.5rem;
}

.auth-panel h1 {
  color: var(--brand-dark);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}

.auth-panel .auth-eyebrow {
  font-size: .7rem;
  letter-spacing: .14em;
}

.auth-panel .auth-lead {
  font-size: .92rem;
}

.auth-alert--info {
  background: #eef5fc;
  border-color: #c7ddf2;
  border-left-color: var(--sf-blue-600);
  color: var(--sf-navy-800);
}

.auth-field {
  margin-bottom: 1.05rem;
}

.auth-label {
  color: var(--brand-dark);
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

.auth-input-wrap {
  position: relative;
}

.auth-field-ico {
  color: var(--sf-grey-600);
  fill: none;
  height: 1.15rem;
  left: .95rem;
  opacity: .75;
  pointer-events: none;
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
}

.auth-input {
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--ink);
  font-size: .98rem;
  padding: .8rem 1rem .8rem 2.75rem;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}

.auth-input::placeholder {
  color: #9aa8b8;
}

.auth-input:focus {
  background: #fff;
  border-color: var(--sf-blue-600);
  box-shadow: 0 0 0 3px rgba(8, 117, 201, .16);
  outline: none;
}

/* Password field keeps room for the reveal button on the right. */
.auth-input[type="password"],
.auth-input[data-password-input] {
  padding-right: 4.2rem;
}

.auth-reveal {
  background: none;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .25rem .35rem;
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
}

.auth-reveal:hover {
  color: var(--sf-blue-600);
  text-decoration: underline;
}

.auth-reveal:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(8, 117, 201, .45);
  outline-offset: 2px;
}

.auth-error {
  color: var(--sf-error);
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-top: .3rem;
}

.auth-form-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.2rem;
}

.auth-form-meta a {
  color: var(--brand);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}

.auth-form-meta a:hover,
.auth-form-meta a:focus-visible {
  text-decoration: underline;
}

.auth-submit {
  align-items: center;
  display: flex;
  font-size: .98rem;
  font-weight: 600;
  gap: .6rem;
  justify-content: center;
  width: 100%;
}

.auth-submit-arrow {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

/* Trust strip under the card. Three facts, not navigation - so it is a list
   rather than a row of links. */
.auth-trust {
  display: grid;
  gap: .9rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.6rem) 0 0;
  max-width: 940px;
  padding: 0;
  width: 100%;
}

.auth-trust li {
  align-items: center;
  display: flex;
  gap: .7rem;
}

.auth-trust li + li {
  border-left: 1px solid rgba(3, 31, 59, .12);
  padding-left: 2.4rem;
}

.auth-trust svg {
  color: var(--sf-blue-800);
  fill: none;
  flex: none;
  height: 30px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 30px;
}

.auth-trust strong {
  color: var(--brand-dark);
  display: block;
  font-size: .92rem;
  font-weight: 700;
}

.auth-trust span {
  color: var(--muted);
  font-size: .84rem;
}

/* Stacked, the dividers would read as stray rules down the left-hand edge. */
@media (max-width: 719.98px) {
  .auth-trust li + li {
    border-left: 0;
    padding-left: 0;
  }
}

.auth-panel-foot {
  border-top: 1px solid var(--sf-grey-100);
  margin-top: 1.6rem;
  padding-top: 1.2rem;
}

.auth-switch,
.auth-help {
  color: var(--muted);
  font-size: .87rem;
  margin: 0;
}

.auth-help {
  font-size: .8rem;
  margin-top: .45rem;
}

.auth-switch a,
.auth-help a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch a:hover,
.auth-switch a:focus-visible,
.auth-help a:hover,
.auth-help a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 880px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }

  .auth-aside {
    padding: 2.5rem 2.2rem;
  }

  .auth-aside-copy,
  .auth-aside-foot {
    display: block;
  }

  .auth-aside-scene {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Forgot password - a four step reset inside the same split shell as login.
   The tracker shows where the customer is because each step is its own post.
   --------------------------------------------------------------------------- */

.reset-steps {
  counter-reset: reset-step;
  display: flex;
  gap: .35rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.reset-step {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: .35rem;
  position: relative;
  text-align: center;
}

/* The connector sits behind the numbers rather than between the items, so a
   wrapped label cannot pull it out of line. */
.reset-step::before {
  background: var(--sf-grey-300);
  content: "";
  height: 2px;
  left: -50%;
  position: absolute;
  right: 50%;
  top: .82rem;
}

.reset-step:first-child::before {
  display: none;
}

.reset-step-num {
  align-items: center;
  background: #fff;
  border: 2px solid var(--sf-grey-300);
  border-radius: 50%;
  color: var(--muted);
  display: flex;
  font-size: .8rem;
  font-weight: 700;
  height: 1.65rem;
  justify-content: center;
  position: relative;
  width: 1.65rem;
  z-index: 1;
}

.reset-step-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
}

.reset-step.is-current {
  color: var(--brand-dark);
}

.reset-step.is-current .reset-step-num {
  background: var(--sf-blue-600);
  border-color: var(--sf-blue-600);
  box-shadow: 0 0 0 3px rgba(8, 117, 201, .16);
  color: #fff;
}

.reset-step.is-done {
  color: var(--brand);
}

.reset-step.is-done .reset-step-num {
  background: var(--sf-success);
  border-color: var(--sf-success);
  color: #fff;
}

.register-track .reset-step.is-done .reset-step-num {
  font-size: 0;
}

.register-track .reset-step.is-done .reset-step-num::after {
  content: "\2713";
  font-size: .85rem;
  font-weight: 800;
}

.reset-step.is-done::before,
.reset-step.is-current::before {
  background: var(--sf-success);
}

.reset-lead {
  margin-bottom: 1.2rem;
}

/* The masked address is the one thing the customer has to check on step two,
   so it is set apart from the copy around it. */
.reset-email {
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 1.3rem;
  padding: .85rem 1rem;
  text-align: center;
  word-break: break-all;
}

.reset-resend {
  margin-top: .9rem;
  text-align: center;
}

.reset-finish {
  display: block;
  text-align: center;
  text-decoration: none;
}

.sf-link-button {
  background: none;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  padding: .25rem;
}

.sf-link-button:hover,
.sf-link-button:focus-visible {
  color: var(--sf-blue-600);
  text-decoration: underline;
}

.auth-alert--success {
  background: #eaf7ef;
  border-color: #b7e0c6;
  border-left-color: var(--sf-success);
  color: #0a5c2c;
}

.register-steps {
  display: grid;
  gap: .85rem;
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
}

.register-steps li {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: .2rem;
  padding: .9rem 1rem;
}

.register-steps strong {
  color: var(--brand-dark);
}

.register-steps span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.register-actions {
  display: grid;
  gap: .7rem;
}

/* Public page helpers */
.muted {
  color: var(--muted);
  font-size: .92rem;
}

.pre-line {
  white-space: pre-line;
}

.declaration-box {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
  margin-top: 1.5rem;
  padding: 1.15rem 1.3rem;
}

.declaration-box p:last-child {
  margin-bottom: 0;
}

.help-band {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding: 1.1rem 1.3rem;
}

.help-band h2 {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 760;
  margin: 0 0 .2rem;
}

.help-band p {
  color: var(--muted);
  margin: 0;
}

.help-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .register-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  }

  .hero-rate-card {
    justify-self: end;
  }
}

/* ============================================================
   Header account actions + login modal
   ============================================================ */
.brand-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

.auth-actions {
  display: flex;
  gap: .5rem;
}

.login-modal {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.login-modal .modal-header {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  border-bottom: 0;
}

.login-modal .modal-title {
  color: #fff;
  font-weight: 760;
}

.login-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

.login-modal-note {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 1rem;
}

.login-modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
}

.login-modal-links a {
  color: var(--accent);
  font-size: .86rem;
  font-weight: 700;
}

/* Login / status banner */
.alert-banner {
  align-items: center;
  background: var(--gold-soft);
  border: 1px solid #f4d36b;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  color: #4d3a04;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  transition: opacity .45s ease, transform .45s ease;
}

.alert-banner.is-dismissing {
  opacity: 0;
  transform: translateY(-6px);
}

.alert-banner span {
  font-weight: 700;
}

/* ============================================================
   Interactive rate selector (replaces rate table)
   ============================================================ */
.rate-select-label {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin: .9rem 0 .4rem;
  text-transform: uppercase;
}

.rate-select {
  display: grid;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rate-option {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: .6rem;
  justify-content: space-between;
  padding: .55rem .7rem;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  width: 100%;
}

.rate-option:hover {
  border-color: var(--brand);
}

.rate-option.active {
  background: #f1f7fd;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.rate-option-name {
  color: #25313b;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;
}

.rate-option-rate {
  color: var(--brand-dark);
  font-weight: 800;
  white-space: nowrap;
}

.rate-option-rate small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}

.rate-option.promo .rate-option-name {
  color: var(--accent);
  font-weight: 750;
}

.rate-option.promo.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ============================================================
   Exchange Rates - the approved rate card
   ============================================================
   Three method cards over one flat table, with the transfer
   calculator held alongside on wide screens. Each method owns a
   colour: green for a bank deposit, blue for RDA, gold for cash
   pickup - the same three the rest of the site already uses. */

.rates-hero {
  background:
    linear-gradient(180deg, #cfe6fb 0%, #dcefff 55%, #d3e9fc 100%);
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.2rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}

/* Harbour artwork sits at the right-hand end, faded into the band so the
   crop's own ground never shows a seam against the gradient above. */
.rates-hero::after {
  background: url('../assets/images/rates-hero-skyline.png') right bottom / contain no-repeat;
  content: "";
  inset: 0 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  pointer-events: none;
  position: absolute;
  width: min(60%, 660px);
}

/* The band has to stay tall enough for the artwork to read; under the split
   breakpoint the copy takes the whole width and the artwork is dropped. */
@media (min-width: 768px) {
  .rates-hero {
    min-height: 150px;
  }

  .rates-hero-copy {
    max-width: 58%;
  }
}

@media (max-width: 767.98px) {
  .rates-hero::after {
    display: none;
  }
}

.rates-hero-copy {
  position: relative;
  z-index: 1;
}

.rates-hero-crumb {
  color: var(--sf-grey-600);
  display: flex;
  flex-wrap: wrap;
  font-size: .85rem;
  gap: .45rem;
  margin-bottom: .35rem;
}

.rates-hero-crumb a {
  color: var(--sf-grey-600);
  text-decoration: none;
}

.rates-hero-crumb a:hover,
.rates-hero-crumb a:focus-visible {
  color: var(--sf-blue-900);
  text-decoration: underline;
}

.rates-hero h1 {
  color: var(--sf-blue-900);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  margin: 0 0 .3rem;
}

.rates-hero p {
  color: #1c3a63;
  margin: 0;
  max-width: 34rem;
}

.rates-page {
  display: grid;
  gap: 1.1rem;
}

.rates-layout {
  align-items: start;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Stacked, the calculator leads: it is the thing customers came to use, and
   burying it under the listing puts it a long scroll away. */
.rates-aside {
  min-width: 0;
  order: 1;
}

@media (min-width: 992px) {
  .rates-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }

  .rates-main {
    order: 1;
  }

  /* The listing runs much taller than the calculator, so it stays in view
     rather than leaving a column of dead space beside the table. */
  .rates-aside {
    order: 2;
    position: sticky;
    top: 1.25rem;
  }
}

.rates-main {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  order: 2;
}

/* Intro ------------------------------------------------------- */
.rates-intro-head {
  display: grid;
  gap: .25rem;
  justify-items: start;
}

.rates-intro-head h2,
.rates-section-title {
  color: var(--sf-blue-900);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 800;
  margin: 0;
}

.rates-updated {
  color: var(--muted);
  font-size: .82rem;
  margin: 0;
}

.rates-intro-copy {
  color: #31404c;
  margin: .45rem 0 0;
  max-width: 46rem;
}

/* Method cards ------------------------------------------------ */
.ratecard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.ratecard {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Per-method colour. --tone carries the header/rate colour, --wash the
   tinted ground the card body and its note sit on. */
.ratecard--bank {
  --tone: var(--sf-green-700);
  --wash: #f1f9f4;
  border-color: #cfe8da;
}

.ratecard--rda {
  --tone: var(--sf-blue-800);
  --wash: #eef5fe;
  border-color: #cddffa;
}

.ratecard--cash {
  --tone: #d99100;
  --wash: #fdf6e8;
  border-color: #f3ddaf;
}

.ratecard--other {
  --tone: var(--sf-navy-800);
  --wash: var(--sf-grey-50);
}

.ratecard-head {
  align-items: center;
  background: var(--panel);
  display: flex;
  gap: .7rem;
  min-height: 5.1rem;
  padding: .9rem;
}

.ratecard-icon {
  align-items: center;
  background: var(--tone);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: none;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.ratecard-icon svg {
  height: 24px;
  width: 24px;
}

.ratecard-titles h3 {
  color: var(--tone);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
  margin: 0;
  text-transform: uppercase;
}

.ratecard-titles p {
  color: #31404c;
  font-size: .82rem;
  margin: .1rem 0 0;
}

.ratecard-table {
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

.ratecard-table thead th {
  background: var(--tone);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .55rem .7rem;
  text-align: center;
  text-transform: uppercase;
}

.ratecard-table thead th:first-child {
  text-align: left;
}

.ratecard-unit {
  display: block;
  font-weight: 700;
  letter-spacing: .03em;
}

.ratecard-table tbody th,
.ratecard-table tbody td {
  background: rgba(255, 255, 255, .62);
  border-top: 1px solid rgba(255, 255, 255, .9);
  padding: .65rem .7rem;
  vertical-align: middle;
}

.ratecard-table tbody th {
  font-weight: 400;
  text-align: left;
}

.ratecard-amount {
  color: var(--brand-dark);
  display: block;
  font-size: 1rem;
  font-weight: 750;
}

.ratecard-sub {
  color: var(--muted);
  display: block;
  font-size: .78rem;
}

/* The promotional band is the one row a customer has to read carefully, so
   it is the only place on the card that reaches for red. */
.ratecard-sub.is-promo {
  color: var(--sf-error);
}

.ratecard-badge {
  background: var(--gold-soft);
  border: 1px solid #edd39a;
  border-radius: 4px;
  color: var(--gold-dark);
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-top: .25rem;
  padding: .1rem .4rem;
  text-transform: uppercase;
}

.ratecard-rate {
  color: var(--tone);
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.ratecard--bank .ratecard-rate.is-promo {
  color: var(--sf-error);
}

/* Pickup bank rows: initials stand in for the bank's mark - we hold no
   licensed logos, so nothing here pretends to be one. */
.ratecard-bank {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.ratecard-bank-mark {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--tone);
  display: inline-flex;
  flex: none;
  font-size: .72rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  letter-spacing: .02em;
  width: 32px;
}

.ratecard-bank-name {
  color: var(--brand-dark);
  font-weight: 650;
}

.ratecard-note {
  align-items: flex-start;
  border-top: 1px solid rgba(0, 0, 0, .05);
  color: #31404c;
  display: flex;
  font-size: .82rem;
  gap: .5rem;
  line-height: 1.45;
  margin: 0;
  margin-top: auto;
  padding: .75rem .7rem;
}

.ratecard-note-icon {
  color: var(--tone);
  flex: none;
  line-height: 0;
}

.ratecard-note-icon svg {
  height: 20px;
  width: 20px;
}

/* Callouts ---------------------------------------------------- */
.rates-callout {
  border-radius: 12px;
  display: flex;
  gap: .8rem;
  padding: .95rem 1.1rem;
}

.rates-callout-icon {
  flex: none;
  line-height: 0;
}

.rates-callout-icon svg {
  height: 26px;
  width: 26px;
}

.rates-callout h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0 0 .3rem;
}

.rates-callout h4 {
  font-size: .9rem;
  font-weight: 800;
  margin: .6rem 0 .25rem;
}

.rates-callout p {
  margin: 0 0 .4rem;
}

.rates-callout p:last-child {
  margin-bottom: 0;
}

.rates-callout ul {
  margin: 0;
  padding-left: 1.15rem;
}

.rates-callout li {
  margin-bottom: .2rem;
}

.rates-callout--info {
  background: #eaf3fe;
  color: #26394f;
}

.rates-callout--info h3,
.rates-callout--info .rates-callout-icon {
  color: var(--sf-blue-800);
}

.rates-callout--promo {
  background: #fdf5e4;
  border: 1px solid #f0dcae;
  color: #3a3527;
}

.rates-callout--promo h3,
.rates-callout--promo h4 {
  color: var(--sf-blue-900);
}

.rates-callout--promo .rates-callout-icon {
  color: var(--gold);
}

.rates-callout--fineprint {
  background: var(--sf-grey-50);
  border: 1px solid var(--sf-grey-100);
  color: #31404c;
  font-size: .9rem;
}

.rates-callout--fineprint .rates-callout-icon {
  color: var(--sf-blue-800);
}

.rates-callout--fineprint ul {
  margin-bottom: .55rem;
}

/* All available rates table ----------------------------------- */
.rates-all-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}

.rates-all {
  border-collapse: collapse;
  margin: 0;
  min-width: 34rem;
  width: 100%;
}

.rates-all thead th {
  background: var(--sf-navy-900);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  padding: .7rem .9rem;
  text-align: center;
}

.rates-all thead th:first-child {
  text-align: left;
}

.rates-all thead th + th,
.rates-all tbody th + td,
.rates-all tbody td + td {
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.rates-all tbody th + td,
.rates-all tbody td + td {
  border-left-color: var(--sf-grey-100);
}

.rates-all tbody th,
.rates-all tbody td {
  border-top: 1px solid var(--sf-grey-100);
  color: #31404c;
  padding: .6rem .9rem;
  text-align: center;
}

.rates-all tbody th {
  font-weight: 400;
  text-align: left;
}

/* Every third column figure is the one being compared, so it stays the
   heaviest thing in the row. */
.rates-all-rate {
  color: var(--brand-dark);
  font-weight: 750;
  white-space: nowrap;
}

.rates-all tbody tr:nth-child(even) th,
.rates-all tbody tr:nth-child(even) td {
  background: var(--sf-grey-50);
}

.rates-all tbody tr.is-promo th,
.rates-all tbody tr.is-promo .rates-all-rate {
  color: var(--brand-dark);
  font-weight: 750;
}

/* How the methods differ -------------------------------------- */
.rates-compare {
  background: #eef5fe;
  border-radius: 12px;
  padding: .95rem 1.1rem 1.1rem;
}

.rates-compare h3 {
  color: var(--sf-blue-900);
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0 0 .7rem;
}

.rates-compare-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.rates-compare-item {
  align-items: flex-start;
  border-left: 1px solid #cddffa;
  display: flex;
  gap: .65rem;
  padding-left: .9rem;
}

.rates-compare-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.rates-compare-item--bank {
  --tone: var(--sf-green-700);
}

.rates-compare-item--rda {
  --tone: var(--sf-blue-800);
}

.rates-compare-item--cash {
  --tone: #d99100;
}

.rates-compare-item--other {
  --tone: var(--sf-navy-800);
}

.rates-compare-icon {
  align-items: center;
  background: var(--tone);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.rates-compare-icon svg {
  height: 22px;
  width: 22px;
}

.rates-compare-item h4 {
  color: var(--tone);
  font-size: .92rem;
  font-weight: 800;
  margin: 0 0 .15rem;
}

.rates-compare-item p {
  color: #31404c;
  font-size: .85rem;
  line-height: 1.45;
  margin: 0;
}

/* Below the grid breakpoint the items stack, so the dividers would read as
   stray rules down the left-hand edge. */
@media (max-width: 660px) {
  .rates-compare-item {
    border-left: 0;
    padding-left: 0;
  }
}

.rates-empty {
  padding: 1.4rem;
  text-align: center;
}

.rates-empty h2 {
  color: var(--brand-dark);
  font-size: 1.2rem;
  margin: 0 0 .4rem;
}

.rates-empty p {
  color: var(--muted);
  margin: 0 0 1rem;
}

/* ============================================================
   Stay informed row (SMS alert + notice + youtube)
   ============================================================ */
.stay-informed {
  margin-top: 1.4rem;
}

.informed-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.sms-card-note {
  color: var(--muted);
  font-size: .88rem;
  margin: 0 0 .8rem;
}

.notice-card img,
.youtube-card img {
  border-radius: 6px;
  height: auto;
  max-width: 100%;
}

.youtube-card {
  color: var(--ink);
  display: block;
  text-decoration: none;
}

.youtube-card:hover {
  border-color: var(--brand);
}

@media (min-width: 768px) {
  .informed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .brand-actions {
    gap: .55rem;
  }

  .auth-actions .btn {
    font-size: .78rem;
    padding: .25rem .55rem;
  }
}

/* ============================================================
   List filtering (beneficiaries) - live search + chips
   ============================================================ */
.list-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.filter-search {
  flex: 1 1 320px;
  max-width: 460px;
  position: relative;
}

.filter-search-ico {
  color: var(--muted);
  font-size: .9rem;
  left: .75rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.filter-search .form-control {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.filter-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 .35rem;
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
}

.filter-clear:hover {
  color: var(--accent);
}

.list-toolbar-add {
  flex: 0 0 auto;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}

.filter-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm);
  color: #3a4a57;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  padding: .3rem .8rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.filter-chip:hover {
  border-color: var(--brand);
}

.filter-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.filter-count {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}

/* ============================================================
   Member dashboard
   ============================================================ */
/* ============================================================
   Member dashboard
   Shares the public content-page shell: rounded panel, navy head
   band, white body. Cards inside follow the .rate-tile pattern so
   member and public pages read as one system.
   ============================================================ */

.dash-panel {
  margin-bottom: 1.2rem;
}

.dash-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}

.dash-eyebrow {
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 .35rem;
  text-transform: uppercase;
}

.dash-head h1 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.dash-head-sub {
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  margin: .4rem 0 0;
}

.sf-button--light {
  background: #fff;
  color: var(--brand-dark);
}

.sf-button--light:hover {
  background: var(--sf-grey-100);
  color: var(--brand-dark);
}

.dash-head-cta {
  flex: none;
  white-space: nowrap;
}

/* Alerts ------------------------------------------------------ */
.dash-alert {
  align-items: flex-start;
  border-radius: var(--sf-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.15rem;
}

.dash-alert p {
  margin: .2rem 0 0;
  line-height: 1.6;
}

.dash-alert strong {
  font-size: .95rem;
}

.dash-alert > div {
  flex: 1 1 260px;
  min-width: 0;
}

.dash-alert-ico {
  flex: none;
}

.dash-alert-ico svg {
  display: block;
  height: 22px;
  width: 22px;
}

.dash-alert-cta {
  flex: none;
  min-height: 40px;
  padding: .5rem 1.1rem;
}

.dash-alert--notice {
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  color: #6b4c07;
}

.dash-alert--notice strong {
  color: var(--gold-dark);
}

.dash-alert--action {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  color: #205a38;
}

.dash-alert--action strong {
  color: var(--accent-dark);
}

/* Stats ------------------------------------------------------- */
.dash-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 2rem;
}

.dash-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  color: var(--ink);
  display: block;
  padding: 1.15rem 1.25rem;
  position: relative;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.dash-stat:hover,
a.dash-stat:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(5, 47, 85, .12);
  color: var(--ink);
  transform: translateY(-2px);
}

.dash-stat-ico {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin-bottom: .8rem;
  width: 40px;
}

.dash-stat-ico svg {
  height: 20px;
  width: 20px;
}

.dash-stat-value {
  color: var(--brand-dark);
  display: block;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.dash-stat-label {
  color: var(--muted);
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-top: .3rem;
}

.dash-stat--total .dash-stat-ico {
  background: #e8f0fb;
  color: var(--sf-blue-700);
}

.dash-stat--processed .dash-stat-ico {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.dash-stat--pending .dash-stat-ico {
  background: var(--gold-soft);
  color: var(--gold-dark);
}

/* Only draw attention to pending when something is actually waiting. */
.dash-stat--pending.is-active {
  border-color: var(--gold);
}

/* Sections ---------------------------------------------------- */
.dash-section-title {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

.dash-actions {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 2rem;
}

.dash-action {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  color: var(--ink);
  display: block;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dash-action:hover,
.dash-action:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(5, 47, 85, .12);
  color: var(--ink);
  transform: translateY(-2px);
}

.dash-action-ico {
  align-items: center;
  background: #e8f0fb;
  border-radius: 12px;
  color: var(--sf-blue-700);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin-bottom: .8rem;
  width: 40px;
}

.dash-action-ico svg {
  height: 20px;
  width: 20px;
}

.dash-action strong {
  color: var(--brand-dark);
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.dash-action small {
  color: var(--muted);
  display: block;
  font-size: .84rem;
  line-height: 1.45;
  margin-top: .15rem;
}

/* Notes ------------------------------------------------------- */
/* Stretch rather than start, so the two cards share a baseline instead of
   ending at whatever height their copy happens to reach. */
.dash-info-grid {
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Pins the contact block to the bottom of its card as the columns stretch. */
.dash-checklist {
  display: flex;
  flex-direction: column;
}

.dash-checklist .dash-help {
  margin-top: auto;
}

@media (min-width: 992px) {
  .dash-info-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.dash-note,
.dash-checklist {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}

.dash-note h2,
.dash-checklist h2 {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 .7rem;
}

.dash-note p {
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.7;
  margin: 0 0 .7rem;
}

.dash-note p:last-child {
  margin-bottom: 0;
}

.dash-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-checklist li {
  color: var(--ink);
  font-size: .89rem;
  line-height: 1.5;
  padding: .3rem 0 .3rem 1.6rem;
  position: relative;
}

.dash-checklist li::before {
  color: var(--accent-dark);
  content: "\2713";
  font-weight: 800;
  left: .25rem;
  position: absolute;
}

.dash-help {
  border-top: 1px solid var(--line);
  display: grid;
  gap: .2rem;
  margin-top: 1rem;
  padding-top: .9rem;
}

.dash-help strong {
  color: var(--brand-dark);
  font-size: .88rem;
}

.dash-help a {
  color: var(--accent-dark);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.dash-help a:hover,
.dash-help a:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   Member profile
   Same rounded panel shell as the dashboard. .info-card and
   .info-list are deliberately generic - the remaining member
   detail pages can move onto them as they are converted.
   ============================================================ */

.profile-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}

.profile-identity {
  align-items: center;
  display: flex;
  flex: 1 1 320px;
  gap: 1rem;
  min-width: 0;
}

.profile-avatar-lg {
  align-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: none;
  font-size: 1.35rem;
  font-weight: 800;
  height: 64px;
  justify-content: center;
  letter-spacing: .02em;
  width: 64px;
}

.profile-identity-copy {
  min-width: 0;
}

.profile-eyebrow {
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 .3rem;
  text-transform: uppercase;
}

.profile-head h1 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.profile-badge {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: .22rem .7rem;
}

.profile-head-cta {
  flex: none;
  white-space: nowrap;
}

.profile-head-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: .6rem;
}

/* Heading with an action opposite, above a list or table. */
.section-split {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.section-split .dash-section-title {
  margin-bottom: .2rem;
}

.section-split-sub {
  color: var(--muted);
  font-size: .87rem;
  margin: 0;
}

/* ============================================================
   Remittance wizard
   ============================================================ */

.step-track {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--line);
}

.step-track-item {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: .86rem;
  font-weight: 600;
  gap: .5rem;
}

.step-track-mark {
  align-items: center;
  background: var(--sf-grey-100);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex: none;
  font-size: .8rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.step-track-mark svg {
  height: 14px;
  width: 14px;
}

.step-track-item.is-current {
  color: var(--brand-dark);
  font-weight: 800;
}

.step-track-item.is-current .step-track-mark {
  background: var(--brand);
  color: #fff;
}

.step-track-item.is-done {
  color: var(--accent-dark);
}

.step-track-item.is-done .step-track-mark {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Amount beside its live quote. */
.remit-amount-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
}

@media (min-width: 992px) {
  .remit-amount-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.remit-amount-layout .form-section {
  margin: 0;
}

.remit-amount-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .remit-amount-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.remit-amount-input {
  position: relative;
}

.remit-amount-input .form-control {
  font-size: 1.15rem;
  font-weight: 700;
  padding-right: 4rem;
}

.remit-amount-code {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 800;
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Quote panel ------------------------------------------------- */
.quote-card {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand) 100%);
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem 1.35rem;
}

.quote-card h2 {
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.quote-list {
  margin: 0;
}

.quote-list > div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: .55rem;
}

.quote-list dt {
  color: rgba(255, 255, 255, .72);
  font-size: .86rem;
  font-weight: 500;
}

.quote-list dd {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.quote-total {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: .8rem !important;
  padding-top: .8rem;
}

.quote-receive dd {
  color: #7ce0a3;
  font-size: 1.15rem;
  font-weight: 800;
}

.quote-note {
  color: rgba(255, 255, 255, .6);
  font-size: .74rem;
  line-height: 1.45;
  margin: .9rem 0 0;
}

.remit-actions {
  margin-top: 1.6rem;
}

/* Selectable pick list (choose a beneficiary / bank account) */
.pick-list {
  display: grid;
  gap: .7rem;
}

.pick-item {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: .9rem;
  padding: .9rem 1.05rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pick-item:hover {
  border-color: var(--brand);
}

/* The radio itself is hidden; the row is the control. */
.pick-input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.pick-body {
  flex: 1;
  min-width: 0;
}

.pick-title {
  color: var(--brand-dark);
  display: block;
  font-size: .96rem;
  font-weight: 700;
}

.pick-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .84rem;
  gap: .25rem .9rem;
  margin-top: .15rem;
}

.pick-check {
  align-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: transparent;
  display: inline-flex;
  flex: none;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.pick-check svg {
  height: 13px;
  width: 13px;
}

.pick-item:has(.pick-input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 159, 73, .12);
}

.pick-item:has(.pick-input:checked) .pick-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Keyboard focus has to be visible even though the radio is hidden. */
.pick-item:has(.pick-input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Confirm step: lead with the money, details underneath. */
.confirm-amounts {
  align-items: center;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand) 100%);
  border-radius: 14px;
  color: #fff;
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.5rem;
}

@media (min-width: 780px) {
  .confirm-amounts {
    grid-template-columns: auto auto auto minmax(0, 1fr);
  }
}

.confirm-amount-label {
  color: rgba(255, 255, 255, .78);
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  margin-bottom: .25rem;
  text-transform: uppercase;
}

/* Gold carries the amount being sent; green stays reserved for the amount
   received, so the two figures never rely on position alone. */
.confirm-amount-value {
  color: var(--gold);
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

/* The currency code stays white: gold at .8 opacity dropped to 3.6:1 against
   the navy, and it reads better as a unit separate from the figure anyway. */
.confirm-amount-value span {
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  font-weight: 700;
}

.confirm-amount--receive .confirm-amount-value {
  color: #7ce0a3;
}

.confirm-amount-arrow {
  color: rgba(255, 255, 255, .5);
  display: none;
}

@media (min-width: 780px) {
  .confirm-amount-arrow {
    display: block;
  }
}

.confirm-amount-arrow svg {
  height: 22px;
  width: 22px;
}

.confirm-amount-meta {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin: 0;
  padding-top: .9rem;
}

@media (min-width: 780px) {
  .confirm-amount-meta {
    border-left: 1px solid rgba(255, 255, 255, .18);
    border-top: 0;
    padding: 0 0 0 1.5rem;
  }
}

.confirm-amount-meta > div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: .3rem;
}

.confirm-amount-meta dt {
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
}

.confirm-amount-meta dd {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  margin: 0;
}

/* Proof of payment ------------------------------------------- */
@media (min-width: 780px) {
  .pop-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.pop-upload {
  margin-top: 1.5rem;
}

.pop-upload + .record-form .form-section,
.list-card + .record-form .form-section {
  margin-top: 1.25rem;
}

.record-form .form-section + .form-section,
.pop-answer {
  max-width: 100%;
}

.pop-answer {
  max-width: 320px;
}

.form-hint {
  color: var(--muted);
  font-size: .8rem;
  margin: .4rem 0 0;
}

.pop-status {
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .18rem .6rem;
  text-transform: uppercase;
}

.pop-status.is-valid {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Not red: an unmatched upload is waiting on a person, not rejected. Kept as
   its own rule rather than reusing the notice tokens because the badge sits on
   a table row and needs more contrast than a full-width banner does. */
.pop-status.is-checking {
  background: var(--gold-soft);
  color: #6b4c07;
}

/* Removing an upload is a quiet, destructive action: it stays a text button so
   it never competes with Upload or Continue, and only reddens on approach. */
.pop-delete-form {
  display: inline;
  margin: 0;
}

.pop-delete {
  background: none;
  border: 0;
  border-radius: var(--sf-radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .5rem;
  text-decoration: underline;
}

.pop-delete:hover,
.pop-delete:focus-visible {
  color: var(--sf-error);
}

.pop-delete:focus-visible {
  outline: 2px solid var(--sf-error);
  outline-offset: 2px;
}

.record-form .form-control[type="file"] {
  padding: .5rem .6rem;
}

/* Shown while an upload is being read. It sits under the submit row rather
   than replacing it, so nothing on the page moves as it appears. */
.pop-busy {
  align-items: flex-start;
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--sf-radius-md);
  color: #6b4c07;
  display: flex;
  gap: .8rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
}

.pop-busy[hidden] {
  display: none;
}

.pop-busy-copy {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.pop-busy-copy strong {
  font-size: .95rem;
}

.pop-busy-copy span {
  font-size: .85rem;
  line-height: 1.6;
}

.pop-busy-spinner {
  animation: pop-busy-spin 850ms linear infinite;
  border: 2.5px solid rgba(107, 76, 7, .25);
  border-radius: 50%;
  border-top-color: #6b4c07;
  flex: none;
  height: 20px;
  margin-top: .1rem;
  width: 20px;
}

@keyframes pop-busy-spin {
  to { transform: rotate(360deg); }
}

/* The wait is long enough that the message has to carry it on its own where
   animation is unwelcome, so the ring simply holds still. */
@media (prefers-reduced-motion: reduce) {
  .pop-busy-spinner {
    animation: none;
  }
}

.record-form.is-busy .form-control[type="file"] {
  opacity: .65;
  pointer-events: none;
}

/* Scoped to this button rather than every disabled one on the site, which has
   no shared disabled style to inherit and is not this change's business. */
[data-busy-submit]:disabled {
  cursor: default;
  opacity: .6;
}

/* ============================================================
   History filters
   ============================================================ */

.filter-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.2rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* Segmented status control - the primary filter, so it reads as one unit. */
.filter-status {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .25rem;
}

.filter-status .filter-chip {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: .86rem;
  font-weight: 700;
  gap: .4rem;
  padding: .4rem .9rem;
  transition: background-color .15s ease, color .15s ease;
}

.filter-status .filter-chip:hover {
  color: var(--brand-dark);
}

.filter-status .filter-chip.active {
  background: var(--brand);
  color: #fff;
}

.filter-chip-count {
  background: rgba(2, 21, 41, .08);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  min-width: 1.5rem;
  padding: .05rem .35rem;
  text-align: center;
}

.filter-status .filter-chip.active .filter-chip-count {
  background: rgba(255, 255, 255, .22);
}

.filter-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.filter-more {
  gap: .45rem;
  min-height: 42px;
  padding: .5rem 1rem;
  position: relative;
}

.filter-more svg {
  height: 17px;
  width: 17px;
}

/* Marks that a date or amount filter is set while the panel is collapsed. */
.filter-more-dot {
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  height: 11px;
  position: absolute;
  right: -3px;
  top: -3px;
  width: 11px;
}

.filter-advanced {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 1rem;
  padding: 1.1rem 1.2rem;
}

.filter-advanced-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .filter-advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .filter-advanced-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.filter-advanced .form-label {
  color: var(--brand-dark);
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .3rem;
}

.filter-advanced .form-control {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--ink);
  font-size: .9rem;
  padding: .55rem .75rem;
  width: 100%;
}

.filter-advanced .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 74, 125, .12);
  outline: none;
}

.filter-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  margin-bottom: .9rem;
}

.filter-reset {
  background: none;
  border: 0;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.status-pill {
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .2rem .65rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.pending {
  background: var(--gold-soft);
  color: var(--gold-dark);
}

.status-pill.processed {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Contact shortcuts ------------------------------------------- */
.profile-contact-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 1.6rem;
}

.profile-contact {
  align-items: center;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  display: flex;
  gap: .8rem;
  padding: .85rem 1rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.profile-contact:hover,
.profile-contact:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(5, 47, 85, .1);
  color: var(--ink);
}

.profile-contact-ico {
  align-items: center;
  background: #e8f0fb;
  border-radius: 10px;
  color: var(--sf-blue-700);
  display: inline-flex;
  flex: none;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.profile-contact-ico svg {
  height: 19px;
  width: 19px;
}

.profile-contact small {
  color: var(--muted);
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-contact strong {
  color: var(--brand-dark);
  display: block;
  font-size: .92rem;
  overflow-wrap: anywhere;
}

/* Info cards -------------------------------------------------- */
/* Two columns rather than auto-fit: the four cards hold very different row
   counts, and four narrow columns leave the short ones mostly empty. Pairing
   them puts Identity next to Identification and Contact next to Address, which
   are close enough in height to sit level. */
.info-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.info-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 45, 61, .05);
  overflow: hidden;
}

.info-card h2 {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--brand-dark);
  display: flex;
  font-size: .98rem;
  font-weight: 800;
  gap: .6rem;
  margin: 0;
  padding: .9rem 1.1rem;
}

.info-card-ico {
  align-items: center;
  background: #e8f0fb;
  border-radius: 9px;
  color: var(--sf-blue-700);
  display: inline-flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.info-card-ico svg {
  height: 17px;
  width: 17px;
}

.info-list {
  margin: 0;
}

.info-list > div {
  border-top: 1px solid var(--sf-grey-100);
  display: grid;
  gap: .2rem;
  padding: .75rem 1.1rem;
}

.info-list > div:first-child {
  border-top: 0;
}

.info-list dt {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.info-list dd {
  color: var(--ink);
  font-size: .92rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.info-flag {
  background: var(--gold-soft);
  border-radius: 999px;
  color: var(--gold-dark);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-left: .4rem;
  padding: .12rem .5rem;
  text-transform: uppercase;
  vertical-align: 1px;
}

.profile-foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
  margin: 1.6rem 0 0;
  padding-top: 1rem;
}

.profile-foot a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.profile-foot a:hover,
.profile-foot a:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   Member forms
   Reuses the .auth-* field system from the login page so member
   forms and sign-in look and behave the same, including the
   show/hide password toggle.
   ============================================================ */

.form-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}

.form-head-copy {
  flex: 1 1 22rem;
  min-width: 0;
}

.form-head h1 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.form-head-sub {
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  margin: .4rem 0 0;
}

.form-head-cta {
  flex: none;
  white-space: nowrap;
}

/* The form keeps a comfortable reading measure instead of stretching the
   full panel width; the guidance column takes the space beside it. */
.form-layout {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  }
}

.form-col {
  min-width: 0;
}

.auth-summary:not(:empty) {
  background: #fdecec;
  border-left: 3px solid var(--sf-error);
  border-radius: 8px;
  color: #8f2020;
  font-size: .86rem;
  margin-bottom: 1.1rem;
  padding: .7rem .85rem;
}

.auth-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}

.form-aside {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}

.form-aside h2 {
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 800;
  margin: 0 0 .6rem;
}

.form-aside-sub {
  margin-top: 1.2rem !important;
}

.form-aside p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.65;
  margin: 0 0 .7rem;
}

.form-rules {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-rules li {
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.5;
  padding: .28rem 0 .28rem 1.6rem;
  position: relative;
}

.form-rules li::before {
  color: var(--accent-dark);
  content: "\2713";
  font-weight: 800;
  left: .25rem;
  position: absolute;
}

.form-aside-note {
  border-top: 1px solid var(--line);
  margin-bottom: 0 !important;
  margin-top: 1rem !important;
  padding-top: .8rem;
}

.form-aside-note a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.form-aside-note a:hover,
.form-aside-note a:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   Member list pages
   ============================================================ */

.list-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.list-search {
  flex: 1 1 320px;
  max-width: 420px;
  position: relative;
}

.list-search input {
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--ink);
  font-size: .92rem;
  padding: .65rem 2.2rem .65rem 2.6rem;
  width: 100%;
}

.list-search input:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 74, 125, .12);
  outline: none;
}

.list-search input::-webkit-search-cancel-button {
  appearance: none;
}

.list-search-ico {
  color: var(--muted);
  height: 1.05rem;
  left: .9rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
}

.list-search-clear {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: .2rem .4rem;
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
}

.list-search-clear:hover {
  color: var(--ink);
}

.list-count {
  color: var(--muted);
  font-size: .84rem;
  margin: 0;
}

.list-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
}

.list-table {
  border-collapse: collapse;
  min-width: 640px;
  width: 100%;
}

.list-table th {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .8rem 1rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.list-table td {
  border-top: 1px solid var(--sf-grey-100);
  color: var(--ink);
  font-size: .9rem;
  padding: .85rem 1rem;
  vertical-align: middle;
}

.list-table tbody tr:first-child td {
  border-top: 0;
}

.list-table tbody tr:hover td {
  background: var(--sf-grey-50);
}

.list-link {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.list-link:hover,
.list-link:focus-visible {
  text-decoration: underline;
}

.list-col-num {
  text-align: right;
  white-space: nowrap;
}

.list-empty-row {
  color: var(--muted);
  text-align: center;
}

/* Empty state ------------------------------------------------- */
.list-empty {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2.4rem 1.5rem;
  text-align: center;
}

.list-empty-ico {
  align-items: center;
  background: #e8f0fb;
  border-radius: 14px;
  color: var(--sf-blue-700);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  margin-bottom: .9rem;
  width: 52px;
}

.list-empty-ico svg {
  height: 26px;
  width: 26px;
}

.list-empty h2 {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .4rem;
}

.list-empty p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 auto 1.2rem;
  max-width: 44ch;
}

/* Record forms: give the Bootstrap-classed fields the same treatment as the
   .auth-input fields used on sign-in and change password. */
.record-form .form-label {
  color: var(--brand-dark);
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.record-form .form-control,
.record-form .form-select {
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--ink);
  font-size: .94rem;
  padding: .65rem .85rem;
  width: 100%;
}

.record-form .form-select {
  padding-right: 2.25rem;
}

.record-form .form-control:focus,
.record-form .form-select:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 74, 125, .12);
  outline: none;
}

@media (min-width: 700px) {
  .record-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Customer design: public header, hero, homepage sections
   ============================================================ */

.top-utility-bar {
  background: var(--sf-blue-800);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

.top-utility-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  /* Block axis only: this element is also a .container-xl, and a bare
     `padding: .5rem 0` was wiping the container's side gutter. */
  padding-block: .5rem;
}

.rate-ticker {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
}

.rate-ticker-live {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(63, 196, 99, .55);
  display: inline-block;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
  animation: rate-ticker-pulse 2s infinite;
}

@keyframes rate-ticker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 196, 99, .55); }
  70% { box-shadow: 0 0 0 7px rgba(63, 196, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 196, 99, 0); }
}

.rate-ticker-label {
  font-weight: 700;
  white-space: nowrap;
}

.rate-ticker-sep {
  background: rgba(255, 255, 255, .25);
  display: inline-block;
  height: 14px;
  width: 1px;
}

.rate-ticker-pair {
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}

.rate-ticker-pair strong {
  color: #fff;
  margin-left: .25rem;
}

.rate-ticker-more {
  color: rgba(255, 255, 255, .85);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.rate-ticker-more:hover,
.rate-ticker-more:focus-visible {
  color: #fff;
}

.top-utility-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.top-utility-phone {
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.top-utility-phone:hover,
.top-utility-phone:focus-visible {
  color: var(--accent);
}

.btn-sign-in {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: var(--sf-radius-sm);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem 1.05rem;
  text-decoration: none;
}

.btn-sign-in:hover,
.btn-sign-in:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.btn-register-now {
  background: var(--accent-dark);
  border: 1.5px solid var(--accent-dark);
  border-radius: var(--sf-radius-sm);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem 1.05rem;
  text-decoration: none;
}

.btn-register-now:hover,
.btn-register-now:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.site-header-public {
  background: #fff;
  box-shadow: 0 2px 12px rgba(2, 21, 41, .08);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.public-nav {
  padding: .5rem 0;
}

.public-nav-inner {
  align-items: center;
}

.brand-logo-public {
  align-items: center;
  background: #fff;
  display: inline-flex;
  gap: .55rem;
  margin-right: 1rem;
  padding: .1rem 0;
}

.public-nav .navbar-toggler {
  border-color: var(--brand);
}

.public-nav-links {
  align-items: center;
  gap: .1rem;
}

.public-nav-links .nav-link {
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 700;
  padding: .55rem .7rem;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link:focus-visible {
  color: var(--accent);
}

.public-nav-links .nav-link.active {
  color: var(--accent);
  position: relative;
}

.public-nav-links .nav-link.active::after {
  background: var(--accent);
  border-radius: 2px;
  bottom: .15rem;
  content: "";
  height: 2px;
  left: .7rem;
  position: absolute;
  right: .7rem;
}

.public-nav-links .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(5, 47, 85, .14);
  padding: .4rem;
}

.public-nav-links .dropdown-item {
  border-radius: 6px;
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 650;
  padding: .5rem .7rem;
}

.public-nav-links .dropdown-item:hover,
.public-nav-links .dropdown-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Member header: white behind the brand on the left, easing into navy across
   to the right. The stops are tied to the container edge - the logo sits at
   (50% - half the container) so a fixed percentage would drift away from it as
   the viewport grows - and floored with max() so they still clear the logo once
   the container stops growing. The transition finishes before the centred nav
   begins, so its links always sit on solid navy. */
.site-header-member {
  /* Where the white pocket ends: just past the brand lockup. Anchored to the
     container edge (50% minus half the container) so it tracks the logo as the
     viewport grows, with a floor for when the container stops growing. */
  --hdr-fade-start: max(215px, calc(50% - 425px));
  --hdr-fade-span: 230px;

  /* A straight two-stop ramp reads as a hard band, because sRGB darkens fast
     through the middle. These stops follow a smoothstep curve so the fade holds
     white longer, moves through the middle, then settles into navy. */
  background:
    linear-gradient(90deg,
      #fff 0,
      #fff var(--hdr-fade-start),
      #f0f2f4 calc(var(--hdr-fade-start) + var(--hdr-fade-span) * .15),
      #c9cfd5 calc(var(--hdr-fade-start) + var(--hdr-fade-span) * .30),
      #818f9d calc(var(--hdr-fade-start) + var(--hdr-fade-span) * .50),
      #394f65 calc(var(--hdr-fade-start) + var(--hdr-fade-span) * .70),
      #122d47 calc(var(--hdr-fade-start) + var(--hdr-fade-span) * .85),
      var(--brand-navy) calc(var(--hdr-fade-start) + var(--hdr-fade-span)),
      var(--brand-deep) 100%);
  box-shadow: 0 8px 24px rgba(2, 21, 41, .18);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Below 1200px the centred nav starts closer in, so the fade has less room and
   must resolve sooner to stay behind it. */
@media (max-width: 1199.98px) {
  .site-header-member {
    --hdr-fade-start: 205px;
    --hdr-fade-span: 150px;
  }
}

/* Collapsed nav drops the menu over the header, so keep it solid navy. */
@media (max-width: 991.98px) {
  .site-header-member {
    --hdr-fade-start: 200px;
    --hdr-fade-span: 130px;
  }

  .site-header-member .navbar-collapse.show,
  .site-header-member .navbar-collapse.collapsing {
    background: var(--brand-deep);
    border-radius: 0 0 var(--sf-radius-md) var(--sf-radius-md);
    margin-top: .5rem;
    padding: .5rem .75rem;
  }
}

.member-nav-links {
  gap: .35rem;
}

.site-header-member .site-nav .nav-link {
  color: rgba(255, 255, 255, .9);
}

.site-header-member .site-nav .nav-link.active::after {
  background: var(--accent);
}


.btn-view-brochure {
  background: transparent;
  border: 1.5px solid var(--brand);
  border-radius: 6px;
  color: var(--brand-dark);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .6rem 1.4rem;
  text-decoration: none;
}

.btn-view-brochure:hover,
.btn-view-brochure:focus-visible {
  background: var(--brand);
  color: #fff;
}

.home-hero {
  background: var(--sf-blue-800);
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* Our photograph is the same composite as the approved artwork - Opera House
   and skyline left, network map right - but shot at dusk where the design is
   daylight. Graded up rather than replaced; the design's own hero file has not
   been supplied. */
.hero-map {
  background: url("/assets/images/hero-background.jpg") center / cover no-repeat;
  filter: saturate(1.2) contrast(1.02) brightness(1.6);
  inset: 0;
  position: absolute;
}

/* A soft daylight glow over the Opera House in the lower-left corner, so the
   sails read as lit rather than dusk-dark. Clear of the headline and checklist,
   which sit further in and higher up. */
.home-hero .hero-title,
.home-hero .hero-checklist {
  text-shadow: 0 1px 2px rgba(1, 36, 100, .75), 0 0 10px rgba(1, 36, 100, .55);
}

.hero-map::after {
  background: radial-gradient(ellipse 24% 100% at 0% 70%, rgba(255, 255, 255, .45), transparent 78%);
  content: "";
  inset: 0;
  position: absolute;
}

/* The approved home page puts the hero in the blue family rather than the
   near-black navy this used to carry. Still only enough scrim on the left to
   hold the headline, fading out before the map and skyline. */
.hero-overlay {
  background:
    linear-gradient(90deg, #013A8AC4 0%, #0145A6BE 34%, #0250BCA8 62%, #025BCE86 100%);
  /* Cut the scrim away over the Opera House so the photograph shows through
     untinted there, and keep it everywhere else for the headline's sake. */
  -webkit-mask-image: radial-gradient(ellipse 22% 100% at 0% 72%, transparent 0%, transparent 45%, #000 100%);
  mask-image: radial-gradient(ellipse 22% 100% at 0% 72%, transparent 0%, transparent 45%, #000 100%);
  inset: 0;
  position: absolute;
}

/* Padding kept tight so the hero stays close to the background image's
   native 1920x574 aspect - any extra height makes `cover` zoom in and
   crop the sides (losing the right edge of the map). */
.hero-inner {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.6rem, 2.6vw, 2.2rem);
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 34rem;
}

.hero-title {
  color: #fff;
  font-size: clamp(1.5rem, 2.9vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .9rem;
  text-shadow: 0 2px 14px rgba(2, 14, 28, .45);
}

.hero-highlight {
  color: var(--gold-dark);
}
.hero-highlight-lite{
  color: var(--gold);
}

.hero-checkline {
  font-size: small;
  font-weight: 100;
}

.hero-checklist {
  display: grid;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.hero-checklist li {
  color: #fff;
  font-size: .95rem;
  font-weight: 400;
  padding-left: 1.7rem;
  position: relative;
  text-shadow: 0 1px 10px rgba(2, 14, 28, .5);
}

.hero-checklist li::before {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: var(--brand);
  content: "\2713";
  display: inline-flex;
  font-size: .7rem;
  font-weight: 800;
  height: 1.2rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: .05rem;
  width: 1.2rem;
}

.hero-calculator {
  background: #fff;
  border-radius: var(--sf-radius-md);
  box-shadow: 0 24px 55px rgba(2, 12, 24, .35);
  color: var(--ink);
  padding: 1.15rem 1.2rem;
  width: min(100%, 390px);
}

.calc-title {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .75rem;
}

/* The flag artwork is a square 64x64 canvas with transparent padding around
   a flag of its own aspect (Nepal's is even taller than wide), so the box has
   to stay square and use `contain` - forcing a 3:2 box stretches the art. */
.calc-flag {
  display: block;
  flex: none;
  height: 1.15rem;
  object-fit: contain;
  width: 1.15rem;
}

.calc-field {
  margin-bottom: .6rem;
}

.calc-field label {
  color: var(--muted);
  display: block;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: .2rem;
}

.calc-input-wrap {
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.calc-input-wrap input,
.calc-output {
  border: 0;
  color: var(--ink);
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  min-width: 0;
  outline: none;
  padding: .5rem .75rem;
}

.calc-currency {
  align-items: center;
  background: var(--canvas);
  border-left: 1px solid var(--line);
  color: var(--brand-dark);
  display: flex;
  font-size: .85rem;
  font-weight: 800;
  gap: .35rem;
  padding: 0 .8rem;
  white-space: nowrap;
}

.calc-eyebrow {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 .15rem;
  text-transform: uppercase;
}

/* The recipient figure is an output, not an input - the green wash marks it
   as the answer rather than something else to fill in. */
.calc-input-wrap--result {
  background: var(--accent-soft);
  border-color: rgba(10, 159, 73, .35);
}

.calc-input-wrap--result .calc-output {
  background: transparent;
  color: var(--accent-dark);
}

.calc-input-wrap--result .calc-currency {
  background: rgba(10, 159, 73, .1);
  border-left-color: rgba(10, 159, 73, .35);
}

.calc-field .form-select {
  font-size: .85rem;
  padding: .5rem 2.1rem .5rem .7rem;
}

.calc-promo-note {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-dark);
  font-size: .72rem;
  line-height: 1.4;
  margin: 0 0 .6rem;
  padding: .4rem .55rem;
}

.calc-footnote {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
  margin: .55rem 0 0;
  text-align: center;
}

.calc-rate-status {
  background: var(--sf-green-600);
  border-radius: 50%;
  display: inline-block;
  height: .5rem;
  margin: 0 .3rem;
  vertical-align: middle;
  width: .5rem;
}

.hero-calculator .sf-button {
  min-height: 42px;
  padding: .55rem 1.2rem;
}

}

.txcalc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow);
  overflow: hidden;
}

.txcalc-head {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand) 100%);
  padding: 1.1rem 1.35rem;
}

.txcalc-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
}

.txcalc-sub {
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
  line-height: 1.45;
  margin: .2rem 0 0;
}

.txcalc-body {
  padding: 1.35rem;
}

.txcalc-field {
  margin-bottom: .9rem;
}

.txcalc-field label {
  color: var(--ink);
  display: block;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .3rem;
}

.txcalc-field .form-select,
.txcalc-field input {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: .92rem;
  padding: .55rem .75rem;
  width: 100%;
}

/* Payout labels carry the rate, so they run long. Keep Bootstrap's room for
   the chevron or the text slides underneath it. */
.txcalc-field .form-select {
  padding-right: 2.25rem;
}

.txcalc-field .form-select:disabled {
  background: var(--canvas);
  color: var(--muted);
  cursor: not-allowed;
}

.txcalc-hint {
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.4;
  margin: 0 0 .3rem;
}

.txcalc-corridor-note {
  background: var(--canvas);
  border-radius: 8px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
  margin: 0 0 .9rem;
  padding: .5rem .65rem;
}

.txcalc-promo-warning {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-dark);
  font-size: .78rem;
  line-height: 1.45;
  margin: 0 0 .9rem;
  padding: .5rem .65rem;
}

.txcalc-summary {
  border-top: 1px solid var(--line);
  font-size: .88rem;
  margin: 1rem 0;
  padding-top: .8rem;
}

.txcalc-summary div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: .4rem;
}

.txcalc-summary dt {
  color: var(--muted);
}

.txcalc-summary dd {
  color: var(--brand-dark);
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.txcalc-total {
  border-top: 1px dashed var(--line);
  margin-top: .6rem;
  padding-top: .6rem;
}

.txcalc-total dt {
  color: var(--ink);
  font-weight: 700;
}

.txcalc-total dd {
  color: var(--accent-dark);
  font-size: 1.15rem;
  font-weight: 800;
}

.txcalc-updated,
.txcalc-foot {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
  margin: .5rem 0 0;
  text-align: center;
}

/* Trust strip, How It Works and the app promotion */
.trust-strip-section {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
}

/* How It Works, now the full width of the shell rather than half of a split. */
.home-steps-section {
  background: #fff;
  padding: 2.2rem 0 5.6rem;
}

.home-steps-section .how-it-works {
  text-align: center;
}

/* How It Works ------------------------------------------------ */
.how-it-works h2 {
  color: var(--brand-dark);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 800;
  margin: 0 0 .4rem;
}

.how-it-works .section-sub {
  color: #48658b;
  font-size: clamp(.92rem, 1.3vw, 1rem);
  margin: 0 0 1.8rem;
}

/* Four equal columns, so the icon circles, number badges, headings and
   captions all share one set of baselines. The dotted connector is drawn from
   each step to the next at the circle's centre line, and only between steps,
   so there is nothing to hand-position against the content. */
.workflow-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 auto;
  max-width: 54rem;
  padding: 0;
}

.workflow-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  text-align: center;
}

.workflow-step:not(:last-child)::after {
  border-top: 3px dotted #d4e0f2;
  content: "";
  left: calc(50% + 50px);
  position: absolute;
  top: 39px;
  width: calc(100% - 76px);
}

.workflow-ico-wrap {
  align-items: center;
  background: #eef4ff;
  border-radius: 50%;
  display: grid;
  height: 80px;
  place-items: center;
  position: relative;
  width: 80px;
  z-index: 1;
}

.workflow-ico {
  display: block;
  height: 54px;
  width: 54px;
}

.workflow-step-num {
  align-items: center;
  background: #157234;
  border-radius: 50%;
  color: #fff;
  display: grid;
  font-size: .9rem;
  font-weight: 700;
  height: 24px;
  margin-top: .65rem;
  place-items: center;
  width: 24px;
}

.workflow-step h3 {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: .65rem 0 .3rem;
}

.workflow-step p {
  color: #48658b;
  font-size: .9rem;
  line-height: 1.45;
  margin: 0;
}

/* Two by two on narrow screens, with the connectors dropped: the approved
   design says to remove them rather than let them crowd the steps. */
@media (max-width: 767.98px) {
  .workflow-row {
    gap: 2rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-step:not(:last-child)::after {
    display: none;
  }

  .workflow-step h3 {
    font-size: 1rem;
  }

  .workflow-step p {
    font-size: .86rem;
  }
}

@media (max-width: 359.98px) {
  .workflow-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Mobile app promotion
   ============================================================
   Phone, copy with store badges, and the feature list - three
   columns on desktop, stacked on mobile, as the specification
   sets out. */
.app-promo-section {
  background: #fff;
  padding: 0 .75rem 2.8rem;
}

.app-promo {
  align-items: center;
  background: #eef5fe;
  border-radius: 14px;
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.6rem;
}

@media (min-width: 900px) {
  .app-promo {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 15rem);
    padding: 0 2.4rem;
  }

  /* The phone lifts above the panel and sits on its lower edge, as the
     approved design has it, rather than spilling out of both ends. */
  .app-promo-art {
    margin-bottom: -.4rem;
    margin-top: -2.8rem;
  }
}

.app-promo-art {
  text-align: center;
}

.app-promo-art img {
  height: auto;
  max-width: min(100%, 260px);
}

.app-promo-copy h2 {
  color: var(--brand-dark);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800;
  margin: 0 0 .5rem;
}

.app-promo-copy p {
  color: #31404c;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.app-promo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Drawn rather than the official store artwork: the apps are not published,
   so these are placeholders and deliberately not links. Swap them for the
   vendors' own badges when the listings exist. */
.store-badge {
  align-items: center;
  background: #0b1220;
  border: 1px solid #2a3340;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  gap: .55rem;
  padding: .5rem .9rem;
}

.store-badge svg {
  fill: currentColor;
  flex: none;
  height: 22px;
  width: 22px;
}

.store-badge-copy {
  display: grid;
  line-height: 1.15;
}

.store-badge-copy small {
  font-size: .62rem;
  letter-spacing: .02em;
  opacity: .82;
}

.store-badge-copy strong {
  font-size: .95rem;
  font-weight: 700;
}

.app-promo-note {
  color: var(--muted);
  font-size: .8rem;
  margin: .6rem 0 0 !important;
}

.app-promo-features {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .app-promo-features {
    border-left: 1px solid #d6e6fa;
    padding-left: 2rem;
  }
}

.app-promo-features li {
  align-items: center;
  color: var(--brand-dark);
  display: flex;
  font-weight: 650;
  gap: .7rem;
}

.app-promo-ico {
  color: var(--sf-green-700);
  flex: none;
  line-height: 0;
}

.app-feature-ico {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 26px;
}

/* Blue family, matching the approved home page hero. The member footer keeps
   the navy - these designs cover the public site only. */
.site-footer-public {
  background: linear-gradient(90deg, #0246AA 0%, var(--sf-blue-800) 55%, #0140A2 100%);
  color: #fff;
  margin-top: 0;
  padding: 3rem 0 0;
}

.footer-public-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 2.2rem;
}


.footer-public-grid h3 {
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.footer-public-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-public-grid li {
  margin-bottom: .55rem;
}

.footer-public-grid a {
  color: rgba(255, 255, 255, .78);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.footer-public-grid a:hover {
  color: var(--accent);
}

.footer-about-copy {
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .002em;
  line-height: 1.7;
  margin: .9rem 0 1.1rem;
  max-width: 34ch;
}

.footer-brand-col .footer-contact-list {
  margin-bottom: 1rem;
}

.footer-contact-list li {
  align-items: center;
  color: rgba(255, 255, 255, .93);
  display: flex;
  font-size: .82rem;
  gap: .6rem;
}

.footer-contact-ico {
  color: var(--sf-green-500);
  flex: 0 0 auto;
  height: 1.05rem;
  width: 1.05rem;
}

.footer-contact-list a {
  color: rgba(255, 255, 255, .96);
  text-decoration: none;
}

.footer-contact-list a:hover,
.footer-contact-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.footer-social-ico {
  align-items: center;
  background: var(--sm, #24425f);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
  width: 34px;
}

.footer-social-ico svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

/* Optical sizing - the brand glyphs occupy very different amounts of their
   24x24 box, so a single size makes some read heavier than others. */
.sm-facebook svg { height: 17px; width: 17px; }
.sm-linkedin svg { height: 17px; width: 17px; }
.sm-youtube svg  { height: 19px; width: 19px; }

.sm-facebook { --sm: #1877F2; }
.sm-twitter  { --sm: #000000; }
.sm-linkedin { --sm: #0A66C2; }
.sm-whatsapp { --sm: #25D366; }
.sm-youtube  { --sm: #FF0000; }
.sm-instagram{ --sm: #C13584; }

a.footer-social-ico:hover,
a.footer-social-ico:focus-visible {
  opacity: .85;
  transform: translateY(-2px);
}

/* align-items:flex-start stops the column flex container stretching each
   badge to the full width of the footer column. */





a.app-badge:hover,
a.app-badge:focus-visible {
  border-color: rgba(255, 255, 255, .45);
}

.footer-copyright-bar {
  background: #013C93;
  padding: .85rem 0;
}

.footer-copyright-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

.footer-copyright-bar p {
  color: rgba(255, 255, 255, .7);
  font-size: .76rem;
  font-weight: 500;
  margin: 0;
}

@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr minmax(320px, 400px);
  }

  .hero-calculator {
    justify-self: end;
  }

  .country-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .engage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (min-width: 992px) {
  .country-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }

  .home-split > .how-it-works {
    padding-right: 2.4rem;
  }

  .home-split > .send-worldwide {
    border-left: 1px solid var(--line);
    padding-left: 2.4rem;
  }
}

.trust-strip {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-item {
  align-items: center;
  display: flex;
  gap: .7rem;
  justify-content: center;
  padding: .55rem 1rem;
}

.trust-ico {
  flex: 0 0 auto;
  height: 2.6rem;
  width: 2.6rem;
}

.trust-item strong {
  color: var(--brand-dark);
  display: block;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
}

.trust-item small {
  color: var(--muted);
  display: block;
  font-size: .77rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .trust-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .trust-item + .trust-item {
    border-left: 1px solid var(--line);
  }

  .feature-item + .feature-item {
    border-left: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------------------
   Registration - five steps, each its own page, sharing the record-form shell
   used by the beneficiary screens. Only the pieces the wizard adds live here.
   --------------------------------------------------------------------------- */

.register-panel .reset-steps {
  margin-bottom: 2rem;
}

/* Five labels rather than four, so they need to sit tighter than the reset
   tracker they borrow their look from. */
.register-track .reset-step-label {
  font-size: .7rem;
}

/* A field with a button beside it: the availability and address checks, which
   post on their own before the step can be completed. */
.inline-check {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.inline-check .form-control {
  flex: 1 1 16rem;
}

.inline-check .sf-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.field-note {
  color: var(--muted);
  display: block;
  font-size: .78rem;
  margin-top: .3rem;
}

.field-note--good {
  color: var(--sf-success);
  font-weight: 600;
}

.field-note--bad {
  color: var(--sf-error);
  font-weight: 600;
}

.form-subhead {
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: .4rem 0 0;
  text-transform: uppercase;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 1rem;
}

.choice {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: .88rem;
  gap: .5rem;
}

.checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  justify-content: center;
}

.captcha-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.captcha-image {
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm);
  display: block;
}

/* The running identity-points total. It is advisory - an application under a
   hundred points still submits, it just cannot be activated until the
   documents arrive. */
.points-meter {
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--sf-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  padding: 1rem 1.2rem;
}

.points-meter--short {
  background: var(--gold-soft);
  border-left-color: var(--gold-dark);
}

.points-meter--met {
  background: #eaf7ef;
  border-left-color: var(--sf-success);
}

.points-meter-figure {
  align-items: baseline;
  display: flex;
  gap: .4rem;
}

.points-meter-value {
  color: var(--ink);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

.points-meter-of {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.points-meter-note {
  color: var(--muted);
  flex: 1 1 18rem;
  font-size: .84rem;
  line-height: 1.5;
  margin: 0;
}

.empty-note {
  color: var(--muted);
  font-size: .85rem;
  margin: .75rem 0 0;
}

.customer-number {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  font-size: .9rem;
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  text-align: center;
}

/* ==========================================================================
   ABOUT US - rebuilt from the "Lighter Version 02" mock-up, Aug 2026.

   The supplied AboutUs.css is not used. It declared its own :root whose values
   were near misses against ours (#06294c vs our navy, #d99a08 vs our gold),
   which would have put two slightly different Sydney Forex blues on the same
   site - the opposite of the brief's "match the homepage exactly". Everything
   below draws on the existing palette instead, and the desktop-first media
   queries it shipped with are rewritten mobile-first to match this file.
   ========================================================================== */

/* Vertical padding is deliberately modest: consecutive bands each contribute
   their own, so whatever is set here lands roughly doubled in the gap between
   any two sections. */
.about-band {
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.2rem, 3vw, 2rem);
}


.about-band--last {
  padding-top: 0;
}

/* Section headings carry the accent as flanking rules rather than as heading
   colour, so the text itself stays navy and legible at every size. */
.about-title {
  align-items: center;
  color: var(--brand-dark);
  display: flex;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  gap: .9rem;
  justify-content: center;
  margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
  text-align: center;
}

.about-title::before,
.about-title::after {
  background: currentColor;
  content: "";
  flex: 0 1 4.5rem;
  height: 2px;
  opacity: .55;
}

/* Gold rules terminated by small diamonds at both ends. Painted as background
   layers rather than extra elements, so the rule still flexes with the heading;
   a box-shadow cannot do it because the rule is only 2px tall. */
.about-title--gold::before,
.about-title--gold::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23e8a512'/%3E%3C/svg%3E") left center / 8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23e8a512'/%3E%3C/svg%3E") right center / 8px 8px no-repeat,
    linear-gradient(var(--sf-gold-600), var(--sf-gold-600)) center center / calc(100% - 24px) 2px no-repeat;
  flex: 0 1 5.5rem;
  height: 8px;
  opacity: 1;
}

.about-title--blue::before,
.about-title--blue::after {
  background: var(--sf-blue-600);
  opacity: 1;
}

.about-title--green {
  color: var(--sf-green-500);
}

/* Centred but without the flanking rules - used where two headings sit side by
   side over their own columns and the rules would read as a divider between. */
.about-title--plain {
  color: var(--sf-blue-700);
}

.about-title--plain::before,
.about-title--plain::after {
  content: none;
}

/* Left-aligned variant for prose sections, where centred rules would read as
   decoration on a paragraph rather than a section divider. */
.about-title--left {
  justify-content: flex-start;
  text-align: left;
}

.about-title--left::before,
.about-title--left::after {
  content: none;
}

.about-subtitle {
  color: var(--sf-blue-700);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.4rem 0 .5rem;
}

.about-readable {
  margin: 0 auto;
  max-width: 62rem;
}

/* HERO */

/* The photograph bleeds to the panel's top, right and bottom edges rather than
   sitting inset, so the band has no padding of its own and the copy carries it. */
.about-hero {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.about-hero-copy {
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2rem);
}

.about-eyebrow {
  align-items: center;
  color: var(--sf-gold-800);
  display: flex;
  flex-wrap: wrap;
  font-size: .72rem;
  font-weight: 700;
  gap: .4rem;
  letter-spacing: .09em;
  margin-bottom: .55rem;
  text-transform: uppercase;
}

.about-eyebrow-ico {
  display: inline-flex;
}

.about-eyebrow-ico svg {
  height: .95rem;
  width: .95rem;
}

.about-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.about-eyebrow a:hover,
.about-eyebrow a:focus-visible {
  text-decoration: underline;
}

.about-hero h1 {
  color: var(--brand-dark);
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .9rem;
}

.about-hero p {
  color: #3d4c5a;
  font-size: .88rem;
  line-height: 1.7;
  margin: 0 0 .75rem;
}

.about-hero p:last-child {
  margin-bottom: 0;
}

.about-hero-figure {
  display: block;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  width: 100%;
}

/* The file carries its own fade into white, but object-fit: cover crops that
   edge away at most column widths, so the feather is re-applied here where it
   is guaranteed. Only from the breakpoint where the image sits beside the copy. */
@media (min-width: 992px) {
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .about-hero-figure {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
      mask-image: linear-gradient(to right, transparent 0, #000 26%);
    }
  }
}

/* WHY CHOOSE - four cards */

.about-cards {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fixed tracks - circle, heading, rule, text - so the circles, headings, gold
   rules and descriptions start at the same height across the row whatever the
   text does. Subgrid shares the tracks between cards where it is supported;
   the fixed heights carry it where it is not. */
.about-card {
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-lg);
  box-shadow: 0 3px 12px rgba(9, 28, 80, .04);
  display: grid;
  grid-template-rows: 96px minmax(3.9rem, auto) 3px 1fr;
  justify-items: center;
  padding: 1.75rem 1rem 2rem;
  row-gap: 1.25rem;
  text-align: center;
}

@supports (grid-template-rows: subgrid) {
  .about-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

.about-card-ico {
  display: block;
  height: 96px;
  width: 96px;
}

/* Each heading is two lines of its own, so the one-line "Personal Service"
   and the longer "Compliance Without Compromise" occupy the same height. */
.about-card h3 {
  color: #091c50;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.about-card h3 span {
  display: block;
}

/* Short gold rule separating each card's title from its description. */
.about-card-rule {
  background: var(--sf-gold-600);
  display: block;
  height: 3px;
  width: 44px;
}

/* Heading and description share the mock-up's navy. Each line of the
   description is its own span, breaking where the mock-up does; balance keeps
   a line that has to wrap on a narrow card from leaving one word alone. */
.about-card p {
  color: #091c50;
  font-size: .97rem;
  line-height: 1.55;
  margin: 0;
}

.about-card p span {
  display: block;
  text-wrap: balance;
}

/* HISTORY */

/* A rounded card sharing the band padding with the cards above it, so its left
   and right edges line up with them rather than bleeding to the panel. */
.about-history {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-lg);
  padding: clamp(1.3rem, 3vw, 2rem);
}

/* JOURNEY IN NUMBERS - navy card */

/* A rounded card inset within the band, not a full-bleed stripe. */
.about-stats {
  background: var(--brand-navy);
  border-radius: var(--sf-radius-lg);
  color: #fff;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.6rem);
}

.about-stats .about-title {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}

.about-stats-grid {
  display: grid;
  gap: 1.2rem 0;
  grid-template-columns: minmax(0, 1fr);
}

.about-stat {
  padding: 0 1rem;
  text-align: center;
}

/* Icon sits beside the figure rather than above it, with the caption spanning
   both beneath - the arrangement in the mock-up. */
.about-stat-head {
  align-items: center;
  display: flex;
  gap: .8rem;
  justify-content: center;
}

.about-stat-ico {
  color: var(--sf-green-500);
  display: inline-flex;
  flex: none;
}

/* Sized large because these glyphs fill only part of their 24x24 viewBox. */
.about-stat-ico svg {
  height: 3.6rem;
  width: 3.6rem;
}

.about-stat-figure {
  text-align: left;
}

.about-stat strong {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
}

/* "AUD" rides small against the large figure it qualifies. */
.about-stat-unit {
  font-size: .55em;
  font-weight: 700;
  letter-spacing: .02em;
}

.about-stat-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: .15rem;
}

.about-stat small {
  color: rgba(255, 255, 255, .88);
  display: block;
  font-size: .8rem;
  line-height: 1.45;
  margin-top: .55rem;
}

/* WHAT WE OFFER - six icons */

.about-offer-grid {
  display: grid;
  gap: 1.4rem 0;
  grid-template-columns: minmax(0, 1fr);
}

.about-offer {
  padding: .2rem 1rem;
  text-align: center;
}

.about-offer-ico {
  color: var(--sf-blue-600);
  display: block;
  margin-bottom: .8rem;
}

/* The glyphs occupy roughly 70% of their 24x24 viewBox, so the box is set
   larger than the intended optical size to land near the mock-up's ~44px. */
.about-offer-ico svg {
  height: 3.4rem;
  width: 3.4rem;
}

.about-offer h3 {
  color: var(--brand-dark);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .4rem;
}

.about-offer p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  margin: 0;
}

/* MISSION & VALUES / WHY SYDNEY FOREX */

.about-duo {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}

.about-duo-col p {
  color: #3d4c5a;
  font-size: .9rem;
  line-height: 1.7;
  margin: 0 0 .8rem;
}

/* Soft card holding the mission statement and the values row. */
.about-mission {
  background: var(--sf-grey-100);
  border-radius: var(--sf-radius-lg);
  padding: clamp(1.2rem, 2.6vw, 1.75rem);
}

.about-mission-head {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.about-mission-ico {
  color: var(--sf-blue-700);
  display: inline-flex;
}

.about-mission-ico svg {
  height: 3rem;
  width: 3rem;
}

.about-mission-copy h3 {
  color: var(--sf-blue-700);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .4rem;
}

.about-mission-copy p:last-child {
  margin-bottom: 0;
}


/* "Our Values" sits centred between two rules, as in the mock-up. */
.about-values-head {
  align-items: center;
  color: var(--sf-blue-700);
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: .9rem;
  justify-content: center;
  margin: 1.5rem 0 1.1rem;
}

.about-values-head::before,
.about-values-head::after {
  background: var(--sf-grey-300);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.about-values {
  display: grid;
  gap: .5rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-values li {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .4rem .3rem;
  text-align: center;
}

.about-value-ico {
  color: var(--sf-blue-700);
  display: inline-flex;
}

.about-value-ico svg {
  height: 2.1rem;
  width: 2.1rem;
}

.about-values strong {
  color: var(--sf-blue-700);
  font-size: .85rem;
  font-weight: 700;
}

/* WHY SYDNEY FOREX - ticked list */

.about-why-list {
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.about-why-list li {
  align-items: center;
  color: #3d4c5a;
  display: grid;
  font-size: .9rem;
  gap: .7rem;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.5;
}

.about-tick {
  color: var(--sf-blue-600);
  display: inline-flex;
}

.about-tick svg {
  height: 1.35rem;
  width: 1.35rem;
}

.about-why-note {
  margin-bottom: 0;
}

/* COMMUNITY */

.about-community {
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.about-community-copy {
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
}

.about-community-copy h2 {
  color: var(--sf-blue-700);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 .7rem;
}

.about-community-copy p {
  color: #3d4c5a;
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
}

/* The photograph is feathered into the copy rather than butting against it on a
   hard edge, as in the mock-up. Masked from the left so the blend follows the
   image itself; the fallback keeps a hard edge where mask-image is unsupported. */
.about-community-figure {
  display: block;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  width: 100%;
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .about-community-figure {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
    mask-image: linear-gradient(to right, transparent 0, #000 24%);
  }
}

/* TRUST & COMPLIANCE */

.about-compliance {
  align-items: center;
  background: #f4faf6;
  border: 1px solid var(--sf-green-100);
  border-radius: var(--sf-radius-md);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: clamp(1.2rem, 3vw, 1.75rem);
  text-align: center;
}

.about-compliance-ico {
  color: var(--sf-green-700);
  display: inline-flex;
}

.about-compliance-ico svg {
  height: 2.6rem;
  width: 2.6rem;
}

.about-compliance-copy h2 {
  color: var(--sf-green-700);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}

.about-compliance-copy p {
  color: #3d4c5a;
  font-size: .87rem;
  line-height: 1.65;
  margin: 0;
}

.about-compliance-cta {
  flex-direction: column;
  gap: .1rem;
  line-height: 1.2;
  width: 100%;
}

.about-compliance-cta span {
  font-size: .78rem;
  font-weight: 600;
}

@media (min-width: 620px) {
  .about-cards,
  .about-stats-grid,
  .about-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-stat {
    border-right: 1px solid rgba(255, 255, 255, .22);
  }

  .about-stat:nth-child(2n) {
    border-right: 0;
  }

  .about-compliance-cta {
    width: auto;
  }

  /* Five across in one row, separated by hairlines as in the mock-up. The
     dividers are only correct once the values form a single row. */
  .about-values {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .about-values li + li {
    border-left: 1px solid var(--sf-grey-300);
  }
}

@media (min-width: 768px) {
  .about-offer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-offer:not(:nth-child(3n)) {
    border-right: 1px solid var(--line);
  }

  .about-community {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .about-compliance {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .about-hero-figure {
    min-height: 300px;
  }

  .about-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-stat:nth-child(2n) {
    border-right: 1px solid rgba(255, 255, 255, .2);
  }

  .about-stat:last-child {
    border-right: 0;
  }

  .about-offer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .about-offer:not(:nth-child(3n)) {
    border-right: 0;
  }

  .about-offer:not(:last-child) {
    border-right: 1px solid var(--line);
  }

  .about-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Rule between the two columns, as in the mock-up. */
  .about-why {
    border-left: 1px solid var(--sf-grey-300);
    padding-left: clamp(1.4rem, 3vw, 2.5rem);
  }
}


/* ==========================================================================
   PENDING CONTENT PAGES

   Pages that exist in the approved navigation but whose copy has not been
   supplied. Deliberately plain - it should read as unfinished, not as a
   designed destination.
   ========================================================================== */

.content-pending {
  margin: 0 auto;
  max-width: 34rem;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
  text-align: center;
}

.content-pending-ico {
  color: var(--sf-blue-600);
  display: inline-flex;
  margin-bottom: .9rem;
}

.content-pending-ico svg {
  height: 2.75rem;
  width: 2.75rem;
}

.content-pending h2 {
  color: var(--brand-dark);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 .7rem;
}

.content-pending p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 0 .8rem;
}

.content-pending-help {
  margin-bottom: 1.4rem;
}

/* ==========================================================================
   PUBLIC FOOTER - approved structure, Sep 2026

   Five columns: company, quick links, services/legal, contact and support, and
   download app; then the copyright strip. The company block carries the
   registration details and Follow Us, which the earlier version had in a
   separate full-width band and inside the contact column.
   ========================================================================== */

/* Company / compliance detail under the description. Deliberately separated
   from the copy above it so the two read as different information. */
.footer-company {
  margin-top: 1.1rem;
}

.footer-company p {
  color: rgba(255, 255, 255, .84);
  font-size: .78rem;
  line-height: 1.5;
  margin: 0 0 .15rem;
}

.footer-company strong {
  color: #fff;
}

.footer-company span {
  opacity: .5;
  padding: 0 .2rem;
}

.footer-brand-col .footer-social-group {
  margin-top: 1.2rem;
}

/* Download App column ------------------------------------------ */
.footer-app-badges {
  display: grid;
  gap: .55rem;
  justify-items: start;
}

.footer-app-col .store-badge {
  background: #0b1220;
  border-color: rgba(255, 255, 255, .28);
}

.footer-chat-group {
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-top: 1.1rem;
  padding-top: 1rem;
}

.footer-chat {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  gap: .55rem;
  text-decoration: none;
}

.footer-chat:hover,
.footer-chat:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-brand-rule {
  background: var(--sf-gold-600);
  display: block;
  height: 2px;
  margin: 1rem 0 0;
  width: 2.5rem;
}

.footer-col h3 {
  color: var(--sf-gold-600);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}

/* Short gold underscore beneath each column heading. */
.footer-col h3::after {
  background: var(--sf-gold-600);
  content: "";
  display: block;
  height: 2px;
  margin-top: .5rem;
  width: 2.2rem;
}

.footer-link-list {
  display: grid;
  gap: .45rem;
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}

.footer-link-list a {
  color: rgba(255, 255, 255, .93);
  display: inline-flex;
  font-size: .82rem;
  gap: .5rem;
  line-height: 1.45;
  text-decoration: none;
}

/* Gold chevron before each link, drawn rather than added to the markup. */
.footer-link-list a::before {
  color: var(--sf-gold-600);
  content: "\203A";
  font-weight: 700;
}

.footer-link-list a:hover,
.footer-link-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-contact-list {
  display: grid;
  gap: .6rem;
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}

/* Multi-line entries (opening hours) need the icon at the top, not centred. */
.footer-support-col .footer-contact-list li {
  align-items: flex-start;
}

.footer-support-col .footer-contact-ico {
  color: var(--sf-gold-600);
  flex: none;
  height: 1.1rem;
  margin-top: .1rem;
  width: 1.1rem;
}

.footer-social-group h4 {
  color: var(--sf-gold-600);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  margin: 0 0 .6rem;
  text-transform: uppercase;
}

/* Outlined discs in the footer, rather than the solid brand fills used on the
   Contact page, so the row stays quiet against the blue. */
.footer-social-group .footer-social-ico {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.footer-social-group .footer-social-ico:hover {
  background: var(--sm, #24425f);
  border-color: transparent;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, .93);
  font-size: .8rem;
  text-decoration: none;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-assurance {
  align-items: center;
  color: var(--sf-gold-600);
  display: flex;
  font-size: .82rem;
  font-weight: 600;
  gap: .45rem;
  margin: 0;
}

.footer-assurance-ico {
  display: inline-flex;
}

.footer-assurance-ico svg {
  height: 1.05rem;
  width: 1.05rem;
}

@media (min-width: 768px) {
  .footer-public-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  /* Five columns since Download App joined them. The company block is widest;
     Quick Links and Services / Legal stay deliberately tight, which is what
     keeps the row from reading as stretched. */
  .footer-public-grid {
    gap: 1.6rem;
    grid-template-columns:
      minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, .95fr);
  }
}

/* ==========================================================================
   PROCEDURE - rebuilt from the approved Procedure Page Blueprint, Aug 2026.

   Colour discipline is from that document and is deliberate: navy, white and
   gold carry the page; green appears only for accepted/available information
   and red only for restrictions. Do not spread either around for decoration.

   The supplied procedure.css is not used - it declared its own near-miss
   palette (#062a4d against our navy, #e9a400 against our gold), so everything
   below resolves to the site tokens instead.
   ========================================================================== */

/* The public band brightens towards its right-hand end. Procedure carries
   faint line art there instead, so it holds an even ground across the width -
   now in the chrome's blue rather than the navy it was drawn in, so the page
   matches the header and footer like every other public page. */
.procedure-panel .page-panel-head {
  background: linear-gradient(90deg, var(--sf-blue-900) 0%, var(--sf-blue-800) 100%);
  overflow: hidden;
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
  position: relative;
}

.procedure-panel .page-panel-head::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2'%3E%3Ccircle cx='96' cy='95' r='62'/%3E%3Cellipse cx='96' cy='95' rx='26' ry='62'/%3E%3Cpath d='M34 95h124M48 60h96M48 130h96'/%3E%3Cpath d='M186 148h104M196 148V96M216 148V96M236 148V96M256 148V96M276 148V96'/%3E%3Cpath d='M182 96h112l-56-34z'/%3E%3Cpath d='M180 160h116'/%3E%3C/svg%3E") right center / contain no-repeat;
  bottom: 0;
  content: "";
  pointer-events: none;
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  top: 0;
  width: min(300px, 32%);
}

.procedure-panel .page-panel-head h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

/* The default 52ch measure wrapped this sentence and left "Forex." alone on a
   second line. It is one line at desktop widths and wraps normally below. */
.procedure-panel .page-panel-subtitle {
  max-width: none;
}

/* The notice rides up over the band's lower edge, as in the design. */
.page-panel-body.procedure-page {
  padding-top: 0;
}

.procedure-page > .proc-important {
  margin-top: clamp(-2.6rem, -4vw, -1.6rem);
  position: relative;
  z-index: 1;
}

.page-panel-subtitle {
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .5rem;
  max-width: 52ch;
}

/* Qualified with .page-panel-body so it outranks the components' own
   `margin: 0` resets, which are declared later at equal specificity and were
   otherwise cancelling the gap between sections. */
.page-panel-body.procedure-page > * + * {
  margin-top: clamp(.9rem, 2.2vw, 1.4rem);
}

/* IMPORTANT REGISTRATION NOTICE */

.proc-important {
  align-items: flex-start;
  background: #f4faf6;
  border: 1px solid var(--sf-green-100);
  border-radius: var(--sf-radius-md);
  display: flex;
  gap: .9rem;
  padding: 1rem 1.15rem;
}

.proc-important-ico {
  color: var(--sf-green-600);
  display: inline-flex;
  flex: none;
}

.proc-important-ico svg {
  height: 1.9rem;
  width: 1.9rem;
}

.proc-important p {
  color: #3d4c5a;
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
}

.proc-important strong {
  color: var(--brand-dark);
}

/* FOUR-STEP JOURNEY */

.proc-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.proc-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 4px 18px rgba(6, 42, 77, .06);
  padding: 1.4rem 1.1rem 1.1rem;
  position: relative;
}

/* Step badges stay green while the verification accents inside the artwork are
   gold - the split the blueprint asks for. */
.proc-step-num {
  align-items: center;
  background: var(--sf-green-700);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 700;
  height: 2.1rem;
  justify-content: center;
  left: 1.3rem;
  position: absolute;
  top: -1.05rem;
  width: 2.1rem;
}

.proc-step-ico {
  color: var(--sf-navy-800);
  display: block;
  margin-bottom: .7rem;
}

.proc-step-ico svg {
  height: 4.4rem;
  width: 4.4rem;
}

/* Chevron between the cards, as in the mock-up. Drawn on the card rather than
   added to the markup, and only while the steps sit side by side. */
.proc-step::after {
  align-items: center;
  color: var(--sf-navy-800);
  content: "\203A";
  display: none;
  font-size: 2.4rem;
  font-weight: 700;
  height: 1.6rem;
  justify-content: center;
  position: absolute;
  right: -.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  z-index: 1;
}

.proc-step h2 {
  color: var(--brand-dark);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}

.proc-step p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
  margin: 0;
}

/* SECTION TITLE */

.proc-title {
  color: var(--brand-dark);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  margin: 0;
}

.proc-title::after {
  background: var(--sf-gold-600);
  content: "";
  display: block;
  height: 2px;
  margin-top: .55rem;
  width: 3rem;
}

/* CARDS */

.proc-info-grid,
.proc-lower-grid,
.proc-notices {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.proc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 4px 18px rgba(6, 42, 77, .05);
  padding: 1.15rem;
}

.proc-card-head {
  align-items: center;
  display: flex;
  gap: .7rem;
  margin-bottom: .9rem;
}

.proc-card-ico {
  align-items: center;
  background: #eaf6ef;
  border-radius: 50%;
  color: var(--sf-green-700);
  display: inline-flex;
  flex: none;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.proc-card-ico svg {
  height: 1.3rem;
  width: 1.3rem;
}

.proc-card-head h3 {
  color: var(--brand-dark);
  font-size: .98rem;
  font-weight: 700;
  margin: 0;
}

.proc-card-head small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.proc-card-title {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .9rem;
}

.proc-card-title::after {
  background: var(--sf-gold-600);
  content: "";
  display: block;
  height: 2px;
  margin-top: .5rem;
  width: 2.4rem;
}

/* Green ticks - "accepted/required information" is positive content. */
.proc-ticks {
  display: grid;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.proc-ticks li {
  color: #3d4c5a;
  font-size: .85rem;
  line-height: 1.5;
  padding-left: 1.4rem;
  position: relative;
}

.proc-ticks li::before {
  color: var(--sf-green-600);
  content: "\2713";
  font-weight: 800;
  left: 0;
  position: absolute;
}

.proc-note {
  align-items: flex-start;
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  color: var(--muted);
  display: flex;
  font-size: .83rem;
  gap: .6rem;
  line-height: 1.6;
  margin: 0;
  padding: .8rem 1rem;
}

.proc-note-ico {
  color: var(--sf-blue-600);
  display: inline-flex;
  flex: none;
}

.proc-note-ico svg {
  height: 1.15rem;
  width: 1.15rem;
}

/* PAYOUT OPTIONS */

.proc-option {
  display: flex;
  gap: .8rem;
  padding: .6rem 0;
}

.proc-option-ico {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

.proc-option-ico svg {
  height: 1.4rem;
  width: 1.4rem;
}

.proc-option-ico--gold {
  background: var(--gold-soft);
  color: var(--sf-gold-800);
}

.proc-option-ico--green {
  background: #eaf6ef;
  color: var(--sf-green-700);
}

.proc-option h3 {
  color: var(--brand-dark);
  font-size: .92rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.proc-option p {
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.55;
  margin: 0;
}

/* ACCEPTED / NOT ACCEPTED PANELS */

.proc-status {
  border: 1px solid transparent;
  border-radius: var(--sf-radius-sm);
  display: flex;
  gap: .7rem;
  margin-bottom: .8rem;
  padding: .85rem .95rem;
}

.proc-status:last-child {
  margin-bottom: 0;
}

.proc-status--yes {
  background: #f4faf6;
  border-color: var(--sf-green-100);
  color: var(--sf-green-700);
}

.proc-status--no {
  background: #fdf4f4;
  border-color: #f0d5d5;
  color: var(--sf-error);
}

.proc-status-ico {
  display: inline-flex;
  flex: none;
}

.proc-status-ico svg {
  height: 1.5rem;
  width: 1.5rem;
}

/* No text-transform: the mock-up capitalises ACCEPTED / NOT ACCEPTED but keeps
   the remittance headings in sentence case, so the caps live in the copy. */
.proc-status h3 {
  color: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .3rem;
}

.proc-status p,
.proc-status li {
  color: #3d4c5a;
  font-size: .82rem;
  line-height: 1.55;
}

.proc-status p {
  margin: 0;
}

.proc-status ul {
  margin: 0 0 .5rem;
  padding-left: 1.1rem;
}

.proc-emphasis {
  color: var(--sf-error);
  font-weight: 700;
  margin-top: .4rem !important;
}

/* BOTTOM NOTICES */

.proc-notice {
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  display: flex;
  gap: .8rem;
  padding: 1.1rem 1.2rem;
}

.proc-notice--time {
  background: var(--sf-grey-50);
}

.proc-notice--legal {
  background: var(--gold-soft);
  border-color: #f0e0bd;
}

.proc-notice-ico {
  display: inline-flex;
  flex: none;
}

.proc-notice-ico svg {
  height: 1.6rem;
  width: 1.6rem;
}

.proc-notice--time .proc-notice-ico {
  color: var(--sf-blue-600);
}

.proc-notice--legal .proc-notice-ico {
  color: var(--sf-gold-800);
}

.proc-notice h2 {
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}

.proc-notice p {
  color: #3d4c5a;
  font-size: .83rem;
  line-height: 1.6;
  margin: 0;
}

/* NEED ASSISTANCE */

.proc-help {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  padding: 1rem 1.2rem;
}

.proc-help-ico {
  color: var(--sf-navy-800);
  display: inline-flex;
  flex: none;
}

.proc-help-ico svg {
  height: 2rem;
  width: 2rem;
}

.proc-help-copy {
  flex: 1 1 14rem;
}

.proc-help-copy strong {
  color: var(--brand-dark);
  display: block;
  font-size: .95rem;
}

.proc-help-copy span {
  color: var(--muted);
  font-size: .85rem;
}

@media (min-width: 620px) {
  .proc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proc-step:nth-child(odd)::after {
    display: flex;
  }
}

@media (min-width: 768px) {
  .proc-info-grid,
  .proc-notices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .proc-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proc-step:not(:last-child)::after {
    display: flex;
  }

  .proc-lower-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   Registration step 1 - Create your profile
   ============================================================ */

/* Screen-reader-only text. Used where a control's visible label is an icon or
   a fixed prefix that would otherwise reach a screen reader as noise. */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.signup-layout {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.2rem;
}

@media (min-width: 960px) {
  .signup-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
}

.signup-form {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

/* Profile type ------------------------------------------------ */
.profile-type {
  border: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: 0;
}

.profile-type-option {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--brand-dark);
  cursor: pointer;
  display: flex;
  font-weight: 650;
  gap: .6rem;
  padding: .8rem 1rem;
}

.profile-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-type-option svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 22px;
}

.profile-type-option.is-selected {
  background: #e8f2fe;
  border-color: var(--sf-blue-650);
  color: var(--sf-blue-800);
}

/* Visible but not choosable: the customer should see Business is coming
   without being able to start down a path that does not exist yet. */
.profile-type-option.is-disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.profile-type-flag {
  background: var(--sf-grey-100);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
  margin-left: auto;
  padding: .2rem .55rem;
}

/* Fields ------------------------------------------------------ */
.signup-field {
  display: grid;
  gap: .3rem;
}

.signup-label {
  color: var(--brand-dark);
  font-weight: 650;
  margin: 0;
}

.signup-label .req {
  color: var(--sf-error);
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.signup-control {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
}

.signup-input {
  align-items: center;
  display: flex;
  flex: 1 1 18rem;
  min-width: 0;
  position: relative;
}

.signup-ico {
  color: var(--muted);
  fill: none;
  height: 20px;
  left: .75rem;
  pointer-events: none;
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 20px;
}

.signup-input .form-control {
  padding-left: 2.5rem;
  width: 100%;
}

/* The dial code is fixed rather than a country picker: Australian mobiles are
   the only ones the duplicate check understands. */
.signup-input--phone .form-control {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  padding-left: .75rem;
}

.signup-dial {
  align-items: center;
  background: var(--sf-grey-50);
  border: 1px solid var(--line);
  border-radius: var(--sf-radius-sm) 0 0 var(--sf-radius-sm);
  border-right: 0;
  color: var(--brand-dark);
  display: flex;
  flex: none;
  font-weight: 650;
  padding: 0 .8rem;
  white-space: nowrap;
}

.signup-input--phone {
  align-items: stretch;
}

.signup-reveal {
  background: none;
  border: 0;
  color: var(--sf-blue-800);
  cursor: pointer;
  font-weight: 650;
  padding: 0 .8rem;
  position: absolute;
  right: 0;
}

.signup-help {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
  max-width: 38rem;
}

/* Availability ------------------------------------------------ */
.signup-status {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 650;
  margin: 0;
  min-height: 1.2em;
}

[data-check-field][data-state="ok"] .signup-status {
  color: var(--sf-green-700);
}

[data-check-field][data-state="bad"] .signup-status {
  color: var(--sf-error);
}

/* The tick and cross ride with the message, so the state is never carried by
   colour alone. */
[data-check-field][data-state="ok"] .signup-status::before,
[data-check-field][data-state="bad"] .signup-status::before {
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  height: 18px;
  margin-right: .4rem;
  vertical-align: -.25rem;
  width: 18px;
}

[data-check-field][data-state="ok"] .signup-status::before {
  background: var(--sf-green-600);
  content: "\2713";
}

[data-check-field][data-state="bad"] .signup-status::before {
  background: var(--sf-error);
  content: "\00d7";
}

[data-check-field][data-state="ok"] .form-control {
  border-color: var(--sf-green-300);
}

[data-check-field][data-state="bad"] .form-control {
  border-color: #e9a6a6;
}

/* Password rules ---------------------------------------------- */
.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}

.password-rules li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: .83rem;
  gap: .35rem;
}

.password-rules svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 17px;
}

.password-rules li.is-met {
  color: var(--sf-green-700);
  font-weight: 650;
}

/* Consents ---------------------------------------------------- */
.signup-consent {
  align-items: flex-start;
  color: #31404c;
  display: flex;
  font-size: .9rem;
  gap: .6rem;
  line-height: 1.5;
}

.signup-consent input {
  flex: none;
  height: 18px;
  margin-top: .15rem;
  width: 18px;
}

.signup-submit {
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
}

.signup-switch {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
  text-align: center;
}

/* Side rail --------------------------------------------------- */
.signup-aside {
  background: #eef5fe;
  border-radius: 12px;
  display: grid;
  gap: 1.1rem;
  padding: 1.2rem;
}

.signup-aside-item {
  display: flex;
  gap: .8rem;
}

.signup-aside-item + .signup-aside-item {
  border-top: 1px solid #d6e6fa;
  padding-top: 1.1rem;
}

.signup-aside-ico {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--sf-blue-800);
  display: inline-flex;
  flex: none;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.signup-aside-ico svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 22px;
}

.signup-aside-ico img {
  height: 26px;
  width: 26px;
}

.signup-aside h3 {
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.signup-aside p {
  color: #31404c;
  font-size: .86rem;
  line-height: 1.5;
  margin: 0;
}

.signup-aside-links {
  display: flex;
  gap: .5rem;
  margin-top: .5rem !important;
}

/* ============================================================
   Registration step 2 - Verification code
   ============================================================ */
.otp-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
}

.otp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(3, 31, 59, .08);
  max-width: 27rem;
  padding: clamp(1.4rem, 4vw, 2.1rem);
  text-align: center;
  width: 100%;
}

.otp-card h2 {
  color: var(--brand-dark);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .7rem;
}

.otp-card p {
  color: #31404c;
  margin: 0 0 .7rem;
}

.otp-card strong {
  color: var(--brand-dark);
}

.otp-sent {
  align-items: flex-start;
  background: #eaf7ef;
  border-radius: 10px;
  color: #1c5133;
  display: flex;
  font-size: .88rem;
  gap: .5rem;
  margin-bottom: 1.2rem !important;
  padding: .7rem .8rem;
  text-align: left;
}

.otp-sent-tick {
  color: var(--sf-green-600);
  flex: none;
  line-height: 0;
}

.otp-sent-tick svg,
.otp-tick svg {
  fill: currentColor;
  height: 22px;
  width: 22px;
}

.otp-sent-tick svg path,
.otp-tick svg path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.otp-form {
  margin-top: 1.4rem;
}

.otp-label {
  color: var(--brand-dark);
  display: block;
  font-weight: 650;
  margin-bottom: .5rem;
  text-align: left;
}

/* Six boxes drawn over one real input. The input itself is transparent and
   stretched across them, so a paste or an autofilled one-time code lands in a
   single field and the boxes just mirror it. */
.otp-boxes {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: .2rem;
}

.otp-boxes span {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand-dark);
  display: flex;
  font-size: 1.4rem;
  font-weight: 700;
  height: 3.1rem;
  justify-content: center;
}

.otp-boxes span.is-filled {
  border-color: var(--sf-blue-650);
}

.otp-boxes span.is-next {
  border-color: var(--sf-blue-650);
  box-shadow: 0 0 0 3px rgba(2, 91, 206, .18);
}

/* Kept in the layout and reachable, just invisible: hiding it outright would
   take the field out of the tab order and break autofill. */
.otp-input {
  background: transparent;
  border: 0;
  caret-color: transparent;
  color: transparent;
  height: 3.1rem;
  letter-spacing: 2.6rem;
  margin-top: -3.3rem;
  padding: 0;
  position: relative;
  width: 100%;
}

.otp-input:focus {
  outline: none;
}

.otp-error {
  display: block;
  margin-top: .6rem;
}

.otp-submit {
  background: var(--sf-blue-800);
  border-color: var(--sf-blue-800);
  color: #fff;
  letter-spacing: .04em;
  margin-top: 1rem;
  text-transform: uppercase;
  width: 100%;
}

.otp-submit:hover,
.otp-submit:focus-visible {
  background: var(--sf-blue-900);
  border-color: var(--sf-blue-900);
  color: #fff;
}

/* Nothing to submit until all six digits are in. Kept visibly a button rather
   than greyed out to nothing, so it still reads as the next thing to do. */
.otp-submit:disabled {
  background: #92b3e6;
  border-color: #92b3e6;
  cursor: not-allowed;
}

.otp-resend {
  margin-top: 1rem;
}

.otp-resend-button {
  background: none;
  border: 0;
  color: var(--sf-blue-800);
  cursor: pointer;
  font-weight: 650;
  text-decoration: underline;
}

.otp-resend-wait {
  color: var(--muted);
  font-size: .88rem;
}

.otp-foot {
  align-items: flex-start;
  border-top: 1px solid var(--sf-grey-100);
  color: var(--muted);
  display: flex;
  font-size: .82rem;
  gap: .5rem;
  line-height: 1.45;
  margin: 1.4rem 0 0 !important;
  padding-top: 1rem;
  text-align: left;
}

.otp-foot svg {
  fill: none;
  flex: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 18px;
}

/* Success ----------------------------------------------------- */
.otp-card--done .otp-tick {
  align-items: center;
  background: #eaf7ef;
  border-radius: 50%;
  color: var(--sf-green-600);
  display: inline-flex;
  height: 88px;
  justify-content: center;
  margin-bottom: 1.2rem;
  width: 88px;
}

.otp-card--done .otp-tick svg {
  height: 52px;
  width: 52px;
}

/* ============================================================
   Registration step 5 - contact details carried from step 1
   ============================================================ */
.verified-contacts {
  display: grid;
  gap: .7rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.verified-contacts li {
  align-items: center;
  background: var(--sf-grey-50);
  border: 1px solid var(--sf-grey-100);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  padding: .7rem .9rem;
}

.verified-contacts-label {
  color: var(--muted);
  font-size: .82rem;
  min-width: 8rem;
}

.verified-contacts-value {
  color: var(--brand-dark);
  font-weight: 650;
  word-break: break-word;
}

.verified-badge {
  align-items: center;
  color: var(--sf-green-700);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 700;
  gap: .3rem;
  margin-left: auto;
}

.verified-badge svg {
  fill: currentColor;
  height: 17px;
  width: 17px;
}

.verified-badge svg path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

/* ============================================================
   Registration steps 3-5 - shared shell
   ============================================================ */

/* Steps 4 and 5 carry a rail of explanatory panels beside the form; step 3
   does not, and just uses .step-columns below. */
.step-layout {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.2rem;
}

@media (min-width: 1040px) {
  .step-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  }
}

.step-main {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.step-aside {
  display: grid;
  gap: 1rem;
}

.step-aside-item {
  border-radius: 12px;
  display: flex;
  gap: .75rem;
  padding: 1rem 1.1rem;
}

.step-aside-item--blue {
  background: #eaf3fe;
}

.step-aside-item--green {
  background: #ecf8f1;
}

.step-aside-item--gold {
  background: #fdf5e4;
}

.step-aside-ico {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.step-aside-item--blue .step-aside-ico {
  color: var(--sf-blue-800);
}

.step-aside-item--green .step-aside-ico {
  color: var(--sf-green-700);
}

.step-aside-item--gold .step-aside-ico {
  color: var(--gold-dark);
}

.step-aside-ico svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 21px;
}

.step-aside h3 {
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .3rem;
}

.step-aside p,
.step-aside li {
  color: #31404c;
  font-size: .86rem;
  line-height: 1.5;
  margin: 0 0 .5rem;
}

.step-aside p:last-child,
.step-aside li:last-child {
  margin-bottom: 0;
}

.step-aside ul {
  margin: 0;
  padding-left: 1.05rem;
}

/* Step 3 - two columns of fields ------------------------------ */
.step-form {
  display: grid;
  gap: 1.2rem;
}

.step-columns {
  display: grid;
  gap: 1.3rem 2.2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 880px) {
  .step-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A rule between the columns rather than around each, so the two read as
     one form rather than two panels. */
  .step-columns .step-col + .step-col {
    border-left: 1px solid var(--sf-grey-100);
    padding-left: 2.2rem;
  }
}

.step-col {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.step-field {
  display: grid;
  gap: .3rem;
}

.step-label {
  color: var(--brand-dark);
  font-weight: 650;
  margin: 0;
}

.step-label .req,
.signup-consent .req {
  color: var(--sf-error);
}

/* Small "i" affordance beside a label whose rule is not obvious. */
.step-hint {
  align-items: center;
  background: var(--sf-blue-650);
  border-radius: 50%;
  color: #fff;
  cursor: help;
  display: inline-flex;
  font-size: .68rem;
  font-style: italic;
  font-weight: 800;
  height: 16px;
  justify-content: center;
  vertical-align: -.15rem;
  width: 16px;
}

/* Grouped sub-form (Place of Birth) --------------------------- */
.step-group {
  background: #eef5fe;
  border: 0;
  border-radius: 12px;
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 1rem;
}

.step-group legend {
  color: var(--brand-dark);
  float: left;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .2rem;
  padding: 0;
  width: 100%;
}

/* Radios ------------------------------------------------------ */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

.radio-pill {
  align-items: center;
  color: var(--brand-dark);
  cursor: pointer;
  display: flex;
  gap: .45rem;
}

.radio-pill input {
  accent-color: var(--sf-blue-650);
  height: 18px;
  width: 18px;
}

/* Date of birth ----------------------------------------------- */
.dob-row {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Step 4 - accepted documents --------------------------------- */
.doc-reference {
  background: #f4f9ff;
  border: 1px solid #d6e6fa;
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.doc-reference-head {
  align-items: flex-start;
  display: flex;
  gap: .7rem;
  margin-bottom: .9rem;
}

.doc-reference-ico {
  color: var(--sf-blue-800);
  flex: none;
  line-height: 0;
}

.doc-reference-ico svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 26px;
}

.doc-reference h2 {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .2rem;
}

.doc-reference-head p {
  color: #31404c;
  font-size: .86rem;
  margin: 0;
}

.doc-cards {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-cards li {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: .6rem;
  padding: .7rem .8rem;
}

.doc-card-ico {
  align-items: center;
  background: #eaf3fe;
  border-radius: 8px;
  color: var(--sf-blue-800);
  display: inline-flex;
  flex: none;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.doc-card-ico svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 20px;
}

.doc-card-name {
  color: var(--brand-dark);
  font-weight: 650;
  min-width: 0;
}

.doc-card-points {
  background: var(--gold-soft);
  border-radius: 999px;
  color: var(--gold-dark);
  font-size: .78rem;
  font-weight: 700;
  margin-left: auto;
  padding: .2rem .6rem;
  white-space: nowrap;
}

.doc-secondary {
  margin-top: .9rem;
}

.doc-secondary summary {
  color: var(--sf-blue-800);
  cursor: pointer;
  font-weight: 650;
}

.doc-secondary ul {
  display: grid;
  gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
}

.doc-secondary li {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  font-size: .86rem;
  gap: .5rem;
  padding: .45rem .7rem;
}

/* Running points total ---------------------------------------- */
.doc-total {
  align-items: center;
  border-top: 1px solid var(--sf-grey-100);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding-top: 1rem;
}

.doc-total span {
  color: var(--brand-dark);
  font-weight: 700;
}

.doc-total strong {
  font-size: 1.05rem;
}

.doc-total .is-met {
  color: var(--sf-green-700);
}

.doc-total .is-short {
  color: var(--sf-warning);
}

.doc-banner {
  align-items: center;
  border-radius: 10px;
  display: flex;
  font-weight: 650;
  gap: .5rem;
  margin: .9rem 0 0;
  padding: .7rem .9rem;
}

.doc-banner svg {
  fill: currentColor;
  flex: none;
  height: 20px;
  width: 20px;
}

.doc-banner svg path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.doc-banner--met {
  background: #eaf7ef;
  color: var(--sf-green-700);
}

.doc-banner--short {
  background: var(--gold-soft);
  color: #8a5d00;
}

/* Actions ----------------------------------------------------- */
.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: space-between;
}

/* Step 3 footnote --------------------------------------------- */
.step-note {
  align-items: flex-start;
  background: #eaf3fe;
  border-radius: 12px;
  display: flex;
  gap: .7rem;
  padding: .9rem 1.1rem;
}

.step-note-ico {
  color: var(--sf-blue-800);
  flex: none;
  line-height: 0;
}

.step-note-ico svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}

.step-note p {
  color: #26394f;
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Registration page shell
   ============================================================
   The approved screens run registration on its own page: a light
   harbour ground, the logo, a way back to sign in, and a slim
   legal footer. No navigation bar and no site footer, so there is
   nothing to wander off into halfway through an application. */

.reg-page {
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #dbecfc 0%, #eef6fe 30%, #f6fafe 62%, #eaf4fd 100%);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header ------------------------------------------------------ */
.reg-header {
  overflow: hidden;
  position: relative;
}

/* The harbour fills the right-hand end of the band and fades out before it
   reaches the logo, so the two never collide at any width. */
.reg-header::after {
  /* cover rather than contain: the crop carries a lot of empty sky above the
     buildings, and letting it be cropped away is what gives the band the wide,
     shallow skyline the approved screens have. */
  background: url("/assets/images/registration-skyline.png") right bottom / cover no-repeat;
  content: "";
  /* Anchored to the bottom of the band, so the sign-in link above it stays on
     plain ground rather than on the buildings. */
  bottom: 0;
  height: 92px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  opacity: .92;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: min(52%, 680px);
}

.reg-header-inner {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--sf-container);
  min-height: 142px;
  padding: 1.1rem clamp(1rem, 4vw, 2.2rem) 1rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.reg-brand {
  display: inline-grid;
  gap: .2rem;
  justify-items: start;
  text-decoration: none;
}

.reg-brand img {
  height: 46px;
  width: auto;
}

.reg-brand span {
  color: var(--brand-dark);
  font-size: .82rem;
  font-weight: 700;
}

.reg-signin {
  color: var(--muted);
  font-size: .92rem;
  margin: .3rem 0 0;
}

.reg-signin a {
  color: var(--sf-blue-650);
  font-weight: 700;
  text-decoration: none;
}

.reg-signin a:hover,
.reg-signin a:focus-visible {
  text-decoration: underline;
}

/* Body -------------------------------------------------------- */
.reg-main {
  flex: 1;
  margin: 0 auto;
  max-width: var(--sf-container);
  padding: 0 clamp(1rem, 4vw, 2.2rem) 1.6rem;
  width: 100%;
}

/* The tracker sits on the page ground above the card, so it reads as progress
   through the flow rather than a heading inside one step. */
.page-register .register-track {
  margin: .2rem 0 1.2rem;
}

.page-register .page-panel {
  border: 1px solid #e2ecf7;
  box-shadow: 0 18px 44px rgba(3, 31, 59, .09);
}

.reg-heading {
  margin-bottom: 1.3rem;
}

.reg-heading h1 {
  color: var(--sf-blue-900);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .3rem;
}

.reg-heading p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  max-width: 52rem;
}

/* Footer ------------------------------------------------------ */
.reg-footer {
  border-top: 1px solid rgba(3, 31, 59, .08);
}

.reg-footer-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--sf-container);
  padding: 1rem clamp(1rem, 4vw, 2.2rem);
  width: 100%;
}

.reg-footer p {
  color: var(--muted);
  font-size: .84rem;
  margin: 0;
}

.reg-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reg-footer a {
  color: var(--sf-blue-650);
  font-size: .84rem;
  text-decoration: none;
}

.reg-footer a:hover,
.reg-footer a:focus-visible {
  text-decoration: underline;
}

/* Below the split the harbour has no room left beside the logo. */
@media (max-width: 719.98px) {
  .reg-header::after {
    display: none;
  }
}

/* ============================================================
   Approved action buttons - header and hero
   ============================================================
   Munir's button and icon specification (Sep 2026). Colours,
   gradients, shadows and timings are the ones set out there.

   Scoped to the four actions the specification covers - Send
   Money Now, Check Rates, Login and Register - rather than
   applied to .sf-button across the site: the brief is the header
   and hero area, and restyling every button on every page would
   be the redesign it explicitly is not asking for. */

:root {
  --sf-btn-navy-dark: #062542;
  --sf-btn-navy: #082E57;
  --sf-btn-blue-deep: #123F70;
  --sf-btn-blue: #4E91D5;
  --sf-btn-blue-light: #79B8F2;
  --sf-btn-gold: #ECB01A;
  --sf-btn-gold-light: #F7C84A;
  --sf-btn-gold-dark: #D99A00;
  --sf-btn-gold-border: #FFD76A;
}

.sf-action-buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sf-btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  line-height: 1;
  min-height: 52px;
  padding: 0 24px;
  text-decoration: none;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

/* Primary gold: Send Money Now and Register. */
.sf-btn-gold {
  background: linear-gradient(180deg, #F7C84A 0%, #ECB01A 52%, #D99A00 100%);
  border: 1px solid #FFD76A;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 215, 106, .15),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #082747;
}

.sf-btn-gold:hover,
.sf-btn-gold:focus-visible {
  background: linear-gradient(180deg, #FFD568 0%, #F2B820 52%, #E5A400 100%);
  border-color: #FFE08A;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .22),
    0 0 12px rgba(236, 176, 26, .28),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #061F38;
  transform: translateY(-1px);
}

/* Secondary blue: Check Rates. */
.sf-btn-blue {
  background: linear-gradient(180deg, #123F70 0%, #082E57 55%, #062542 100%);
  border: 1px solid #4E91D5;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff;
}

.sf-btn-blue:hover,
.sf-btn-blue:focus-visible {
  background: linear-gradient(180deg, #19518B 0%, #0B3968 55%, #072D50 100%);
  border-color: #79B8F2;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .2),
    0 0 10px rgba(78, 145, 213, .25);
  color: #fff;
  transform: translateY(-1px);
}

/* Login stays understated, and deliberately quieter than Register. */
.sf-btn-login {
  background: rgba(7, 38, 70, .72);
  border: 1px solid rgba(148, 190, 230, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 3px 8px rgba(0, 0, 0, .14);
  color: #fff;
}

.sf-btn-login:hover,
.sf-btn-login:focus-visible {
  background: #0B3A67;
  border-color: #78B7EE;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .18),
    0 0 8px rgba(78, 145, 213, .2);
  color: #fff;
  transform: translateY(-1px);
}

/* currentColor is what lets one file serve a navy button and a gold one. */
.sf-btn-icon {
  fill: none;
  flex: 0 0 22px;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 22px;
}

/* The header pair, which sit in a shallower bar than the hero. */
.sf-btn-small {
  font-size: 14px;
  min-height: 42px;
  padding: 0 18px;
}

.sf-btn-small .sf-btn-icon {
  flex-basis: 19px;
  height: 19px;
  width: 19px;
}

/* Full width inside a card, e.g. the hero calculator. */
.sf-btn-block {
  width: 100%;
}

.sf-btn:focus-visible {
  outline: 3px solid rgba(126, 220, 255, .55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sf-btn {
    transition: none;
  }

  .sf-btn:hover,
  .sf-btn:focus-visible {
    transform: none;
  }
}

@media (max-width: 768px) {
  .sf-action-buttons {
    gap: 10px;
  }

  .sf-btn {
    font-size: 15px;
    min-height: 48px;
    padding: 0 18px;
  }

  .sf-btn-icon {
    flex-basis: 20px;
    height: 20px;
    width: 20px;
  }

  /* Stated explicitly rather than left to source order: the specification
     asks for roughly 48px touch targets on mobile, and Register is a primary
     action there, not a utility one. */
  .sf-btn-small {
    font-size: 14px;
    min-height: 48px;
    padding: 0 16px;
  }
}

/* ============================================================
   Registration submitted - the hand-off to identity verification
   ============================================================ */

.submitted-head {
  text-align: center;
}

.submitted-tick {
  align-items: center;
  background: #eaf7ef;
  border-radius: 50%;
  color: var(--sf-green-600);
  display: inline-flex;
  height: 84px;
  justify-content: center;
  margin-bottom: 1rem;
  width: 84px;
}

.submitted-tick svg {
  fill: currentColor;
  height: 50px;
  width: 50px;
}

.submitted-tick svg path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

/* A check that did not pass is not an error the customer caused, so the mark
   is a caution rather than a red cross. */
.submitted-tick--warn {
  background: var(--gold-soft);
  color: var(--gold-dark);
}

.submitted-head h1 {
  color: var(--sf-blue-900);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  margin: 0 0 1.2rem;
}

.submitted-greeting {
  color: var(--brand-dark);
  font-weight: 700;
}

.step-main > p {
  color: #31404c;
  line-height: 1.6;
  margin: 0 0 .8rem;
}

/* The call to action is a form so the secure link never reaches the page. */
.submitted-cta {
  margin: 1.2rem 0 .5rem;
  text-align: center;
}

.submitted-cta .sf-btn {
  min-width: min(100%, 24rem);
}

.submitted-newwindow {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: .86rem;
  gap: .45rem;
  justify-content: center;
  margin: 0 0 1.4rem !important;
}

.submitted-newwindow svg {
  fill: none;
  flex: none;
  height: 17px;
  stroke: var(--sf-blue-650);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

/* Panels ------------------------------------------------------ */
.submitted-panel {
  background: #f2f8fe;
  border: 1px solid #dceaf9;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  padding: 1rem 1.1rem 1.1rem;
}

.submitted-panel-head {
  align-items: flex-start;
  display: flex;
  gap: .7rem;
  margin-bottom: .9rem;
}

.submitted-panel-head > span {
  color: var(--sf-blue-800);
  flex: none;
  line-height: 0;
}

.submitted-panel-head svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 26px;
}

.submitted-panel h2 {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .2rem;
}

.submitted-panel-head p {
  color: #31404c;
  font-size: .87rem;
  margin: 0;
}

/* Declared documents ------------------------------------------ */
.submitted-docs {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.submitted-docs li {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--brand-dark);
  display: flex;
  font-size: .89rem;
  font-weight: 650;
  gap: .55rem;
  padding: .65rem .75rem;
}

.submitted-docs svg {
  color: var(--sf-blue-800);
  fill: none;
  flex: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 22px;
}

/* What happens next ------------------------------------------- */
.submitted-next {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.submitted-next li {
  display: flex;
  gap: .6rem;
}

.submitted-next-num {
  align-items: center;
  background: var(--sf-blue-650);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: none;
  font-size: .82rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.submitted-next strong {
  color: var(--brand-dark);
  display: block;
  font-size: .92rem;
}

.submitted-next span:not(.submitted-next-num) {
  color: #31404c;
  font-size: .85rem;
  line-height: 1.45;
}

/* Closing notes ----------------------------------------------- */
.submitted-notes {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.submitted-notes p {
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #31404c;
  display: flex;
  font-size: .85rem;
  gap: .5rem;
  line-height: 1.45;
  margin: 0;
  padding: .7rem .8rem;
}

.submitted-notes svg {
  color: var(--sf-blue-800);
  fill: none;
  flex: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 20px;
}