/* ============================================================================
   ONWARDTRUST — shared stylesheet
   Used by BOTH the public site (/) and the customer portal (/pay/). The
   status rail, the counterfoil and the banners are the components the two
   have in common, and they are defined once here so the portal can never
   drift away from the brand.

   Tokens follow the three-state rule: the complete light palette lives on
   bare :root, and dark redefines TOKENS ONLY — once for the system setting,
   once for an explicit [data-theme] stamp. No colour is ever defined for the
   first time inside a media query.
   ========================================================================= */

:root {
  --ink:        #14181C;
  --ink-soft:   #232A31;
  --ground:     #EFEDE7;
  --surface:    #FFFFFF;
  --surface-2:  #F8F7F3;
  --surface-3:  #F1EFE9;
  --line:       #DCD9D0;
  --line-firm:  #C4C0B4;
  --text:       #191E23;
  --text-2:     #5A646E;
  --text-3:     #5F686F;
  --brass:      #7C6130;
  --brass-ink:  #6E5527;
  --brass-soft: #EDE3CD;
  --brass-line: #D9C79D;
  --verify:     #1C6349;
  --verify-soft:#DCEBE3;
  --verify-line:#A9CDBC;
  --alert:      #963626;
  --alert-soft: #F4E1DC;
  --alert-line: #E0B6AC;

  /* on-ink values — constant across themes, because the ink chrome is ink in
     both. Naming them stops #EFEDE7 being typed by hand in twenty places. */
  --on-ink:      #EFEDE7;
  --on-ink-2:    #A7AFB8;
  --on-ink-3:    #8A939C;
  --on-ink-line: #2A333D;
  --on-ink-brass:#C6A662;

  --shadow:     0 1px 2px rgba(20,24,28,.06), 0 8px 24px -12px rgba(20,24,28,.18);
  --shadow-lift:0 2px 4px rgba(20,24,28,.07), 0 18px 40px -18px rgba(20,24,28,.26);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 66ch;
  --radius: 3px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #05070A;
    --ink-soft:   #10151A;
    --ground:     #0B0E12;
    --surface:    #14191F;
    --surface-2:  #1A2027;
    --surface-3:  #212932;
    --line:       #2A333D;
    --line-firm:  #3C4854;
    --text:       #E9E7E1;
    --text-2:     #9AA4AE;
    --text-3:     #8B949D;
    --brass:      #C6A662;
    --brass-ink:  #DCC08A;
    --brass-soft: #241D0F;
    --brass-line: #4A3D22;
    --verify:     #56A588;
    --verify-soft:#10241C;
    --verify-line:#2C4E40;
    --alert:      #D0705B;
    --alert-soft: #2A1512;
    --alert-line: #55291F;
    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ink:        #05070A;
  --ink-soft:   #10151A;
  --ground:     #0B0E12;
  --surface:    #14191F;
  --surface-2:  #1A2027;
  --surface-3:  #212932;
  --line:       #2A333D;
  --line-firm:  #3C4854;
  --text:       #E9E7E1;
  --text-2:     #9AA4AE;
  --text-3:     #8B949D;
  --brass:      #C6A662;
  --brass-ink:  #DCC08A;
  --brass-soft: #241D0F;
  --brass-line: #4A3D22;
  --verify:     #56A588;
  --verify-soft:#10241C;
  --verify-line:#2C4E40;
  --alert:      #D0705B;
  --alert-soft: #2A1512;
  --alert-line: #55291F;
  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
svg { display: block; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 1px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink);
  padding: 10px 16px; border-radius: var(--radius); font-size: 14px;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------ headings --- */

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -.022em;
}
.h-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.h-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
}
.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.lede { font-size: 18px; color: var(--text-2); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--text-2); }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 620; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- chrome --- */

.topbar {
  background: var(--ink);
  color: var(--on-ink);
  border-bottom: 1px solid var(--on-ink-line);
  position: sticky; top: 0; z-index: 40;
}
.topbar .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px;
}

.ot-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.ot-lockup svg { color: var(--on-ink); }
.ot-wordmark {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -.012em;
  color: var(--on-ink);
  white-space: nowrap;
}
.ot-wordmark b { font-weight: 600; }
.ot-wordmark span { font-weight: 400; color: var(--on-ink-brass); }

.nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  font-size: 14px;
  color: var(--on-ink-2);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav a:hover { color: var(--on-ink); background: var(--ink-soft); }
