/* ==========================================================================
   DualPay — legal documents
   --------------------------------------------------------------------------
   These pages carry the same visual world as dualpay.co.uk: Manrope for
   voice, JetBrains Mono for metadata, brass for accent, and the site's own
   ivory surface and hairlines. Nothing here is a document-viewer theme; it is
   the site, set for sustained reading.

   Fonts are the self-hosted subsets the homepage already ships, so a visitor
   arriving here from the site pays no extra download.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("assets/manrope-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("assets/manrope-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("assets/jetbrains-mono-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("assets/jetbrains-mono-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Lifted from the homepage rather than re-picked, so the two never drift. */
  --surface: #FAFAF9;
  --ink: #0B0B0C;
  --ink-2: #2A2A2D;
  --ink-3: #5C5C5F;
  /* The site uses #9A9A9C for eyebrows, but at 10px on ivory that is 2.7:1.
     These pages are read, not skimmed, so metadata is darkened to clear 4.5:1
     while staying clearly subordinate to body text. */
  --ink-4: #6B6B6E;
  --accent: #8A6A3A;
  --hair: rgba(11, 11, 12, 0.13);
  --hair-strong: rgba(11, 11, 12, 0.2);
  --gutter: clamp(20px, 3.2vw, 46px);
  --measure: 35.5rem; /* ≈70 characters in Manrope at 16px */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(138, 106, 58, 0.16); color: var(--ink); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Masthead nav ------------------------------------------------------- */

.lg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 249, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
}

.lg-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(14px, 1.7vw, 22px) var(--gutter);
}

/* The official lockup, rebuilt: the mark stays as artwork, the wordmark is
   live type. The supplied lockup PNG has 9px strokes in a 338px-tall image, so
   at nav size they fall to ~0.5px and antialias to grey — reading as a pale
   smear rather than black. Proportions measured from that PNG: wordmark cap
   height 0.459 of the lockup, gap 0.192. */
.brand {
  --lockup: clamp(21px, 2.1vw, 26px);
  display: flex;
  align-items: center;
  gap: calc(var(--lockup) * 0.19);
  flex: 0 0 auto;
  color: var(--ink);
}
.brand img { height: var(--lockup); width: auto; display: block; }
.brand-word {
  font-size: calc(var(--lockup) * 0.64);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.lg-back {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.35s ease;
}
.lg-back:hover { color: var(--accent); }

/* --- Document masthead --------------------------------------------------- */

.lg-wrap {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 108px) var(--gutter) clamp(60px, 9vw, 120px);
}

/* The one authored entrance: the masthead settles on arrival, then the
   document is simply there. Body copy never animates — nobody should wait to
   start reading a contract. */
@keyframes lgRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.lg-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  animation: lgRise 0.9s var(--ease) 0.05s both;
}

.lg-wrap h1 {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  font-weight: 200;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
  animation: lgRise 1s var(--ease) 0.14s both;
}

.lg-updated {
  margin-top: clamp(14px, 1.8vw, 22px);
  padding-bottom: clamp(30px, 4.5vw, 56px);
  border-bottom: 1px solid var(--hair);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  animation: lgRise 1s var(--ease) 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
  .lg-eyebrow, .lg-wrap h1, .lg-updated { animation: none; }
}

/* --- Document body ------------------------------------------------------- */

.lg-wrap h2 {
  margin: clamp(46px, 6vw, 78px) 0 clamp(15px, 1.7vw, 22px);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.24;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}

/* A hairline before each clause makes a 22-clause document scannable without
   numbering anything the reader does not already have. */
.lg-wrap h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: clamp(24px, 3vw, 40px);
  background: var(--hair);
}
.lg-wrap h2:first-of-type::before { display: none; }
.lg-wrap h2:first-of-type { margin-top: clamp(34px, 4.5vw, 58px); }

.lg-wrap p {
  margin: 0 0 clamp(13px, 1.5vw, 18px);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lg-wrap strong { font-weight: 600; color: var(--ink); }

.lg-wrap a:not(.brand):not(.lg-back) {
  color: var(--accent);
  border-bottom: 1px solid rgba(138, 106, 58, 0.34);
  padding-bottom: 1px;
  transition: border-color 0.35s ease;
}
.lg-wrap a:not(.brand):not(.lg-back):hover { border-bottom-color: var(--accent); }

.lg-wrap ul {
  margin: 0 0 clamp(13px, 1.5vw, 18px);
  padding: 0;
  max-width: var(--measure);
  list-style: none;
}
.lg-wrap ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
/* Hairline dashes rather than bullets — the same drawn-line vocabulary the
   site uses for its eyebrows and rules. */
.lg-wrap ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 10px;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
}

/* Sub-clauses: (a), (b), (c) … indented as a set, with the indent doing the
   grouping instead of a box. */
.lg-wrap p.sub {
  margin: 0 0 9px;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--hair);
  color: var(--ink-3);
  font-size: 15.4px;
}
.lg-wrap p.sub + h2 { margin-top: clamp(46px, 6vw, 78px); }

