/* Light sections on the midnight site (redesign, 29 Sep 2026).
   The site stays mostly dark; .section-light marks the few sections whose
   silver artwork is drawn for a light ground. Loaded after experience.css. */

/* Token swap: everything inside reads the light palette. */
.tone-light {
  --bg: #f7f8fc;
  --ink: #131724;
  --muted: #555a6b;
  --purple: #5b4ee0;
  --electric: #5b4ee0;
  --line: #dfe2ec;
  --surface: #ffffff;
  --surface-hover: #f0f1f7;
  --button-ink: #ffffff;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light; /* native checkboxes/selects render light */
}
/* Full-bleed band even when the section is a centred .wrap. */
.section-light {
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}
.tone-light :is(h1, h2, h3, h4, strong) { color: var(--ink); }
.tone-light :is(p, li, dd) { color: var(--muted); }
.tone-light .eyebrow { color: var(--purple); }
.tone-light a:not(.button):not(.nav-cta) { color: var(--purple); }
.tone-light :is(.button, .button-electric, .button-purple) {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.tone-light :is(.button, .button-electric, .button-purple):hover {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
/* Light artwork shown as drawn: no invert/screen blending. */
.tone-light :is(img, [class*="-art"], [class*="-visual"]) { filter: none; mix-blend-mode: normal; opacity: 1; }
/* Cards inside light sections. */
.tone-light :is(.launch-node, .capability-card, .about-roles-list > li, .case-card, .pricing-card) {
  background: var(--surface); border-color: var(--line);
}

/* Home · What we can help arrange: artwork on each card; drop the outer frame so cards don't sit in a box-in-a-box. */
.tone-light .launch-diagram, .tone-light .launch-zone { border: 0; background: none; padding: 0; box-shadow: none; }
.launch-node-art {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; margin-bottom: 18px; background: #eef0f6;
}

/* Home · Pricing: text beside the infinity artwork. */
.home-pricing.section-light { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.home-pricing .button { margin-top: 28px; }
.home-pricing-art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
@media (max-width: 850px) {
  .home-pricing.section-light { grid-template-columns: 1fr; gap: 32px; }
}

/* Home · Audiences: enterprise card as the single accent. */
.audience-card:last-child { background: #c5b8ff; border-color: #c5b8ff; }
.audience-card:last-child :is(h3, p, span) { color: #17142c; }

/* Enquiry form: lavender card on the dark section. */
.form-card.tone-light { background: #efecff; border-color: #efecff; }
.form-card.tone-light :is(input, select, textarea) { background: #fff; color: var(--ink); border-color: #d4d7e3; }

/* Payments · Remittance: text left, chrome-wave artwork right. */
.remittance-band.section-light { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
.remittance-band.section-light > * { grid-column: 1; }
.remittance-band.section-light > .remittance-band-art { grid-column: 2; grid-row: 1 / span 20; align-self: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
@media (max-width: 850px) {
  .remittance-band.section-light { grid-template-columns: 1fr; }
  .remittance-band.section-light > .remittance-band-art { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

/* ---- Mockup parity (canvas "Monfina Redesign — balanced dark") ---- */

/* Big section headings: tight Manrope like the mockup. */
.launch-title, .section-heading h2 { letter-spacing: -0.045em; line-height: 1.08; }
#what-we-arrange .launch-title { font-size: clamp(38px, 4vw, 56px); margin: 0 0 44px; }

/* Home · service cards: image flush on top, roomy body, link at the bottom. */
#what-we-arrange .launch-zone-label { display: none; }
#what-we-arrange .launch-map { gap: 20px; }
.tone-light .launch-node {
  background: #f4f5fa; border: 0; border-radius: 24px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.launch-node-art { border-radius: 0; margin: 0; aspect-ratio: auto; height: 250px; }
.launch-node > :not(.launch-node-art) { margin-inline: 30px; }
.launch-node-id { margin-top: 28px; font-size: 13px; letter-spacing: .02em; color: #6a6f80 !important; }
.launch-node-title { font: 600 26px/1.2 var(--heading); letter-spacing: -0.03em; margin: 12px 30px 12px; }
.launch-node-copy { font-size: 15px; line-height: 1.65; }
.launch-node-link { margin: auto 30px 32px !important; padding-top: 18px; font-size: 15px; font-weight: 600; }

/* Home · audience cards: solid dark surface, rounded, no outline. */
.audience-card { background: #141a2e; border: 1px solid #1f2540; border-radius: 20px; }
.audience-card h3 { font-size: 30px; letter-spacing: -0.04em; }

/* Alternate dark surface band (full-bleed). */
.band-surface { background: #0d1120; box-shadow: 0 0 0 100vmax #0d1120; clip-path: inset(0 -100vmax); }

/* Home · getting started: filled number circles, one top rule, no column dividers. */
#onboarding-steps .journey-grid { border-top: 1px solid #262b44; }
#onboarding-steps .journey-grid article { border: 0; padding: 30px 28px 0 0 !important; }
#onboarding-steps .journey-grid article > span {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #1d2340; color: #f1f0fa; font-size: 13px; letter-spacing: 0;
}
#onboarding-steps .journey-grid article:last-child > span { background: #c5b8ff; color: #17142c; }
#onboarding-steps .journey-grid h3 { font-size: 24px; margin: 14px 0 10px; }

/* Home · enquiry: whole block is one lavender panel, white form inside. */
.contact-panel.tone-light { --bg: #efecff; background: #efecff; border-radius: 32px; padding: 60px; }
.contact-panel .form-card { background: #fff; border-color: #fff; border-radius: 22px; }
.contact-panel :is(input, select, textarea) { background: #fff; color: var(--ink); border-color: #d4d7e3; }
@media (max-width: 850px) { .contact-panel.tone-light { padding: 28px 20px; border-radius: 24px; } }

/* About · entity facts table as a white card. */
.tone-light .about-facts { background: #fff; border: 1px solid var(--line); }
.tone-light .about-facts > div { border-color: var(--line) !important; }
.tone-light .about-facts dt { color: #6a6f80; }
.tone-light .about-facts dd { color: var(--ink); }

@media (max-width: 850px) {
  #onboarding-steps .journey-grid article { padding: 24px 0 !important; border-bottom: 1px solid #262b44; }
}
.home-pricing.section-light h2 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -0.045em; line-height: 1.08; }
.contact-panel :is(.contact-phone, .contact-phone a) { color: var(--ink) !important; }

/* ---- Type: brand guide pairing, Plus Jakarta Sans + DM Mono (brand/brand.yaml) ---- */
h1, h2, h3 { font-weight: 700; }
h1, .future-hero h1, .page-hero h1, .payments-intro h1 { letter-spacing: -0.045em; }
h2 { letter-spacing: -0.035em; }
h3 { letter-spacing: -0.025em; }
/* Small uppercase labels, indices and figures in DM Mono. */
.eyebrow, .launch-node-id, .audience-index, .card-kicker, .capability-category, .capability-number,
.service-index, .hero-proof, .rail-connectivity-label, .journey-grid article > span,
.contact-phone, .footer-meta { font-family: var(--mono); letter-spacing: 0.06em; }
.eyebrow { font-weight: 500; }
.contact-phone { letter-spacing: 0; }

/* ---- Services page: consistent rhythm and clear separation between sections ---- */
#your-world, #b2b-flow, #case-studies, #capabilities, #pricing, #questions { padding-top: 110px !important; padding-bottom: 110px !important; }
#b2b-flow, #case-studies { border-top: 0 !important; }
#b2b-flow .illustrative-note, #b2b-flow > p:last-child { margin-top: 40px; }
#case-studies .section-heading, #capabilities .section-heading, #pricing .section-heading, #questions .section-heading { margin-bottom: 48px; }
#capabilities .section-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
#capabilities h2 { margin-bottom: 24px; }
#capabilities .section-heading p:not(.eyebrow) { max-width: 720px; line-height: 1.7; }
.case-study-teasers article, .case-study-teasers .case-teaser { padding-top: 28px; }
@media (max-width: 850px) {
  #your-world, #b2b-flow, #case-studies, #capabilities, #pricing, #questions { padding-top: 64px !important; padding-bottom: 64px !important; }
  #capabilities .section-heading { grid-template-columns: 1fr; }
}
.tone-light .capability-category { color: #6a6f80; }

/* ---- Links that look like links ---- */
/* Inline links inside running text: underlined. */
main :is(p, li, dd, td) a:not(.button):not(.text-link):not(.light-link):not([class*="card"]):not([class*="phone"]):not([class*="email"]) {
  color: var(--electric); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main :is(p, li, dd, td) a:not(.button):hover { text-decoration-color: currentColor; }
main :is(p, li, dd, td) a:not(.button):not(.text-link):not(.light-link) { border-bottom: 0 !important; }
/* Text links: one underline only (the existing border), never a text-decoration on top. */
:is(.text-link, .light-link, .launch-node-link, .audience-link), :is(.text-link, .light-link, .launch-node-link, .audience-link):hover { text-decoration: none !important; }
/* "Explore … ↗" text links: accent colour, arrow nudges on hover. */
.text-link, .launch-node-link, .audience-link { color: var(--electric) !important; font-weight: 600; }
:is(.text-link, .launch-node-link, .audience-link) span[aria-hidden] { display: inline-block; transition: transform .2s ease; }
:is(.text-link, .launch-node-link, a:hover .audience-link):hover span[aria-hidden],
a:hover > .audience-link span[aria-hidden] { transform: translate(2px, -2px); }
/* Whole-card links: clear hover and focus state. */
:is(.audience-card, .payment-card, .case-study-teaser, .resource-links a) { cursor: pointer; transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
:is(.payment-card, .case-study-teaser):hover { border-color: #c5b8ff; transform: translateY(-3px); }
.audience-card:not(:last-child):hover { border-color: #c5b8ff; }
.resource-links a:hover { color: var(--electric); }
/* Services hero art: fade the bottom edge instead of a hard cut. */
.services-hero-art { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }

/* Services hero: its own artwork (shapes on stepped platforms), not the homepage image. */
.services-hero-art {
  background: url('/assets/services-hero.webp') right center / auto 112% no-repeat;
  opacity: 1; animation: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.services-hero:after { background: linear-gradient(90deg, #080b16f0 0%, #080b16a0 30%, #080b1600 60%); }
@media (max-width: 850px) { .services-hero-art { background-position: 78% 50%; opacity: .7; } }

/* ---- Site-wide vertical rhythm: every content section gets the same breathing room ---- */
:root { --section-space: clamp(64px, 8vw, 110px); }
#who-we-help, .service-faq, #remittance,
#b2b-case-study, #fx-case-study, .case-studies-hero + section, main > section.section.wrap:last-of-type,
.licence-lower {
  padding-top: var(--section-space) !important; padding-bottom: var(--section-space) !important;
}
.page-hero { padding-bottom: clamp(48px, 6vw, 72px) !important; }
.meeting-banner { padding-block: clamp(40px, 5vw, 64px) !important; margin-bottom: var(--section-space) !important; }
.licence-jump { margin-block: 24px; }
/* Headings never sit directly on the content below them. */
main section h2 + :is(p, ul, ol, div, table) { margin-top: 16px; }
.section-heading { margin-bottom: clamp(32px, 4vw, 48px); }

/* ---- Services: hero breathing room + clearly distinguishable sections ---- */
.services-hero { padding: clamp(72px, 9vw, 128px) 0 clamp(88px, 10vw, 140px) !important; }
/* Stronger alternate band so it reads as its own section next to the base dark. */
.band-surface { background: #121830 !important; box-shadow: 0 0 0 100vmax #121830 !important; }
.band-surface :is(.case-flow-step, .pricing-card, .quote-card) { background: #182040; }
/* Hairline divider where two base-dark sections meet. */
#your-world, #questions { border-top: 1px solid #1f2540; }
/* Each section opens with its eyebrow in the accent colour so the start of a block is obvious. */
.services-hero ~ section .eyebrow { color: #c5b8ff; }
.tone-light .eyebrow { color: var(--purple) !important; }

/* ---- Services · B2B payment flow as a timeline ---- */
#b2b-flow .case-flow-layout { display: flex; flex-direction: column; gap: 64px; }
#b2b-flow .case-flow-intro { max-width: 640px; }
#b2b-flow .case-flow { list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
/* The rail: from the first node's centre to the last node's centre. */
#b2b-flow .case-flow::before { content: ''; position: absolute; top: 22px; left: 22px;
  right: calc((100% - 4 * 28px) / 5 - 22px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #3a3f6b, #c5b8ff); }
#b2b-flow .case-flow > li { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 0; border: 0; }
#b2b-flow .case-flow > li > span { position: relative; z-index: 1; width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #121830; border: 1px solid #3a3f6b; color: #c5b8ff; font: 500 13px var(--mono); }
#b2b-flow .case-flow > li:last-child > span { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22; }
#b2b-flow .case-flow h3 { font-size: 20px; margin: 0 0 8px; }
#b2b-flow .case-flow p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
#b2b-flow .case-flow-note { margin-top: 48px; }
@media (max-width: 850px) {
  #b2b-flow .case-flow { grid-template-columns: 1fr; gap: 28px; }
  #b2b-flow .case-flow::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, #3a3f6b, #c5b8ff); }
  #b2b-flow .case-flow > li { flex-direction: row; gap: 18px; }
}
#b2b-flow .case-flow-layout { border: 0 !important; padding: 0 !important; margin: 0 !important; }
#b2b-flow .case-flow-note { border: 0 !important; padding-top: 0 !important; }

/* Services · B2B timeline plays 01→05 on a loop (generated keyframes: node i lights when the fill reaches it). */
#b2b-flow .case-flow::after { content: ''; position: absolute; top: 22px; left: 22px; right: calc((100% - 4 * 28px) / 5 - 22px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #8b7ff5, #c5b8ff); box-shadow: 0 0 12px #c5b8ff99; transform-origin: left; transform: scaleX(0); animation: flow-fill 7s ease-in-out infinite; }
@keyframes flow-fill { 0%, 8% { transform: scaleX(0); opacity: 1; } 56%, 86% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
#b2b-flow .case-flow > li > span { transition: none; }
#b2b-flow .case-flow > li:nth-child(1) > span { animation: flow-node-1 7s ease-in-out infinite; }
@keyframes flow-node-1 { 0%, 7% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } 10%, 88% { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22, 0 0 18px #c5b8ff66; } 94%, 100% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } }
#b2b-flow .case-flow > li:nth-child(2) > span { animation: flow-node-2 7s ease-in-out infinite; }
@keyframes flow-node-2 { 0%, 19% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } 22%, 88% { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22, 0 0 18px #c5b8ff66; } 94%, 100% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } }
#b2b-flow .case-flow > li:nth-child(3) > span { animation: flow-node-3 7s ease-in-out infinite; }
@keyframes flow-node-3 { 0%, 31% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } 34%, 88% { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22, 0 0 18px #c5b8ff66; } 94%, 100% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } }
#b2b-flow .case-flow > li:nth-child(4) > span { animation: flow-node-4 7s ease-in-out infinite; }
@keyframes flow-node-4 { 0%, 43% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } 46%, 88% { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22, 0 0 18px #c5b8ff66; } 94%, 100% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } }
#b2b-flow .case-flow > li:nth-child(5) > span { animation: flow-node-5 7s ease-in-out infinite; }
@keyframes flow-node-5 { 0%, 55% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } 58%, 88% { background: #c5b8ff; border-color: #c5b8ff; color: #17142c; box-shadow: 0 0 0 6px #c5b8ff22, 0 0 18px #c5b8ff66; } 94%, 100% { background: #121830; border-color: #3a3f6b; color: #c5b8ff; box-shadow: none; } }
@media (max-width: 850px) {
  #b2b-flow .case-flow::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: top; animation-name: flow-fill-y; background: linear-gradient(180deg, #8b7ff5, #c5b8ff); }
}
@keyframes flow-fill-y { 0%, 8% { transform: scaleY(0); opacity: 1; } 56%, 86% { transform: scaleY(1); opacity: 1; } 96% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #b2b-flow .case-flow::after { display: none; } #b2b-flow .case-flow > li > span { animation: none !important; } }
.motion-paused #b2b-flow .case-flow::after, .motion-paused #b2b-flow .case-flow > li > span { animation-play-state: paused; }
/* Dim track so the travelling fill reads clearly. */
#b2b-flow .case-flow::before { background: #2a2f55 !important; }
@media (prefers-reduced-motion: reduce) { #b2b-flow .case-flow::before { background: linear-gradient(90deg, #3a3f6b, #c5b8ff) !important; } }

/* ---- Payments page: hero room + each payment type as its own card ---- */
.payments-intro { padding: clamp(72px, 9vw, 128px) 0 clamp(88px, 10vw, 140px) !important; min-height: 0 !important; }
.payments-intro-art { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.payment-detail-layout { padding: var(--section-space) 0 !important; }
.payment-detail {
  background: #121830; border: 1px solid #1f2540 !important; border-radius: 24px;
  padding: clamp(28px, 4vw, 48px) !important; margin-bottom: 20px;
}
.payment-detail:first-child { padding-top: clamp(28px, 4vw, 48px) !important; }
.payment-detail h2 { margin-bottom: 8px; }
.payment-detail .provider-line { color: #c5b8ff; font-weight: 600; margin-bottom: 18px; }
.payment-detail p:not(.eyebrow):not(.provider-line) { max-width: 720px; }
.payment-detail .detail-tags { margin-top: 24px; }
.payment-detail .text-link { margin-top: 20px; display: inline-flex; }
/* Payments hero: its own artwork (Australia payment network map), not the homepage image. */
.payments-intro-art { background: url('/assets/payments-hero.webp') right center / auto 118% no-repeat !important; }
.payments-intro:after { background: linear-gradient(90deg, #080b16f0 0%, #080b16a0 32%, #080b1600 62%) !important; }
@media (max-width: 850px) { .payments-intro-art { background-position: 80% 50% !important; opacity: .6; } }

/* ---- Payments sidebar: active item + sliding marker (driven by site.js) ---- */
.payment-side-nav { position: sticky; border-left: 2px solid #1f2540 !important; }
.payment-side-nav::before {
  content: ''; position: absolute; left: -2px; top: 0; width: 2px; border-radius: 2px;
  height: var(--marker-h, 0); transform: translateY(var(--marker-y, 0));
  background: #c5b8ff; box-shadow: 0 0 10px #c5b8ff88;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1);
}
.payment-side-nav a { transition: color .25s ease, background-color .25s ease, padding-left .25s ease; border-radius: 0 10px 10px 0; }
.payment-side-nav a.is-active { color: #f1f0fa !important; background: #121830; padding-left: 26px; font-weight: 600; }
@media (max-width: 850px) {
  .payment-side-nav { border-left: 0 !important; }
  .payment-side-nav::before { display: none; }
  .payment-side-nav a.is-active { background: #c5b8ff; color: #17142c !important; border-color: #c5b8ff; padding-left: 13px; border-radius: 50px; }
}
@media (prefers-reduced-motion: reduce) { .payment-side-nav::before, .payment-side-nav a { transition: none; } }
.payment-side-nav .payment-nav-jump { border-radius: 0 !important; margin-top: 10px; }
.payment-detail .text-link + .text-link { margin-left: 28px; }

/* ---- About page: consistent section rhythm ---- */
.about-hero { min-height: 0 !important; }
.about-hero-inner { padding-top: clamp(72px, 9vw, 128px) !important; padding-bottom: clamp(88px, 10vw, 140px) !important; }
#company { padding-top: var(--section-space) !important; padding-bottom: var(--section-space) !important; }
#story { padding-bottom: 28px; }   /* inner block already carries ~82px */
#roles { padding-bottom: 60px; }   /* inner block carries ~50px */
#next { padding-bottom: 20px !important; }
/* About hero: its own artwork (Sydney Harbour Bridge in violet light), not the homepage image. */
.about-hero-visual { background: url('/assets/about-hero.webp') right center / auto 112% no-repeat !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; animation: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.about-hero:after { background: linear-gradient(90deg, #080b16f0 0%, #080b16a0 32%, #080b1600 60%) !important; }
@media (max-width: 850px) { .about-hero-visual { background-position: 75% center !important; opacity: .55 !important; } }

/* ---- Reusable full-bleed art hero (FAQ, Contact): image right, dark fade behind the headline ---- */
.art-hero { position: relative; isolation: isolate; overflow: hidden; background: #080b16 !important;
  padding: clamp(72px, 9vw, 128px) 0 clamp(88px, 10vw, 140px) !important; border: 0 !important; }
.art-hero .art-hero-bg { position: absolute; inset: 0; z-index: -2; background-position: right center; background-size: auto 112%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.art-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #080b16f0 0%, #080b16a0 32%, #080b1600 60%); }
.art-hero h1 { font-size: clamp(52px, 6.5vw, 92px); line-height: 1.04; }
.art-hero .lead { max-width: 560px; color: #c3c6d6; }
.art-hero .page-heading-row { display: block; }
.faq-hero .art-hero-bg { background-image: url('/assets/faq-hero.webp'); }
.contact-hero .art-hero-bg { background-image: url('/assets/contact-hero.webp'); }
@media (max-width: 850px) { .art-hero .art-hero-bg { background-position: 75% center; opacity: .5; } }

/* ---- Generated hero art: fade into the page on the left and bottom so no image edge/seam shows ---- */
.services-hero-art, .payments-intro-art, .about-hero-visual, .art-hero .art-hero-bg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 58%, transparent 96%) !important;
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 58%, transparent 96%) !important;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---- FAQ page: topic pills + each topic as its own two-column block ---- */
.faq-toc { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.faq-toc li { color: var(--muted); font-size: 13px; }
.faq-toc a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #2a2f55; border-radius: 100px;
  color: #f1f0fa !important; text-decoration: none !important; font-weight: 500; transition: border-color .2s, background-color .2s; }
.faq-toc a:hover { border-color: #c5b8ff; background: #121830; }
#about-monfina, #payments, #other-scope, #complaints-privacy, #our-operating-model {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 32px 64px;
  padding: 64px 0; border-top: 1px solid #1f2540; scroll-margin-top: 100px; }
:is(#about-monfina, #payments, #other-scope, #complaints-privacy, #our-operating-model) > .section-heading {
  margin: 0 !important; align-self: start; position: sticky; top: 120px; display: block; }
:is(#about-monfina, #payments, #other-scope, #complaints-privacy, #our-operating-model) h2 { font-size: clamp(28px, 3vw, 40px); }
.faq-still { margin-top: 24px; padding: 32px 40px; border-radius: 24px; background: #121830; border: 1px solid #1f2540;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.faq-still p { margin: 0; font-size: 18px; color: #f1f0fa; }
@media (max-width: 850px) {
  #about-monfina, #payments, #other-scope, #complaints-privacy, #our-operating-model { grid-template-columns: 1fr; padding: 48px 0; }
  :is(#about-monfina, #payments, #other-scope, #complaints-privacy, #our-operating-model) > .section-heading { position: static; }
}

/* Footer disclaimer links: clearly links, not body text (accent colour, bold, underline, a little room). */
.footer-legal a {
  color: #c5b8ff; font-weight: 600; margin-inline: 2px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, #c5b8ff 55%, transparent);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-legal a:hover { color: #f1f0fa; text-decoration-color: currentColor; }
.footer-legal a:focus-visible { outline: 2px solid #c5b8ff; outline-offset: 2px; border-radius: 2px; }
/* Footer roles: one block per entity, links on their own line. */
.footer-legal .footer-entity { padding-left: 14px; border-left: 2px solid #2a2f55; margin-bottom: 12px; }
.footer-legal .footer-entity strong { color: #f1f0fa; font-weight: 600; }
.footer-legal .footer-legal-links { margin-top: 4px; }
/* Turnstile check sits above the Send button. */
.lead-form .cf-turnstile { margin: 8px 0 16px; min-height: 65px; }

/* Form result messages inside light form cards (the dark-theme versions were dark-on-dark here). */
.tone-light .form-status { background: #f3f1ff; border-color: #d9d4ff; color: var(--ink); }
.tone-light .form-status.success { background: #e9f7f0; border-color: #9fd3bc; color: #1d4d3c; }
.tone-light .form-status.success :is(strong, span, p) { color: #1d4d3c; }
.tone-light .form-status.success strong { color: #12382b; font-size: 16px; }
.tone-light .form-status.error { background: #fff1f3; border-color: #e5b4bc; color: #8b2940; }
.tone-light .form-status .form-reset { margin-top: 14px; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; color: #12382b; font: 600 14px var(--font); cursor: pointer; }
.form-privacy-note { font-size: 13px; margin: 4px 0 12px; }

/* ---- Complaints page: one block per topic, heading left, readable content right ---- */
.complaints-body { padding-top: var(--section-space) !important; padding-bottom: var(--section-space) !important; }
.cp-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 20px 64px; padding: 48px 0; border-top: 1px solid #1f2540; }
.cp-block:first-child { border-top: 0; padding-top: 0; }
.cp-block h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; margin: 0; align-self: start; position: sticky; top: 120px; }
.cp-body { max-width: 760px; }
.cp-body p, .cp-body li { font-size: 16px; line-height: 1.75; color: var(--muted); }
.cp-body p { margin: 0 0 16px; }
.cp-body strong { color: var(--ink); }
.cp-body ul { margin: 0 0 18px; padding-left: 20px; }
.cp-body li { margin-bottom: 6px; }
.cp-body li::marker { color: #c5b8ff; }
#faq.section { padding-top: var(--section-space) !important; border-top: 1px solid #1f2540; }
@media (max-width: 850px) {
  .cp-block { grid-template-columns: 1fr; padding: 36px 0; }
  .cp-block h2 { position: static; }
}
#faq .section-heading { margin-bottom: 32px; }

/* ---- Client documents page: one card per document ---- */
#documents { padding-top: 24px !important; }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 20px; background: #141a2e; border: 1px solid #1f2540;
  color: #f1f0fa !important; text-decoration: none !important; transition: border-color .25s ease, transform .25s ease; }
.doc-card:hover { border-color: #c5b8ff; transform: translateY(-3px); }
.doc-card strong { font-size: 22px; letter-spacing: -0.02em; color: #f1f0fa; }
.doc-type { font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #c5b8ff; }
.doc-meta { font-size: 14px; color: var(--muted); }
.doc-action { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 15px; color: #c5b8ff; }
@media (max-width: 850px) { .doc-grid { grid-template-columns: 1fr; } }
.complaints-hero .art-hero-bg { background-image: url('/assets/complaints-hero.webp'); }
.docs-hero .art-hero-bg { background-image: url('/assets/documents-hero.webp'); }

/* Enterprise accent card: its link must stay dark on the lavender card. */
.audience-card:last-child .audience-link, .audience-card:last-child .audience-link span { color: #17142c !important; }

/* ---- Mobile spacing ---- */
@media (max-width: 600px) {
  .art-hero, .services-hero, .payments-intro { padding: 48px 0 40px !important; }
  .about-hero-inner { padding-top: 48px !important; padding-bottom: 40px !important; }
  #documents { padding-top: 8px !important; }
  .doc-card { padding: 22px; }
  .cp-block { padding: 28px 0; gap: 12px; }
  .cp-block h2 { font-size: 26px; }
  .cp-body p, .cp-body li { font-size: 15px; }
}