.nav a[aria-current="page"] { color: var(--on-ink); background: var(--ink-soft); }
.nav .btn-nav {
  border: 1px solid var(--on-ink-brass);
  color: var(--on-ink-brass);
  margin-left: 6px;
  font-weight: 600;
}
.nav .btn-nav:hover { background: var(--on-ink-brass); color: var(--ink); }

@media (max-width: 640px) {
  .topbar .wrap { min-height: 0; gap: 10px; }
  .nav { margin-left: 0; width: 100%; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 9px; font-size: 13.5px; }
  .nav .btn-nav { margin-left: 2px; }
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  background: var(--ink);
  color: var(--on-ink);
  padding: 76px 0 84px;
  border-bottom: 1px solid var(--on-ink-line);
}
.hero .h-display { color: var(--on-ink); max-width: 17ch; }
.hero .lede { color: var(--on-ink-2); font-size: 18.5px; margin-top: 20px; }
.hero-stack { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--brass-line);
  background: var(--brass-soft);
  color: var(--brass-ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius);
}
.hero .stamp {
  border-color: #4A3D22; background: #1A1509; color: var(--on-ink-brass);
}

/* -------------------------------------------------------------- section --- */

.section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section.tight { padding: 52px 0; }
.section.ink { background: var(--ink); color: var(--on-ink); border-bottom-color: var(--on-ink-line); }
.section.ink .h-section, .section.ink .h-sub { color: var(--on-ink); }
.section.ink .prose, .section.ink .lede { color: var(--on-ink-2); }
.section.ink .prose strong { color: var(--on-ink); }
.section.ink .eyebrow { color: var(--on-ink-brass); }
.section.sunk { background: var(--surface-2); }

.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: var(--measure); }

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn.block { display: flex; width: 100%; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-firm); font-weight: 500; }
.btn.ghost:hover { border-color: var(--text-2); }
.btn.quiet { background: transparent; color: var(--text-2); border-color: transparent; font-weight: 500; }

/* On an ink ground the primary button must invert, or it vanishes. */
.hero .btn, .section.ink .btn {
  background: var(--on-ink); color: var(--ink); border-color: var(--on-ink);
}
.hero .btn.ghost, .section.ink .btn.ghost {
  background: transparent; color: var(--on-ink); border-color: #3C4854;
}
.hero .btn.ghost:hover, .section.ink .btn.ghost:hover { border-color: var(--on-ink-2); }

/* In dark mode a pure-ink button on a near-black ground is invisible. */
:root[data-theme="dark"] .btn:not(.ghost):not(.quiet) {
  background: var(--surface-3); border-color: var(--line-firm); color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.ghost):not(.quiet) {
    background: var(--surface-3); border-color: var(--line-firm); color: var(--text);
  }
  :root:not([data-theme="light"]) .hero .btn:not(.ghost),
  :root:not([data-theme="light"]) .section.ink .btn:not(.ghost) {
    background: var(--on-ink); color: #05070A; border-color: var(--on-ink);
  }
}
:root[data-theme="dark"] .hero .btn:not(.ghost),
:root[data-theme="dark"] .section.ink .btn:not(.ghost) {
  background: var(--on-ink); color: #05070A; border-color: var(--on-ink);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- cards --- */

.grid { display: grid; gap: 20px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-bottom: 8px; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.card p + p { margin-top: 10px; }
.card.brass-top { border-top: 2px solid var(--brass); }
.section.ink .card { background: var(--ink-soft); border-color: var(--on-ink-line); box-shadow: none; }
.section.ink .card h3 { color: var(--on-ink); }
.section.ink .card p { color: var(--on-ink-2); }

.numbered { counter-reset: step; }
.numbered .card { position: relative; padding-top: 26px; }
.numbered .card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--brass); margin-bottom: 12px;
}

/* -------------------------------------------------- the status rail ------ */
/* Shared with the portal. The HELD node is a square seal, not a dot: every
   other step is progress, but holding is a state the money sits in, and the
   shape change says so before the label is read. */

