/* Yourcash launch test site. Palette + type from Yoursafe Brand Guidelines (section 3.1, 3.2, 4.1). */
:root {
  --ys-blue: #00A2E9;
  --ys-blue-darker: #0089D0;
  --ys-dark-blue: #253A79;
  --ys-dark-blue-deep: #0C215F;
  --ys-mint: #C8E8E3;
  --ys-yellow: #FBE896;
  --ys-turquoise: #6FD2BB;   /* brand book; used for completed steps */
  --ys-light-grey: #EFEFEF;
  --ys-ink: #333333;
  --ys-error: #DC3545;
  --font: "Avenir Next", Avenir, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: #fff;
  color: var(--ys-ink);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); border: none; cursor: pointer; background: none; }
img { max-width: 100%; display: block; }

.wave { display: block; width: 100%; height: auto; }

/* ---------- Top notice bar ---------- */
.topbar {
  height: 44px;
  background: var(--ys-dark-blue-deep);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; line-height: 18px;
}
.topbar span { color: #C9D3EC; }
.topbar strong { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  height: 88px;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 64px;
}
.site-header .logo img { width: 126px; height: 31px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px;
  font-weight: 600;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-header {
  height: 48px; padding: 0 28px;
  background: var(--ys-blue); color: #fff; font-size: 16px;
}
.btn-header:hover { background: var(--ys-blue-darker); }
.btn-hero {
  height: 60px; padding: 0 40px;
  background: #fff; color: var(--ys-dark-blue);
  font-size: 19px; font-weight: 700;
}
.btn-hero:hover { box-shadow: 0 8px 24px rgba(12,33,95,.25); }
.btn-card {
  padding: 15px 32px;
  background: var(--ys-blue); color: #fff;
  font-size: 16px; letter-spacing: .01em;
}
.btn-card:hover { background: var(--ys-blue-darker); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ys-blue);
  display: flex; align-items: center; justify-content: center; gap: 72px;
  padding: 88px 64px 132px;
  overflow: hidden;
}
.hero-copy { max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.hero-copy h1 {
  color: #fff; font-size: 58px; line-height: 64px; font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-copy p { color: #EAF7FE; font-size: 20px; line-height: 33px; max-width: 600px; }
.hero-copy p strong { font-weight: 700; }
.hero-visual { flex-shrink: 0; }
.blob-img {
  border: 8px solid #fff;
  border-radius: 42% 58% 62% 38% / 52% 44% 56% 48%;
  box-shadow: 0 14px 34px rgba(12,33,95,.13);
  object-fit: cover;
}
.hero-visual .blob-img { width: 560px; height: 694px; }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; }

/* ---------- How to ---------- */
.howto {
  position: relative;
  background: var(--ys-mint);
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  padding: 24px 64px 142px;
}
.section-title {
  color: var(--ys-dark-blue-deep);
  font-size: 42px; line-height: 48px; font-weight: 700;
  letter-spacing: -0.01em; text-align: center;
}
.howto-cards { display: flex; gap: 28px; width: 100%; max-width: 1040px; }
.howto-card {
  flex: 1; padding: 40px; border-radius: 24px;
  display: flex; flex-direction: column; gap: 22px;
  background: #fff;
}
.howto-card.dark { background: var(--ys-dark-blue); }
.howto-card h3 { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--ys-dark-blue-deep); }
.howto-card.dark h3 { color: #fff; }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step-num {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; background: var(--ys-blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
}
.step p { font-size: 20px; line-height: 30px; color: var(--ys-ink); }
.howto-card.dark .step p { color: #DCE6FF; }
.howto-wave { position: absolute; bottom: 0; left: 0; width: 100%; }

/* ---------- Solutions ---------- */
.solutions {
  background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 80px;
  padding: 80px 64px;
}
.solution-cards { display: flex; flex-direction: column; gap: 80px; width: 100%; max-width: 1120px; }
.solution-card {
  display: flex; align-items: center;
  min-height: 460px;
  background: var(--ys-light-grey);
  border-radius: 120px 56px 140px 72px / 96px 128px 64px 112px;
  overflow: hidden;
}
.solution-copy {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 48px 52px 48px 64px;
}
.solution-copy h3 {
  color: var(--ys-dark-blue-deep);
  font-size: 40px; line-height: 112%; font-weight: 700; letter-spacing: -0.01em;
}
.solution-copy p { font-size: 19px; line-height: 155%; }
.solution-copy .btn { margin-top: 12px; }
.solution-card .blob-img {
  width: 470px; height: 400px; flex-shrink: 0;
  border-width: 10px; margin: 0 24px;
}
.solutions-close { max-width: 1000px; }

/* ---------- Why ---------- */
.why {
  position: relative;
  background: var(--ys-light-grey);
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: 96px 64px;
}
.why-wave-top { position: absolute; top: 0; left: 0; width: 100%; }
.why-cards { display: flex; justify-content: center; gap: 24px; position: relative; }
.why-card {
  width: 420px; height: 440px; padding: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--ys-mint);
  border: 10px solid #fff;
  box-shadow: 0 24px 50px rgba(12,33,95,.12);
}
.why-card:nth-child(1) { border-radius: 42% 58% 62% 38% / 52% 44% 56% 48%; }
.why-card:nth-child(2) { border-radius: 58% 42% 38% 62% / 44% 52% 48% 56%; }
.why-card:nth-child(3) { border-radius: 38% 62% 58% 42% / 48% 56% 44% 52%; }
.why-icon {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.why-card h3 {
  color: var(--ys-dark-blue-deep); text-align: center;
  font-size: 23px; line-height: 29px; font-weight: 700;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--ys-blue);
  display: flex; align-items: center; justify-content: center;
  padding: 72px 64px;
}
.cta-band .wave-top { position: absolute; top: 0; left: 0; width: 100%; }
.cta-band .wave-bottom { position: absolute; bottom: 0; left: 0; width: 100%; }
.cta-band .btn-hero { position: relative; height: 62px; }

/* ---------- Secure ---------- */
.secure {
  background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 80px 64px;
}
.secure h2 { font-size: 34px; line-height: 40px; }
.secure > p {
  max-width: 720px; text-align: center;
  font-size: 19px; line-height: 30px;
}
.secure-features {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 56px; margin-top: 36px; max-width: 1040px;
}
.secure-feature {
  width: 200px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.secure-feature .icon {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--ys-mint);
  display: flex; align-items: center; justify-content: center;
}
.secure-feature h4 { color: var(--ys-dark-blue); font-size: 17px; line-height: 22px; font-weight: 600; }
.secure-feature p { color: #51617D; font-size: 14px; line-height: 145%; }

/* ---------- FAQ ---------- */
.faq {
  position: relative;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  padding: 96px 64px 190px;
}
.faq h2 { font-size: 34px; line-height: 110%; color: var(--ys-dark-blue-deep); font-weight: 700; }
.faq-list { width: 100%; max-width: 900px; border-top: 1px solid #E6E6EA; }
.faq-item { border-bottom: 1px solid #E6E6EA; padding: 28px 4px; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left;
}
.faq-q h3 { font-size: 21px; line-height: 26px; font-weight: 700; color: #000; }
.faq-q svg { flex-shrink: 0; transition: transform .2s ease; }
.faq-item.closed .faq-q svg { transform: rotate(180deg); }
.faq-a { max-width: 760px; margin-top: 16px; font-size: 18px; line-height: 28px; }
.faq-item.closed .faq-a { display: none; }
.faq-wave { position: absolute; bottom: 0; left: 0; width: 100%; }

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--ys-blue);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 104px 64px;
}
.final-cta h2 {
  color: #fff; text-align: center; max-width: 820px;
  font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -0.01em;
}
.final-cta .btn-hero { margin-top: 8px; height: 62px; padding: 0 44px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--ys-dark-blue);
  padding: 128px 64px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  overflow: hidden;
}
.site-footer .footer-legal { width: 100%; max-width: 1440px; align-self: center; }
.footer-wave { position: absolute; top: -1px; left: 0; width: 100%; }
.footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; position: relative; width: 100%; max-width: 1440px; align-self: center; }
.footer-brand { max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.footer-brand img { width: 150px; height: 37px; }
.footer-brand p { color: #fff; font-size: 28px; line-height: 36px; font-weight: 700; }
.footer-links { display: flex; gap: 64px; }
.footer-links .col { display: flex; flex-direction: column; gap: 14px; }
.footer-links a { color: #C9D3EC; font-size: 16px; line-height: 20px; }
.footer-links a:hover { color: #fff; }
.footer-legal {
  border-top: 1px solid #3A4C86; padding-top: 28px;
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.footer-legal p { font-size: 15px; line-height: 150%; color: #E4E9F6; }
.footer-legal p.muted { color: #8A97C4; }
.chat-widget {
  position: absolute; right: 54px; bottom: 37px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.chat-bubble {
  background: #fff; color: var(--ys-dark-blue);
  padding: 12px 18px; border-radius: 16px;
  font-size: 15px; line-height: 18px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(12,33,95,.2);
}
.chat-fab {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ys-blue);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,162,233,.45);
}

/* ---------- Send page ---------- */
.send-hero {
  position: relative;
  background: var(--ys-blue);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 64px 120px;
}
.send-hero h1 {
  color: #fff; font-size: 46px; line-height: 54px; font-weight: 700;
  letter-spacing: -0.01em; text-align: center;
}
.send-hero p { color: #EAF7FE; font-size: 20px; line-height: 31px; text-align: center; max-width: 620px; }
.send-hero .hero-wave { bottom: -1px; }

.send-body {
  background: var(--ys-mint);
  display: flex; flex-direction: column; align-items: center;
  padding: 88px 64px;
  position: relative;
}
.send-card {
  width: 100%; max-width: 640px;
  background: #fff; border-radius: 24px;
  box-shadow: 0 24px 50px rgba(12,33,95,.10);
  padding: 48px 52px;
  display: flex; flex-direction: column; gap: 32px;
  position: relative; z-index: 2;
}
.send-step { display: flex; flex-direction: column; gap: 16px; }
.send-step > label, .send-step-title {
  color: var(--ys-dark-blue-deep);
  font-size: 21px; line-height: 26px; font-weight: 700;
}
.amounts { display: flex; gap: 16px; }
.amount-btn {
  flex: 1; height: 84px;
  border-radius: 50px;
  border: 2px solid #DCE3EE;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.amount-btn .value { font-size: 26px; line-height: 30px; font-weight: 700; color: var(--ys-dark-blue-deep); }
.amount-btn .hint { font-size: 13px; line-height: 16px; color: #51617D; }
.amount-btn:hover { border-color: var(--ys-blue); box-shadow: 0 6px 18px rgba(0,162,233,.15); }
.amount-btn:active { transform: scale(.97); }
.amount-btn.selected {
  border-color: var(--ys-blue);
  background: var(--ys-blue);
}
.amount-btn.selected .value, .amount-btn.selected .hint { color: #fff; }

.custom-amount-wrap { position: relative; display: flex; }
.custom-amount-wrap .euro-prefix {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-size: 17px; font-weight: 600; color: var(--ys-dark-blue);
}
.field .custom-amount-wrap input, .custom-amount-wrap input { width: 100%; padding-left: 46px; }
.custom-amount-wrap input::-webkit-outer-spin-button,
.custom-amount-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom-amount-wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ys-dark-blue); }
.field input {
  height: 56px; padding: 0 22px;
  border: 2px solid #DCE3EE; border-radius: 16px;
  font-family: var(--font); font-size: 17px; color: var(--ys-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { border-color: var(--ys-blue); box-shadow: 0 0 0 4px rgba(0,162,233,.14); }
.field textarea {
  padding: 14px 22px;
  border: 2px solid #DCE3EE; border-radius: 16px;
  font-family: var(--font); font-size: 17px; color: var(--ys-ink);
  outline: none; resize: vertical; min-height: 84px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea:focus { border-color: var(--ys-blue); box-shadow: 0 0 0 4px rgba(0,162,233,.14); }

.order-summary {
  background: #F4F8FB; border-radius: 16px;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.order-summary .row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 21px; }
.order-summary .row .k { color: #51617D; flex-shrink: 0; }
.order-summary .row .v { color: var(--ys-ink); text-align: right; word-break: break-word; }
.order-summary .row.total { border-top: 1px solid #DCE3EE; padding-top: 10px; font-weight: 700; font-size: 17px; }
.order-summary .row.total .k, .order-summary .row.total .v { color: var(--ys-dark-blue-deep); }

.terms-note { font-size: 13px; line-height: 19px; color: #51617D; text-align: center; }
.terms-note a { color: var(--ys-blue); text-decoration: underline; }

.store-badges { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* Google's badge PNG is 646x250 with the mark occupying rows 29 to 221, so
   23.2% of the file is transparent padding. Apple's SVG has none. Sized to one
   height the Google mark came out 12px shorter. Scale it by 250/192 so the two
   visible marks match, and pull the padding back out of the layout. */
.store-badges img { width: auto; display: inline-block; }
.store-badge--ios img { height: 52px; }
.store-badge--android img { height: 67.7px; }
.store-badge--android { margin: -7.85px 0; }
.field .note { font-size: 13px; line-height: 17px; color: #51617D; }
.field.invalid input { border-color: var(--ys-error); }
.field .error { display: none; font-size: 13px; color: var(--ys-error); }
.field.invalid .error { display: block; }

.btn-pay {
  height: 62px; width: 100%;
  background: var(--ys-blue); color: #fff;
  font-size: 19px; font-weight: 700;
}
.btn-pay:hover { background: var(--ys-blue-darker); }
.btn-pay:disabled { opacity: .55; cursor: not-allowed; }
.send-secure-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; line-height: 18px; color: #51617D;
}
.form-error {
  display: none;
  background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.35);
  color: var(--ys-error); border-radius: 12px;
  padding: 12px 16px; font-size: 14px; line-height: 20px;
}
.form-error.visible { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hero-visual .blob-img { width: 420px; height: 520px; }
  .why-cards { flex-wrap: wrap; }
  .solution-card .blob-img { width: 360px; height: 320px; }
}
@media (max-width: 900px) {
  .site-header { padding: 0 24px; }
  .hero { flex-direction: column; padding: 56px 24px 120px; }
  .hero-copy h1 { font-size: 42px; line-height: 48px; }
  .hero-visual .blob-img { width: 320px; height: 400px; }
  .howto { padding: 24px 24px 130px; }
  .howto-cards { flex-direction: column; }
  .solutions, .why, .secure, .faq, .final-cta { padding-left: 24px; padding-right: 24px; }
  .solution-card { flex-direction: column; min-height: 0; border-radius: 64px 40px 72px 48px / 56px 64px 40px 60px; }
  .solution-card:nth-child(2) { flex-direction: column-reverse; }
  .solution-copy { padding: 40px 32px; }
  .solution-copy h3 { font-size: 30px; }
  .solution-card .blob-img { margin: 0 0 32px; }
  .solution-card:nth-child(2) .blob-img { margin: 32px 0 0; }
  .section-title { font-size: 32px; line-height: 38px; }
  .why-card { width: 100%; max-width: 420px; height: auto; min-height: 320px; }
  .footer-main { flex-direction: column; }
  .site-footer { padding: 96px 24px 120px; }
  .final-cta h2 { font-size: 34px; line-height: 42px; }
  .send-hero { padding: 48px 24px 110px; }
  .send-hero h1 { font-size: 34px; line-height: 42px; }
  .send-body { padding: 64px 24px; }
  .send-card { padding: 36px 28px; }
  .amounts { flex-direction: column; }
  .amount-btn { height: 72px; }
}

/* ---------- V2 design language (Sofia round 2, Aug 2026) ---------- */
:root { --yc-navy: #16255B; --yc-body-bg: #F4F8FB; }
.v2-header {
  height: 88px; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 64px;
}
@media (min-width: 1800px) { .v2-header { padding: 0 max(64px, calc((100% - 1680px) / 2)); } }
.v2-logo { display: flex; align-items: center; gap: 10px; }
.v2-logo .mark {
  width: 40px; height: 40px; border-radius: 12px; background: #E5F5FD;
  display: flex; align-items: center; justify-content: center;
}
.v2-logo .word { font-size: 26px; font-weight: 700; color: var(--yc-navy); }
.v2-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px; border-radius: 50px;
  background: var(--yc-navy); color: #fff; font-size: 15px; font-weight: 600;
}
.v2-pill:hover { background: #0C215F; }
.v2-hero {
  position: relative; background: var(--ys-blue);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 64px 120px; gap: 16px;
}
.v2-hero .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: #DCF2FD; }
.v2-hero h1 { color: #fff; font-size: 46px; line-height: 54px; font-weight: 700; }
.v2-hero .sub { color: #EAF7FE; font-size: 19px; line-height: 29px; max-width: 620px; }
.v2-hero .sub strong { font-weight: 700; color: #fff; }
.v2-hero .icon-circle {
  width: 72px; height: 72px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.v2-hero .hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; }
.v2-body {
  background: var(--yc-body-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 64px 88px; gap: 0;
}
.v2-card {
  width: 100%; max-width: 680px; background: #fff; border-radius: 24px;
  box-shadow: 0 20px 44px rgba(22,37,91,.08);
  padding: 48px 52px;
  display: flex; flex-direction: column; gap: 26px;
}
.v2-step-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--yc-navy); }
.v2-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--yc-navy); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700;
}
.v2-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 58px; border-radius: 50px;
  background: var(--yc-navy); color: #fff; font-size: 17px; font-weight: 700;
  transition: background .15s ease, transform .1s ease;
}
.v2-btn:hover { background: #0C215F; }
.v2-btn:active { transform: scale(.98); }
.v2-btn:disabled { opacity: .55; cursor: not-allowed; }
.v2-btn-ghost { background: #fff; color: var(--yc-navy); border: 2px solid #DCE3EE; font-weight: 600; }
.v2-btn-ghost:hover { background: #F4F8FB; }
.v2-listrow { display: flex; align-items: flex-start; gap: 16px; }
.v2-listrow h4 { font-size: 17px; font-weight: 600; color: var(--yc-navy); margin-bottom: 3px; }
.v2-listrow p { font-size: 15px; line-height: 23px; color: #51617D; }
.v2-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; border-radius: 12px; background: var(--yc-body-bg);
  font-size: 13px; line-height: 20px; color: #51617D;
}
.v2-callout {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: 12px; background: #E5F5FD;
  font-size: 14px; line-height: 21px; color: #16255B;
}
.v2-callout a { color: #0077B6; text-decoration: underline; font-weight: 600; }
.link-box {
  width: 100%; padding: 14px 18px; border-radius: 12px;
  background: #EEF2F8; border: 1px solid #DCE3EE;
  font-family: "Courier Prime", monospace; font-size: 14px; color: #3A4A6B;
  word-break: break-all;
}
.copy-row { display: flex; gap: 12px; flex-wrap: wrap; }
.copy-row .v2-btn { width: auto; padding: 0 28px; height: 50px; font-size: 15px; }
.qr-frame {
  width: 200px; height: 200px; border-radius: 20px; background: #E5F5FD;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: 14px;
}
.qr-frame img { width: 100%; height: 100%; border-radius: 8px; }
.v2-split { display: flex; gap: 36px; align-items: flex-start; }
.v2-split .col { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.v2-footer {
  background: var(--yc-navy); color: #fff;
  padding: 72px 64px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.v2-footer .cols { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; width: 100%; max-width: 1440px; align-self: center; }
.v2-footer .links { display: flex; flex-direction: column; gap: 14px; }
.v2-footer .links a { color: #C9D3EC; font-size: 15px; }
.v2-footer .links a:hover { color: #fff; }
.v2-footer .vision { max-width: 560px; font-size: 28px; line-height: 38px; font-weight: 600; }
.v2-footer .vision .lead-in { color: #4FC3F7; }
.v2-footer .legal { border-top: 1px solid #2C3B72; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 1440px; align-self: center; }
.v2-footer .legal p { font-size: 13px; line-height: 20px; color: #8A97C4; }
.send2-layout { display: flex; gap: 56px; align-items: flex-start; width: 100%; max-width: 1180px; }
.send2-layout .form-col { flex: 1; max-width: 640px; }
.send2-photo { flex-shrink: 0; width: 480px; align-self: center; display: flex; justify-content: center; }
.send2-photo img { width: 480px; height: auto; }
.next-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; width: 100%; max-width: 900px; }
.next-steps .ns { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 18px; }
.next-steps .ns h4 { font-size: 17px; font-weight: 700; color: var(--yc-navy); }
.next-steps .ns p { font-size: 14px; line-height: 21px; color: #51617D; }
.next-steps .ns p a { color: #0077B6; font-weight: 600; text-decoration: underline; }
@media (max-width: 1080px) {
  .v2-header { padding: 0 24px; }
  .v2-hero { padding: 44px 24px 110px; }
  .v2-hero h1 { font-size: 32px; line-height: 40px; }
  .v2-body { padding: 16px 24px 72px; }
  .v2-card { padding: 34px 26px; }
  .send2-photo { display: none; }
  .v2-split { flex-direction: column; align-items: center; }
  .next-steps { flex-direction: column; gap: 28px; }
  .v2-footer { padding: 56px 24px 40px; }
  .v2-footer .cols { flex-direction: column; }
  .v2-footer .vision { font-size: 22px; line-height: 31px; }
}

/* ---------- Flow B: progress steps ---------- */
.progress-steps {
  display: flex; align-items: flex-start; justify-content: center;
  width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 0 26px;
}
.progress-steps .ps { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.progress-steps .ps::before {
  content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 3px;
  background: #C9D6E8;
}
.progress-steps .ps:first-child::before { display: none; }
.progress-steps .ps .dot {
  width: 44px; height: 44px; border-radius: 50%; position: relative; z-index: 1;
  background: #E3EAF4; color: #51617D;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.progress-steps .ps .lbl { font-size: 13.5px; font-weight: 600; color: #8A97B8; text-align: center; }
.progress-steps .ps.active .dot { background: var(--yc-navy); color: #fff; }
.progress-steps .ps.active .lbl { color: var(--yc-navy); }
.progress-steps .ps.done .dot { background: #1E8E3E; color: #fff; }
.progress-steps .ps.done .lbl { color: #1E8E3E; }
.progress-steps .ps.done::before, .progress-steps .ps.active::before { background: #1E8E3E; }
.step-panel { display: none; flex-direction: column; gap: 20px; }
.step-panel.open { display: flex; }
.step-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F4F8FB; border-radius: 14px; padding: 14px 18px;
  font-size: 15px; font-weight: 600; color: #16255B;
}
.step-summary .ss-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #1E8E3E; color: #fff;
  font-size: 13px; margin-right: 8px;
}
.step-summary .ss-edit {
  font-size: 14px; font-weight: 600; color: #0077B6; background: none;
  text-decoration: underline;
}

/* ---------- Mobile pass (Aug 2026): tighter type and spacing under 640px ---------- */
@media (max-width: 640px) {
  .v2-header { height: 68px; padding: 0 20px; }
  .v2-logo img { height: 26px !important; }
  .v2-pill { height: 40px; padding: 0 18px; font-size: 14px; }
  .v2-hero { padding: 32px 20px 84px; gap: 12px; }
  .v2-hero h1 { font-size: 27px; line-height: 34px; }
  .v2-hero .sub { font-size: 15.5px; line-height: 24px; }
  .v2-hero .icon-circle { width: 56px; height: 56px; }
  .v2-body { padding: 14px 16px 56px; }
  .v2-card { padding: 26px 20px; gap: 22px; border-radius: 20px; }
  .v2-step-title { font-size: 19px; }
  .v2-num { width: 28px; height: 28px; font-size: 13.5px; }
  .amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .amount-btn { height: 64px; }
  .amount-btn .value { font-size: 21px; line-height: 25px; }
  .v2-btn { height: 54px; font-size: 16px; }
  .field input, .field textarea { font-size: 16px; }
  .progress-steps { padding: 4px 0 20px; }
  .progress-steps .ps .dot { width: 34px; height: 34px; font-size: 14px; }
  .progress-steps .ps::before { top: 16px; height: 2.5px; }
  .progress-steps .ps .lbl { font-size: 11px; }
  .step-summary { font-size: 14px; padding: 12px 14px; }
  .next-steps .ns h4 { font-size: 16px; }
  .store-badge--ios img { height: 44px; }
  .store-badge--android img { height: 57.3px; }
  .store-badge--android { margin: -6.65px 0; }
}

/* ---------- Landing page phone pass (Sep 2026): compact type, CTA on the fold ---------- */
@media (max-width: 640px) {
  .topbar { height: 36px; font-size: 12.5px; gap: 6px; }
  .site-header { height: 64px; padding: 0 18px; }
  .site-header .logo img { width: 100px; height: auto; }
  .btn-header { height: 40px; padding: 0 18px; font-size: 14px; }

  .hero { padding: 32px 20px 96px; gap: 28px; }
  .hero-copy { gap: 16px; }
  .hero-copy h1 { font-size: 30px; line-height: 36px; }
  .hero-copy p { font-size: 15.5px; line-height: 24px; }
  .btn-hero { height: 52px; padding: 0 30px; font-size: 16.5px; }
  .hero-visual .blob-img { width: 220px; height: 275px; border-width: 6px; }

  .section-title { font-size: 25px; line-height: 31px; }
  .howto { padding: 20px 20px 110px; gap: 28px; }
  .howto-card { padding: 26px 22px; gap: 16px; border-radius: 18px; }
  .howto-card h3 { font-size: 19px; line-height: 24px; }
  .step { gap: 12px; }
  .step-num { width: 28px; height: 28px; font-size: 14px; }
  .step p { font-size: 15.5px; line-height: 23px; }

  .solutions { padding: 40px 20px; gap: 36px; }
  .solution-cards { gap: 36px; }
  .solution-copy { padding: 28px 24px; gap: 12px; }
  .solution-copy h3 { font-size: 22px; }
  .solution-copy p { font-size: 15.5px; line-height: 24px; }
  .btn-card { padding: 12px 24px; font-size: 15px; }
  .solution-card .blob-img { width: 240px; height: 210px; border-width: 7px; }
  .solutions-close { font-size: 25px; }

  .why { padding: 56px 20px; gap: 28px; }
  .why-card { padding: 32px 28px; min-height: 0; border-width: 7px; gap: 10px; }
  .why-icon { width: 42px; height: 42px; }
  .why-card h3 { font-size: 17.5px; line-height: 23px; }

  .cta-band { padding: 52px 20px; }
  .cta-band .btn-hero { height: 54px; }

  .secure { padding: 44px 20px; gap: 12px; }
  .secure h2 { font-size: 24px; line-height: 30px; }
  .secure > p { font-size: 15.5px; line-height: 24px; }
  .secure-features { gap: 28px; margin-top: 20px; }
  .secure-feature { width: 140px; gap: 10px; }

  .faq { padding: 44px 20px 110px; }
  .faq h2 { font-size: 24px; }
  .faq-item { padding: 18px 2px; }
  .faq-q h3 { font-size: 16.5px; line-height: 22px; }
  .faq-a { font-size: 15px; line-height: 23px; margin-top: 10px; }

  .final-cta { padding: 52px 20px; gap: 14px; }
  .final-cta h2 { font-size: 25px; line-height: 32px; }
  .final-cta .btn-hero { height: 54px; padding: 0 32px; }

  .site-footer { padding: 72px 20px 90px; }
  .footer-main { gap: 24px; }
}

/* ---------- Language picker (PT | EN) ---------- */
.lang-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.lang-pick a { color: #8A97B8; padding: 4px 2px; }
.lang-pick a:hover { color: var(--yc-navy); }
.lang-pick a.active { color: var(--yc-navy); text-decoration: underline; text-underline-offset: 4px; }
.lang-pick .sep { color: #C9D6E8; }
@media (max-width: 640px) { .lang-pick { font-size: 13px; gap: 6px; } }

/* ---------- Flowguard 3D Secure challenge overlay ----------
   The Flowguard SDK mounts the 3DS challenge to document.body as a
   position:fixed full-viewport overlay with NO z-index of its own. Our
   .send-card sets z-index:2, and a positive z-index always paints above a
   positioned element with z-index:auto, so the card covered the middle of
   the challenge and only its edges showed (Joost, 3 Sep 2026).

   Two selectors on purpose: the class carries a Svelte build hash that can
   change on a version bump, while iframe[name=flowguard-3ds] is part of the
   SDK's own API (it queries that exact selector in isMessageFrom3dsIframe).
   Reported upstream to Radek; this is a local workaround, not the repair. */
.flowguard-3ds-wrapper,
body > div:has(> iframe[name="flowguard-3ds"]) {
  z-index: 2147483000;
}
/* The SDK sizes the challenge iframe in fixed pixels from challengeSize,
   which overflows a narrow phone. */
.flowguard-3ds-wrapper iframe,
body > div:has(> iframe[name="flowguard-3ds"]) iframe {
  max-width: 100vw;
  max-height: 100dvh;
}

/* ==========================================================================
   Landing page, rebuilt from the Paper frame
   "For Remy and Tess - English - CEO feedback" with the hero from
   "Hero 3 refined - Wallets inline below the button" (Joost, 4 Sep 2026).
   Namespaced .lp-* so it cannot collide with the flow's .v2-* language.
   ========================================================================== */

.lp-section-title {
  font-size: 42px; line-height: 48px; font-weight: 700;
  letter-spacing: -.01em; text-align: center; color: var(--ys-dark-blue-deep);
  max-width: 1000px;
}

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.lp-btn:active { transform: scale(.97); }
.lp-btn-white { height: 60px; padding: 0 40px; background: #fff; color: var(--ys-dark-blue); font-size: 19px; }
.lp-btn-white:hover { background: #EAF7FE; }
.lp-btn-blue { height: 52px; padding: 0 32px; background: var(--ys-blue); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.lp-btn-blue:hover { background: var(--ys-blue-darker); }

/* ---------- Header, floating over the hero on a white organic shape ----------
   Everything here is proportional. The earlier version used a fixed 1800px
   shape and a fixed 720px photo, so past about 1400px the nav slid off the
   white and onto the photograph, and the blue half kept growing while the
   image did not. */
.lp-header {
  position: absolute; top: 0; left: 0; width: 100%; height: 94px; z-index: 3;
  display: flex; align-items: center; gap: 30px;
  /* Hugs the edge up to 1440, then tracks the centred content beyond it. */
  padding-inline: max(64px, calc((100% - 1440px) / 2 + 64px));
}
.lp-header-shape {
  position: absolute; top: 0; left: 0; width: 100%;
  /* The curve's deepest point is about 99% of this height. Fixed at 140px it
     dipped over the headline on a phone, so it scales with the viewport. */
  height: clamp(104px, 10vw, 140px);
  pointer-events: none;
}
/* preserveAspectRatio is none in the markup, so the organic edge stretches to
   any width and the white always sits under the whole nav row. */
.lp-header-shape svg { width: 100%; height: 100%; display: block; }
.lp-logo { position: relative; flex-shrink: 0; }
.lp-logo img { width: clamp(160px, 17vw, 250px); height: auto; }
.lp-header-right { position: relative; display: inline-flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0; }
.lp-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px; border-radius: 50px; white-space: nowrap;
  background: var(--ys-dark-blue); color: #fff; font-size: 15px; font-weight: 700;
}
.lp-pill:hover { background: var(--ys-dark-blue-deep); }

/* ---------- Hero ----------
   Two equal columns. The photo is a real grid cell, so it bleeds to the top
   and bottom edges at any width and always occupies exactly half. The copy
   box is capped at 720px and pinned to the inner edge of its column, which
   reproduces the 64px gutter of the 1440px design and centres the content
   on wider screens instead of stranding it at the far left. */
.lp-hero { position: relative; background: var(--ys-blue); overflow: hidden; }
.lp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 874px;
}
.lp-hero-copy {
  display: flex; flex-direction: column; gap: 24px;
  box-sizing: border-box;
  width: min(720px, 100%); justify-self: end;
  padding: 120px 56px 72px 64px;
}
.lp-hero-copy h1 {
  font-size: clamp(38px, 4.2vw, 60px); line-height: 1.07;
  font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.lp-hero-text { display: flex; flex-direction: column; gap: 10px; }
.lp-hero-text .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.36; font-weight: 700; color: #fff; }
.lp-hero-text p { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; color: #fff; }
.lp-hero-photo { position: relative; height: 100%; min-height: 420px; }
.lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; }
.lp-wallets { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; }
.lp-wallets > span { font-size: 17px; line-height: 24px; font-weight: 400; color: #D6EFFB; }
/* The card line carries the weight; the wallet line sits under it as support. */
.lp-wallets > .lp-wallet-card { font-size: 19px; line-height: 26px; font-weight: 700; color: #fff; }
.lp-wave { position: absolute; left: 0; bottom: -1px; width: 100%; }
.lp-wave-hero { z-index: 2; }

/* ---------- From a voucher to money you can spend ---------- */
.lp-hiw {
  position: relative; background: var(--ys-mint);
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  padding: 24px 64px 130px;
}
.lp-hiw-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 960px; text-align: center; }
.lp-hiw-intro h2 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.01em; color: var(--ys-dark-blue); }
.lp-hiw-intro p { font-size: 20px; line-height: 31px; color: var(--ys-dark-blue); }
.lp-hiw-cards { display: flex; gap: 28px; width: 100%; max-width: 1040px; }
.lp-hiw-card {
  flex: 1; background: #fff; border-radius: 24px; padding: 40px;
  display: flex; flex-direction: column; gap: 20px; min-height: 366px;
}
.lp-hiw-card.dark { background: var(--ys-dark-blue); }
.lp-hiw-card h3 { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--ys-dark-blue-deep); }
.lp-hiw-card.dark h3 { color: #fff; }
.lp-step { display: flex; align-items: flex-start; gap: 16px; min-height: 58px; }
.lp-step-num {
  margin-top: calc((29px - 34px) / 2);
  width: 34px; height: 34px; border-radius: 50%; background: var(--ys-blue);
  color: #fff; font-size: 16px; font-weight: 700; line-height: 20px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-step p { font-size: 19px; line-height: 29px; color: var(--ys-ink); }
.lp-hiw-card.dark .lp-step p { color: #DCE6FF; }
.lp-app-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; font-size: 16px; line-height: 24px; color: var(--ys-dark-blue); }
.lp-app-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ys-dark-blue); }
.lp-app-links a:hover { color: var(--ys-blue); }
.lp-wave-hiw { z-index: 1; }

/* ---------- Wherever your day takes you ---------- */
.lp-where {
  background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 80px;
  padding: 80px 64px;
}
.lp-where-list { display: flex; flex-direction: column; gap: 80px; width: 100%; max-width: 1120px; }

/* Section three opened and closed with two big headings floating on white, and
   the closing one collided with the heading of the grey section right below it.
   The eyebrow gives the opening a start, the mint band gives the closing one
   ground of its own and separates the two sections. */
.lp-where-head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-eyebrow {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  background: var(--ys-mint); color: var(--ys-dark-blue-deep);
  font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
}
.lp-where-close {
  width: 100%; max-width: 1120px;
  background: var(--ys-mint); border-radius: 28px;
  padding: 56px 40px;
  display: flex; justify-content: center;
}
.lp-where-close .lp-section-title { max-width: 820px; }
.lp-where-row {
  display: flex; align-items: center;
  background: var(--ys-light-grey); border-radius: 28px; overflow: hidden;
  min-height: 460px;
}
.lp-where-copy { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 40px 52px 40px 64px; }
.lp-where-row.reverse .lp-where-copy { padding: 40px 64px 40px 52px; }
.lp-where-copy h3 { font-size: 40px; line-height: 112%; font-weight: 700; letter-spacing: -.01em; color: var(--ys-dark-blue-deep); }
.lp-where-copy p { font-size: 19px; line-height: 155%; color: var(--ys-ink); }
.lp-where-copy .lp-btn { align-self: flex-start; margin-top: 12px; }
/* The organic blob crop from the Paper design. */
.lp-blob {
  width: 470px; height: 400px; flex-shrink: 0; object-fit: cover;
  margin: 0 24px; border: 10px solid #fff;
  border-radius: 42% 58% 62% 38% / 52% 44% 56% 48%;
  box-shadow: 0 14px 34px rgba(12, 33, 95, .13);
}

/* ---------- Give money. Let them choose. ---------- */
.lp-why {
  background: var(--ys-light-grey);
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: 96px 64px;
}
.lp-why-list { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 860px; }
.lp-why-row { display: flex; align-items: flex-start; gap: 22px; background: #fff; border-radius: 24px; padding: 32px; }
.lp-check {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ys-mint); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-why-row h3 { font-size: 23px; line-height: 30px; font-weight: 700; color: var(--ys-dark-blue-deep); margin-bottom: 8px; }
.lp-why-row p { font-size: 18px; line-height: 28px; color: var(--ys-ink); }

/* ---------- CTA band ---------- */
.lp-band {
  position: relative; background: var(--ys-blue);
  display: flex; align-items: center; justify-content: center;
  padding: 72px 64px;
}
.lp-wave-top { position: absolute; top: 0; left: 0; width: 100%; }
.lp-wave-bottom { position: absolute; bottom: 0; left: 0; width: 100%; }
.lp-band .lp-btn { position: relative; z-index: 1; }

/* ---------- The company behind Yourcash ---------- */
.lp-trust {
  background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 80px 64px;
}
.lp-trust h2 { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; text-align: center; color: var(--ys-dark-blue-deep); }
.lp-trust-body { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; text-align: center; }
.lp-trust-body p { font-size: 19px; line-height: 30px; color: var(--ys-ink); }
.lp-trust-body .strong { font-weight: 700; }
.lp-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 56px; width: 100%; max-width: 1040px; margin-top: 36px; }
.lp-badge { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 200px; text-align: center; }
.lp-badge-icon {
  width: 66px; height: 66px; border-radius: 50%; background: var(--ys-mint); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-badge h4 { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ys-dark-blue); min-height: 44px; }
.lp-badge p { font-size: 14px; line-height: 145%; color: #51617D; }
.lp-trust-links { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.lp-trust-links a { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ys-dark-blue); }
.lp-trust-links a:hover { color: var(--ys-blue); }
.lp-trust-links .sep { margin-left: 20px; padding-left: 24px; border-left: 1px solid #BCC5D7; }

/* ---------- FAQ ---------- */
.lp-faq { position: relative; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 44px; padding-bottom: 96px; }
.lp-faq-titlebar { width: 100%; background: var(--ys-light-grey); display: flex; align-items: center; justify-content: center; padding: 52px 64px; }
.lp-faq-titlebar h2 { font-size: 34px; line-height: 37px; font-weight: 700; text-align: center; color: var(--ys-dark-blue-deep); }
.lp-faq-list { width: 100%; max-width: 900px; border-top: 1px solid #E6E6EA; padding: 0 24px; }
.lp-faq-item { border-bottom: 1px solid #E6E6EA; padding: 28px 4px; }
.lp-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 0; }
.lp-faq-q h3 { font-size: 21px; line-height: 26px; font-weight: 700; color: #000; }
.lp-faq-q svg { flex-shrink: 0; transition: transform .2s ease; }
.lp-faq-a { max-width: 760px; font-size: 18px; line-height: 28px; color: var(--ys-ink); padding-top: 16px; }
.lp-faq-item.closed .lp-faq-a { display: none; }
.lp-faq-item.closed .lp-faq-q svg { transform: rotate(180deg); }
.lp-wave-faq { z-index: 1; }

/* ---------- Final CTA ---------- */
.lp-final {
  background: var(--ys-blue);
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 80px 64px 96px; text-align: center;
}
.lp-final h2 { font-size: 44px; line-height: 54px; font-weight: 700; color: #fff; }

/* ---------- Footer ---------- */
.lp-footer {
  position: relative; background: var(--ys-dark-blue-deep); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
  padding: 80px 64px 56px;
}
.lp-footer-wave { position: absolute; top: -17px; left: 0; width: 100%; height: 17px; overflow: hidden; }
.lp-footer-wave svg { width: 100%; height: 100%; display: block; }
.lp-footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; width: 100%; max-width: 1312px; }
.lp-footer-links { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.lp-footer-logo { width: 210px; height: auto; margin-bottom: 12px; }
.lp-footer-links a { font-size: 19px; line-height: 28px; color: #fff; }
.lp-footer-links a:hover { color: var(--ys-mint); }
.lp-footer-vision { display: flex; flex-direction: column; max-width: 660px; }
.lp-footer-vision span { font-size: 38px; line-height: 50px; font-weight: 500; color: #fff; }
.lp-footer-vision .l1 { color: var(--ys-mint); }
.lp-footer-vision .l3 { font-weight: 700; }
.lp-footer-legal { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1312px; }
.lp-footer-legal p { font-size: 15px; line-height: 24px; color: #fff; }
.lp-footer-legal .muted { color: #A8BBD6; }

/* ---------- Landing responsive ---------- */
@media (max-width: 1180px) {
  .lp-header { padding-inline: 32px; gap: 20px; }
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lp-hero-copy { width: 100%; max-width: 680px; justify-self: start; padding: 130px 32px 48px; }
  .lp-hero-photo { width: 100%; height: 420px; min-height: 0; }
  .lp-hiw-cards { flex-direction: column; }
  .lp-where-row, .lp-where-row.reverse { flex-direction: column; }
  .lp-where-copy, .lp-where-row.reverse .lp-where-copy { padding: 40px 36px; }
  .lp-blob { width: min(470px, 100%); margin: 0 24px 32px; }
  .lp-where-row.reverse .lp-blob { margin: 32px 24px 0; order: 1; }
  .lp-footer-top { flex-direction: column; gap: 40px; }
}
@media (max-width: 900px) {
  .lp-section-title, .lp-hiw-intro h2 { font-size: 30px; line-height: 38px; }
  .lp-where-copy h3 { font-size: 30px; }
  .lp-final h2 { font-size: 32px; line-height: 40px; }
  .lp-footer-vision span { font-size: 28px; line-height: 38px; }
}
@media (max-width: 640px) {
  .lp-header { padding-inline: 20px; }
  /* Logo + language picker + pill do not fit on a phone, and the pill was
     being clipped by the hero's overflow. The hero CTA sits right below it. */
  .lp-header .lp-pill { display: none; }
  .lp-hero-copy { padding: 128px 20px 40px; }
  .lp-hero-photo { height: 320px; }
  /* "Compatível com" is long in Portuguese, so the label takes its own line
     and both wallet logos stay together on the next one. */
  .lp-wallets { height: auto; gap: 3px; }
  .lp-hiw, .lp-where, .lp-why, .lp-trust, .lp-final, .lp-footer { padding-left: 20px; padding-right: 20px; }
  .lp-where-close { padding: 36px 24px; border-radius: 22px; }
  .lp-where-head { gap: 14px; }
  .lp-hiw-card { padding: 28px; }
  .lp-where-copy, .lp-where-row.reverse .lp-where-copy { padding: 32px 24px; }
  .lp-why-row { padding: 24px; }
  .lp-badges { gap: 36px; }
  .lp-faq-list { padding: 0 20px; }
  .lp-faq-q h3 { font-size: 18px; line-height: 24px; }
  .lp-trust-links { flex-direction: column; gap: 20px; }
  .lp-trust-links .sep { margin-left: 0; padding-left: 0; border-left: none; }
}

/* ---------- Claim page (receiver) ---------- */
/* One vertical scale throughout this page: 8 / 12 / 16 / 20 / 24 / 32 / 40. */
.cl-head { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; }
.cl-lang { position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.cl-lang a { color: #51617D; }
.cl-lang a:hover { color: var(--ys-blue); }
.cl-lang-on { color: var(--ys-dark-blue-deep); font-weight: 700; }
.cl-lang-sep { color: #C7CEDC; }
.cl-head img { height: 30px; width: auto; }

.cl-hero { background: var(--ys-mint); padding: 24px 20px 32px; text-align: center; }
.cl-from { font-size: 17px; line-height: 24px; color: var(--ys-dark-blue); }
.cl-amount {
  font-size: 56px; line-height: 64px; font-weight: 700;
  color: var(--ys-dark-blue-deep); letter-spacing: -1px; margin: 4px 0 8px;
}
.cl-sub { font-size: 16px; line-height: 24px; color: var(--ys-dark-blue); }
.cl-wave { display: block; width: 100%; height: 40px; }

.cl-page { max-width: 448px; margin: 0 auto; padding: 0 20px 40px; }

.cl-card { border-radius: 16px; padding: 20px; margin-top: 24px; }
.cl-card--app { background: #fff; border: 2px solid var(--ys-blue); }
.cl-card--new { background: #F7F9FC; border: 1px solid #DDE3EE; }
.cl-card--gone { margin-top: 32px; text-align: center; }
.cl-card-h {
  font-size: 18px; line-height: 26px; font-weight: 700;
  color: var(--ys-dark-blue-deep); margin-bottom: 16px;
}

.cl-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 8px 20px;
  background: var(--ys-blue); color: #fff;
  font-size: 18px; line-height: 24px; font-weight: 700; text-align: center;
  border-radius: 999px;
}
.cl-btn:hover { background: var(--ys-blue-darker); }
.cl-note { font-size: 14px; line-height: 20px; color: #51617D; text-align: center; margin-top: 12px; }

.cl-p { font-size: 16px; line-height: 24px; color: var(--ys-ink); margin-bottom: 20px; }

/* Shown only after the visitor comes back from the store. */
.cl-back {
  display: none;
  background: var(--ys-yellow); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 15px; line-height: 22px; font-weight: 600;
  color: var(--ys-dark-blue-deep); text-align: center;
}
body.cl-returned .cl-back { display: block; }

.cl-or {
  display: flex; align-items: center; gap: 16px;
  margin: 24px 0 0; color: #8A97AE; font-size: 14px; line-height: 20px;
}
.cl-or::before, .cl-or::after { content: ""; flex: 1 1 auto; height: 1px; background: #DDE3EE; }

.cl-badges { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
/* The official artwork is not interchangeable. Apple's badge fills its box;
   Google's PNG carries 29px of transparent padding top and bottom, 23.2% of a
   646x250 file. Rendering both at one height makes Google's look smaller, so
   the Google badge is scaled by 250/192 to put the two visible marks on the
   same 44px height. Measured from the files, not eyeballed. */
.cl-badge { display: block; }
.cl-badge--ios img { height: 44px; width: auto; }
.cl-badge--android img { height: 57px; width: auto; }
/* The 6.6px of transparent padding the scaled Google badge carries above and
   below its mark would otherwise be added to the 12px gap, in both the row and
   the stacked layout. Pull it back so the gap is the gap. */
.cl-badge--android { margin: -6.6px 0; }

.cl-steps { list-style: none; margin: 0; padding: 0; }
.cl-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; font-size: 16px; line-height: 24px; color: var(--ys-ink);
}
.cl-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: var(--ys-dark-blue); color: #fff;
  font-size: 13px; line-height: 24px; font-weight: 700; text-align: center;
}

.cl-foot {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ys-light-grey);
  font-size: 13px; line-height: 20px; color: #51617D; text-align: center;
}

@media (max-width: 359px) {
  .cl-amount { font-size: 48px; line-height: 56px; }
  .cl-badges { flex-direction: column; gap: 12px; }
}

/* ============================================================
   Flow v3 (10 Sep 2026): transactional pages above the fold.

   Measured before this change, on the live site:
     step 1 mobile  359px of chrome before the first input,
                    pay button 45px BELOW the 812px fold, 2.08 screens
     step 1 desktop 592px before the first amount (66% of a 900px
                    viewport), pay button below the fold, card
                    stretched to the full 1440px doing nothing
     step 3 desktop 588px of header + hero before any content

   The cause was a marketing hero sitting on top of pages that a
   buyer, not a visitor, is looking at. These rules remove it and
   spend the freed desktop width on an order summary instead.

   Everything here is ADDITIVE. No existing selector is redefined,
   so index.html and the legacy send.html / send-live.html keep
   exactly the layout they have today.
   ============================================================ */

/* Compact header. Scoped to .flow so only the pages that opt in change. */
.v2-header.flow { height: 60px; padding: 0 40px; border-bottom: 1px solid #EDF0F5; }
.flow-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #51617D; }
.flow-secure svg { flex-shrink: 0; }

/* Step line. Replaces the 81px progress bar with a ~26px one that KEEPS the
   labels. The labels are the point: "Share the link" is the only place the flow
   warns a first-time sender that delivering the link is their job. Dropping
   them to save height was a mistake and cost the one non-obvious signal. */
.yc3-steps { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 540px; }
.yc3-steps .st { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yc3-steps .st .bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: #DCE3EE; }
.yc3-steps .st .lbl { font-size: 11px; line-height: 15px; font-weight: 600; color: #8894AD; }
.yc3-steps .st.done .bar { background: var(--ys-turquoise); }
.yc3-steps .st.done .lbl { color: #51617D; }
.yc3-steps .st.now .bar { background: var(--ys-blue); }
.yc3-steps .st.now .lbl { color: var(--ys-blue); }

/* The outcome line. A buyer who has never used Yourcash does not know they will
   be the one delivering the link, so step 1 says so before they pay. */
.yc3-lede { font-size: 16px; line-height: 24px; color: #51617D; margin-top: -8px; }

/* Two-column body */
/* min-height keeps the footer off the first screen: a buyer on a checkout page
   should see the form and whitespace, not half a footer. Content taller than
   the viewport still grows normally. 60px is the .v2-header.flow height. */
.yc3-body {
  background: #fff; display: flex; justify-content: center;
  padding: 30px 40px 80px;
  min-height: calc(100vh - 60px);
}
.yc3-layout { display: flex; gap: 48px; align-items: flex-start; width: 100%; max-width: 1180px; }
.yc3-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.yc3-aside { width: 352px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.yc3-h1 { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.02em; color: var(--ys-dark-blue-deep); }

/* The form is flat on white here, not a floating card. */
.v2-card.flat { max-width: none; box-shadow: none; padding: 0; border-radius: 0; background: transparent; gap: 20px; }

/* Amount row: four across, half the height of the old 84px buttons. */
.yc3-main .amounts { gap: 10px; }
.yc3-main .amount-btn { height: 64px; border-radius: 16px; gap: 0; }
.yc3-main .amount-btn .value { font-size: 20px; line-height: 24px; }
.yc3-main .amount-btn .hint { font-size: 11px; line-height: 14px; }

/* Order summary */
.yc3-sum { display: flex; flex-direction: column; gap: 13px; padding: 24px; border-radius: 20px; background: var(--ys-light-grey); }
.yc3-sum .cap { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #8894AD; }
.yc3-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.yc3-row .k { font-size: 15px; color: #51617D; }
.yc3-row .v { font-size: 15px; font-weight: 600; color: var(--ys-dark-blue-deep); }
.yc3-rule { height: 1px; background: #DCE3EE; }
.yc3-row.total .k { font-size: 16px; font-weight: 700; color: var(--ys-dark-blue-deep); }
.yc3-row.total .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.yc3-bearer { display: flex; gap: 11px; padding: 16px 18px; border-radius: 16px; background: var(--ys-mint); font-size: 13px; line-height: 19px; color: var(--ys-dark-blue-deep); }
.yc3-bearer svg { flex-shrink: 0; margin-top: 1px; }
.yc3-help { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #0077B6; padding: 0 4px; }
.yc3-help svg { flex-shrink: 0; }

/* Success page */
.yc3-done { display: flex; align-items: center; gap: 14px; padding: 20px 40px; background: var(--ys-mint); }
.yc3-done .tick { width: 38px; height: 38px; border-radius: 50%; background: var(--ys-dark-blue-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.yc3-done h1 { font-size: 24px; line-height: 29px; font-weight: 700; letter-spacing: -.02em; color: var(--ys-dark-blue-deep); }
.yc3-done p { font-size: 14px; line-height: 20px; color: var(--ys-dark-blue-deep); }
.yc3-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; border-radius: 22px; background: var(--ys-light-grey); }
.yc3-qr .cap { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #51617D; text-align: center; }
.yc3-qr .note { font-size: 12px; line-height: 17px; color: #51617D; text-align: center; }

/* Mobile: stack, and pin the primary action so it is never below the fold. */
@media (max-width: 980px) {
  .v2-header.flow { height: 52px; padding: 0 20px; }
  .yc3-body { padding: 16px 20px 56px; min-height: calc(100vh - 52px); }
  /* the help link is the last thing before the footer, give it room */
  .yc3-aside .yc3-help { padding-bottom: 8px; }
  .yc3-layout { flex-direction: column; gap: 18px; }
  .yc3-aside { width: 100%; }
  .yc3-h1 { font-size: 26px; line-height: 31px; }
  /* styles.css:641 turns .amounts into a 2x2 grid below 640px, which costs
     ~70px of height. The flow pages keep a single row instead. */
  .yc3-main .amounts { display: flex; flex-direction: row; gap: 7px; }
  .yc3-main .amount-btn .hint { display: none; }
  .yc3-sum { padding: 16px 18px; gap: 10px; }
  .yc3-bearer { padding: 13px 15px; font-size: 12px; line-height: 18px; }
  .yc3-main .amount-btn { height: 56px; border-radius: 14px; }
  .yc3-main .amount-btn .value { font-size: 16px; line-height: 19px; }
  .yc3-main .amount-btn .hint { font-size: 10px; line-height: 12px; }
  .yc3-done { padding: 16px 20px; gap: 11px; }
  .yc3-done h1 { font-size: 18px; line-height: 22px; }
  .yc3-done p { font-size: 12px; line-height: 17px; }

  /* The existing button sticks rather than being duplicated, so there is
     still exactly one submit control in the form. */
  .yc3-cta {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff;
    margin: 4px -20px 0;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 22px -12px rgba(12,33,95,.28);
  }
}