.lg-wrap p.num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.lg-wrap p.plain { color: var(--ink-2); }

.lg-wrap h3 {
  margin: clamp(30px, 3.6vw, 46px) 0 clamp(10px, 1.2vw, 15px);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* The one panel in these documents: the discount clawback formula. Given the
   site's own card treatment — 22px radius, hairline, faint brass wash. */
.lg-wrap .formula {
  margin: clamp(20px, 2.4vw, 30px) 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(138, 106, 58, 0.38);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(138, 106, 58, 0.13) 0%, rgba(138, 106, 58, 0.03) 68%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
}

/* Framing note at the head of the Master Terms. */
.lg-wrap .lg-note {
  margin: clamp(26px, 3.4vw, 42px) 0 clamp(8px, 1vw, 14px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  border: 1px solid var(--hair-strong);
  border-radius: 22px;
  background: rgba(11, 11, 12, 0.022);
  font-size: 15.2px;
  line-height: 1.68;
  color: var(--ink-2);
}
.lg-wrap .lg-note p { margin-bottom: 0; font-size: 15.2px; color: var(--ink-2); }
.lg-wrap .lg-note p + p { margin-top: 12px; }

/* --- Schedules ----------------------------------------------------------- */

/* Schedule titles sit a level above the numbered clauses, so they get the
   site's display voice: large and light, with a mono sub-label in accent. */
.lg-wrap h2.sched {
  margin-top: clamp(64px, 8vw, 104px);
  font-weight: 200;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.04em;
}
.lg-wrap h2.sched span {
  display: block;
  margin-top: clamp(8px, 1vw, 12px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.lg-wrap td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lg-wrap i, .lg-wrap em { font-style: italic; color: var(--ink-4); }
.lg-wrap b { font-weight: 600; color: var(--ink); }

/* --- Tables (Schedule 2 service levels, Schedule 4 sub-processors) -------- */

.lg-wrap table {
  width: 100%;
  margin: clamp(16px, 2vw, 24px) 0 clamp(22px, 2.6vw, 32px);
  border-collapse: collapse;
  font-size: 14.8px;
  line-height: 1.6;
}

/* Narrow screens scroll the table rather than crushing three columns into
   one-word-per-line. */
@media (max-width: 620px) {
  .lg-wrap table { display: block; overflow-x: auto; }
  .lg-wrap td, .lg-wrap th { min-width: 8.5rem; }
}

.lg-wrap th {
  padding: 0 18px 11px 0;
  border-bottom: 1px solid var(--hair-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: left;
  vertical-align: bottom;
}

.lg-wrap td {
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
  color: var(--ink-2);
}
.lg-wrap tr:last-child td { border-bottom: 0; }
.lg-wrap td:last-child, .lg-wrap th:last-child { padding-right: 0; }

/* --- Ordered list -------------------------------------------------------- */

.lg-wrap ol {
  margin: 0 0 clamp(13px, 1.5vw, 18px);
  padding-left: 2.1rem;
  max-width: var(--measure);
  list-style: decimal;
}
.lg-wrap ol li { margin-bottom: 8px; padding-left: 6px; }
/* ::marker keeps the numeral on the text baseline; an absolutely-positioned
   pseudo-element rides high and reads as a superscript. */
.lg-wrap ol li::marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
}

/* --- Footer -------------------------------------------------------------- */

.lg-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 40px);
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(26px, 3.2vw, 40px) var(--gutter) clamp(50px, 6vw, 76px);
  border-top: 1px solid var(--hair);
}

.lg-foot-links {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  font-size: 12px;
  color: var(--ink-4);
}
.lg-foot-links a { transition: color 0.35s ease; }
.lg-foot-links a:hover { color: var(--accent); }
/* The document you are already reading. */
.lg-foot-links a[aria-current="page"] { color: var(--accent); }

.lg-foot-mark {
  --lockup: 19px;
  display: flex;
  align-items: center;
  gap: calc(var(--lockup) * 0.19);
  flex: 0 0 auto;
  color: var(--ink);
}
.lg-foot-mark img { height: var(--lockup); width: auto; display: block; }

.lg-foot-copy {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (max-width: 620px) {
  body { font-size: 15.4px; }
  .lg-foot { grid-template-columns: 1fr; }
  .lg-foot-links { justify-self: start; }
}

/* --- Statutory business information -------------------------------------- */

/* Companies Act 2006 s.82 and the E-Commerce Regulations 2002 require the
   registered name, company number, place of registration, registered office
   and a direct email address to appear on the site itself — a contact form
   does not satisfy it. Set as fine print: present on every page, never
   competing with the document. */
.lg-foot-legal {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.lg-foot-legal p { margin: 0; }
.lg-foot-legal a {
  border-bottom: 1px solid rgba(11, 11, 12, 0.25);
  transition: border-color 0.35s ease, color 0.35s ease;
}
.lg-foot-legal a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lg-foot-legal .lg-foot-copy { margin-top: 7px; }