.rail { display: flex; flex-direction: column; }
.rail-step { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.rail-gutter { display: flex; flex-direction: column; align-items: center; }
.node {
  width: 11px; height: 11px; margin-top: 5px; flex: none;
  border: 1.5px solid var(--line-firm); background: var(--surface);
  border-radius: 50%;
}
.node.done { background: var(--verify); border-color: var(--verify); }
.node.held {
  border-radius: 1px; background: var(--brass); border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}
.node.now  { background: var(--text); border-color: var(--text); box-shadow: 0 0 0 3px var(--surface-3); }
.node.next { border-style: dashed; }
.node.stop { background: var(--alert); border-color: var(--alert); }
.stem { width: 1.5px; flex: 1; background: var(--line); min-height: 18px; margin: 3px 0; }
.stem.done { background: var(--verify); }
.rail-body { padding-bottom: 16px; }
.rail-t { font-size: 13.5px; font-weight: 620; color: var(--text); line-height: 1.35; }
.rail-d { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.rail-step.pending .rail-t { color: var(--text-3); font-weight: 500; }
.rail-step:last-child .rail-body { padding-bottom: 0; }

/* --------------------------------------------- the counterfoil ----------- */
/* Payment instructions. Numbers set like a bank statement: mono, tabular,
   grouped in fours, so a transposed character is visible. */

.foil { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.foil-head {
  padding: 12px 14px;
  border-bottom: 1px dashed var(--line-firm);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.foil-head-l { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.foil-amount {
  font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row-k { font-size: 12.5px; color: var(--text-2); flex: none; padding-top: 1px; }
.row-v {
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  text-align: right; word-break: break-word; font-variant-numeric: tabular-nums;
}
.row-v.em { font-weight: 600; }

.ref-callout {
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 4px;
}
.ref-callout .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); }
.ref-callout .v { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .04em; }
.ref-callout .n { font-size: 11.5px; color: var(--brass-ink); line-height: 1.45; }

/* -------------------------------------------------- banners and pills ---- */

.banner { border-radius: var(--radius); padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; border: 1px solid; }
.banner-t { font-size: 13.5px; font-weight: 640; }
.banner-d { font-size: 12.5px; line-height: 1.5; }
.banner.plain { background: var(--surface); border-color: var(--line); }
.banner.plain .banner-t { color: var(--text); }
.banner.plain .banner-d { color: var(--text-2); }
.banner.held { background: var(--brass-soft); border-color: var(--brass-line); }
.banner.held .banner-t, .banner.held .banner-d { color: var(--brass-ink); }
.banner.good { background: var(--verify-soft); border-color: var(--verify-line); }
.banner.good .banner-t, .banner.good .banner-d { color: var(--verify); }
.banner.warn { background: var(--alert-soft); border-color: var(--alert-line); }
.banner.warn .banner-t, .banner.warn .banner-d { color: var(--alert); }
.seal-mark { display: flex; align-items: center; gap: 9px; }
.seal-mark svg { flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.pill.held  { background: var(--brass-soft);  border-color: var(--brass-line);  color: var(--brass-ink); }
.pill.await { background: var(--surface-3);   border-color: var(--line-firm);   color: var(--text-2); }
.pill.good  { background: var(--verify-soft); border-color: var(--verify-line); color: var(--verify); }
.pill.warn  { background: var(--alert-soft);  border-color: var(--alert-line);  color: var(--alert); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot.sq { border-radius: 1px; }

/* --------------------------------------------------- merchant panel ------ */
/* The neutrality device: the customer must always know whose booking this
   is, while the page stays visibly not-theirs. */

.merchant {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 11px 13px;
}
.merchant-logo {
  width: 32px; height: 32px; flex: none; border-radius: 2px;
  background: var(--ink-soft); color: var(--on-ink);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 15px;
}
.merchant-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.merchant-for { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
.merchant-name { font-size: 14px; font-weight: 620; color: var(--text); }

/* -------------------------------------------------------------- tables --- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; }
.table-scroll table { min-width: 560px; }
thead th {
  text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  font-family: var(--mono); color: var(--text-3); font-weight: 500;
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

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

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font-size: 16.5px; font-weight: 600; color: var(--text);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2);
  transform: rotate(45deg); transition: transform .15s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa .qa-body { padding: 0 0 20px; color: var(--text-2); max-width: var(--measure); }
.qa .qa-body p { margin: 0 0 12px; }
.qa .qa-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- phone ---- */
/* Device frame, used on the site to show the portal and in /pay/ to preview. */

.phone {
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-lift);
  max-width: 360px;
}
.phone-inner { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bar {
  background: var(--ink); color: var(--on-ink);
  padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bar .ot-wordmark { font-size: 15px; }
.bar-secure { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--on-ink-3); text-transform: uppercase; }
.pane { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.fineprint { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; }

/* ---------------------------------------------------- form fields -------- */
/* Back-office inputs.
   These exist because the login form originally borrowed `.row-v` to get the
   mono face — and inherited its `text-align: right`, which made every field
   look right-to-left before a character was typed. `.row-v` is a COUNTERFOIL
   VALUE: right-aligned by design so IBANs and amounts line up against a label.
   It has no business on an input. */

.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  /* Stated rather than inherited: this is the property that was wrong. */
  text-align: left;
}
.field::placeholder { color: var(--text-3); }
.field:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--brass);
}
.field-sm { padding: 6px 8px; font-size: 12.5px; }
/* For references and IBANs, where the shape of the string matters. Still
   left-aligned — a field being typed into reads from the left in every
   language this product serves. */
.field-mono { font-family: var(--mono); }

/* ------------------------------------------------- portal (/pay/) -------- */
/* The real customer screens. Deliberately no site navigation: a payment page
   with a marketing menu invites the customer to wander off mid-transfer, and
   the neutrality argument is made by the merchant panel, not by a nav bar. */

.wrap-pay { max-width: 460px; margin: 0 auto; padding: 0 18px; }
.portal-bar { background: var(--ink); color: var(--on-ink); border-bottom: 1px solid var(--on-ink-line); }
.portal-bar .wrap-pay {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px;
}
.portal-main { padding: 20px 0 36px; }
.portal-pane { display: flex; flex-direction: column; gap: 15px; }
.portal-foot { padding: 0 0 44px; }
.portal-foot .wrap-pay { display: flex; flex-direction: column; gap: 10px; }
.portal-foot a { color: var(--text-2); font-size: 12px; }

/* value + copy button. The button is a SIBLING of the value, never a child:
   the copy handler reads the value with textContent, so a feedback node
   inside it would be copied along with the IBAN. */
.row-val-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.copy-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--brass); background: transparent;
  border: 1px solid var(--brass-line); border-radius: 2px;
  padding: 2px 7px; cursor: pointer; white-space: nowrap;
}
.copy-btn:hover { background: var(--brass-soft); }
.copy-btn[data-copied="true"] { color: var(--verify); border-color: var(--verify-line); background: var(--verify-soft); }

/* ------------------------------------------------------------- footer ---- */

.footer { background: var(--ink); color: var(--on-ink-2); padding: 56px 0 44px; }
.footer a { color: var(--on-ink-2); text-decoration: none; }
.footer a:hover { color: var(--on-ink); text-decoration: underline; }
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  padding-bottom: 34px; border-bottom: 1px solid var(--on-ink-line);
}
.footer h4 { font-size: 11px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer-blurb { font-size: 14px; color: var(--on-ink-2); max-width: 34ch; margin: 14px 0 0; line-height: 1.6; }
.footer-legal { padding-top: 26px; font-size: 12.5px; color: var(--on-ink-3); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal p { margin: 0; max-width: 72ch; }

/* ------------------------------------------------------------ utilities -- */

.stack   { display: flex; flex-direction: column; }
.stack-8 { gap: 8px }  .stack-12 { gap: 12px } .stack-16 { gap: 16px }
.stack-24{ gap: 24px } .stack-32 { gap: 32px } .stack-40 { gap: 40px }
.center-col { margin-inline: auto; }
.split { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.split.lean { grid-template-columns: minmax(300px, 1.15fr) minmax(280px, .85fr); }
@media (max-width: 780px) { .split.lean { grid-template-columns: 1fr; } }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Language switcher ──────────────────────────────────────────────────────
   Plain links, no JavaScript, one real crawlable URL per language. That is the
   point of putting the locale in the path rather than in a session: every
   alternative is a page a search engine can reach, and a traveller who lands
   on the wrong language can fix it without a cookie being set on a device they
   may be sharing.

   Generated by site/build-site.py and appended just inside </footer>. */
.lang {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 20px;
}
.lang ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang a {
  color: var(--text-3);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.lang a:hover { color: var(--text); border-bottom-color: var(--line-firm); }
.lang a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* A <select> carrying .field — the escrow-account picker on the match screen.
   Without resetting appearance it keeps the platform chrome and reads as a
   foreign control next to the inputs beside it. */
select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}