/* Long page (main page since 19 Oct, also /long). Loaded after styles.css, only on this page.
   Matches the Paper file "Yourcash privacy landing tests" (Long artboards, design review 19 Oct). */

/* Hero: the photo already shows the card on the phone, so no sticker. */
[data-version="l"] .hero-photo { height: 440px; background-position: 50% 18%; }
[data-version="l"] h1 { font-size: 32px; line-height: 37px; }
/* Mobile header: logo on the left edge. With space-between the <picture> wrapper counted as an extra flex item and pushed the logo towards the middle. */
.mobile-head { justify-content: flex-start; }
.mobile-head .lang { margin-left: auto; }

/* Intro and benefit index */
.lintro { padding: 28px 20px 8px; }
.lintro .eyebrow { color: var(--blue); margin-bottom: 8px; }
.index { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.idx { display: flex; flex-direction: column; gap: 10px; width: calc(50% - 4px); min-height: 96px; padding: 12px; border-radius: var(--r-md);
  background: var(--tint-2); color: var(--navy); font-weight: 600; font-size: 14px; line-height: 18px; text-decoration: none; }
.idx .ii { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--navy); }
.idx .ii svg { width: 18px; height: 18px; }

/* One benefit per section. Tinted ones alternate with white; each colour change rises in with one wave. */
.benefit { display: flex; flex-direction: column; gap: 34px; padding: 40px 20px; background: #fff; }
.benefit.tint { background: var(--tint); }
.bimg { position: relative; margin: 0; }
.bimg img:not(.bcard) { width: 100%; height: auto; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--r-lg); position: relative; z-index: 1; box-shadow: 0 18px 40px rgba(12,33,95,.14); }
.bimg::before { content: ""; position: absolute; z-index: 0; width: 200px; height: 200px; border-radius: 50%; right: -16px; bottom: -28px; }
.blob-sky::before { background: #BFE7FA; }
.blob-turq::before { background: #BDEBDF; }
.blob-yellow::before { background: #FBE896; }
/* The real card render (same design as on the phone screens), fully inside the photo */
.bcard { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 170px; height: auto; filter: drop-shadow(0 14px 24px rgba(12,33,95,.35)); }
/* Chip that names the point of the photo */
.bchip { position: absolute; z-index: 2; left: 12px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px;
  border-radius: 999px; background: #fff; box-shadow: 0 12px 28px rgba(12,33,95,.18); color: var(--navy); font-weight: 600; font-size: 15px; line-height: 18px; }
.bchip .ci { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; background: var(--turquoise); }
.bchip svg { width: 17px; height: 17px; }

.btext { display: flex; flex-direction: column; gap: 14px; }
.btext .badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--navy); }
.btext .badge svg { width: 24px; height: 24px; }
.btext .eyebrow { color: var(--blue); }
.btext p { margin: 0; font-size: 16px; line-height: 25px; }
.btext .wallets { padding-left: 0; padding-top: 4px; }
.btn-sm { align-self: flex-start; height: 48px; padding: 0 22px; font-size: 16px; margin-top: 6px; }

/* Amount chips */
.amounts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.amounts span { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--navy); background: #fff; }
.amounts span.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Mid-page CTA band */
.band-wrap { padding: 8px 16px 40px; background: #fff; }
.band { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 30px 24px; border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 70%); color: #fff; }
.band::before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,162,233,.5) 0%, rgba(0,162,233,0) 70%); }
.band-copy, .band-cta { position: relative; display: flex; flex-direction: column; gap: 10px; }
.band h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.015em; }
.band p { margin: 0; font-size: 16px; line-height: 25px; color: rgba(255,255,255,.85); }
.btn-white, .btn-white:hover { background: #fff; color: var(--navy); }
.band .micro { color: rgba(255,255,255,.75); width: auto; text-align: center; }

/* How it works, same tint as benefit 6 */
.lhow { background: var(--tint); display: flex; flex-direction: column; gap: 24px; }
.lhow-head { display: flex; flex-direction: column; gap: 10px; }
.lhow-head p { margin: 0; font-size: 16px; line-height: 25px; color: var(--muted); }
.lhow .how-card { background: #fff; border-radius: var(--r-lg); padding: 24px 20px; }
.lhow .wallets { padding-left: 52px; }

/* Honest limits as a full-width navy band */
.llimits { background: var(--navy); color: #fff; display: flex; flex-direction: column; gap: 18px; padding-top: 64px; padding-bottom: 64px; }
.llimits h2.title { color: #fff; }
.llimits ul { list-style: none; margin: 0; padding: 0; }
.llimits li { font-size: 16px; line-height: 24px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); }
.llimits li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.trustfaq { background: #fff; }

/* Sticky CTA on phones */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(12,33,95,.12); border-radius: 20px 20px 0 0;
  transform: translateY(110%); transition: transform .25s ease; }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; height: 52px; }
.sticky-cta .micro { font-size: 12px; line-height: 16px; }

@media (min-width: 900px) {
  [data-version="l"] h1 { font-size: 54px; line-height: 58px; }
  [data-version="l"] .hero-img-desktop { background-position: 50% 30%; }

  .lintro { padding: 24px 80px 8px; }
  .lintro h2.title { font-size: 40px; line-height: 48px; }
  .idx { flex-direction: row; align-items: center; gap: 8px; width: auto; min-height: 0; padding: 9px 14px 9px 9px; border-radius: 999px; font-size: 15px; }
  .idx .ii { width: 26px; height: 26px; border-radius: 13px; }
  .idx .ii svg { width: 15px; height: 15px; }

  .benefit { flex-direction: row; align-items: center; gap: 88px; padding: 64px 80px; }
  .benefit.flip { flex-direction: row-reverse; }
  .bimg { width: 44%; flex-shrink: 0; }
  .bimg img:not(.bcard) { aspect-ratio: 4 / 5; }
  .bimg::before { width: 300px; height: 300px; right: -56px; bottom: -8px; }
  .flip .bimg::before { right: auto; left: -56px; }
  .bcard { right: auto; left: -44px; bottom: 36px; width: 270px; }
  .bchip { left: -36px; bottom: auto; top: 64px; }
  .flip .bchip { left: auto; right: -36px; }
  #b4 .bchip { top: auto; bottom: 150px; }
  .btext { flex: 1; gap: 18px; max-width: 520px; }
  .btext .badge { width: 52px; height: 52px; }
  .btext .badge svg { width: 26px; height: 26px; }
  .btext p { font-size: 18px; line-height: 29px; }

  .band-wrap { padding: 24px 80px 48px; }
  .band { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 56px; }
  .band-copy { max-width: 640px; }
  .band h2 { font-size: 36px; line-height: 44px; }
  .band p { font-size: 18px; line-height: 28px; }
  .band-cta { align-items: center; }

  .lhow { flex-direction: row; gap: 96px; align-items: center; padding: 96px 80px; }
  .lhow-head { width: 420px; flex-shrink: 0; }
  .lhow-head p { font-size: 18px; line-height: 28px; }
  .lhow .how-card { flex: 1; padding: 32px 36px; }

  .llimits { flex-direction: row; gap: 96px; padding: 104px 80px; }
  .llimits .left { width: 420px; flex-shrink: 0; }
  .llimits ul { flex: 1; }
  .llimits li { font-size: 18px; line-height: 28px; padding: 18px 0; }

  .sticky-cta { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .lintro, .benefit, .band-wrap, .lhow, .llimits { padding-left: 48px; padding-right: 48px; }
  .benefit, .lhow, .llimits { gap: 48px; }
  .lhow-head, .llimits .left { width: 34%; }
}

/* ===== Responsive pass (20 Oct): logo left on desktop, full-width bands on large screens, tablet sizing ===== */
/* Desktop nav: same <picture> flex-item issue as the mobile header, so pin the links right instead of space-between. */
.nav-desktop { justify-content: flex-start; }
.nav-desktop .links { margin-left: auto; }

/* Tablets and small screens in portrait (600 to 899px): keep photos and text at a readable width. */
@media (min-width: 600px) and (max-width: 899px) {
  [data-version="l"] .hero-photo { height: 560px; background-position: 50% 22%; }
  .mobile-head { padding-left: 48px; padding-right: 48px; }
  .hero-copy, .lintro, .benefit, .lhow, .llimits, .final, footer { padding-left: 48px; padding-right: 48px; }
  .trustfaq > section { padding-left: 48px; padding-right: 48px; }
  .hero-copy { max-width: 680px; }
  .cta-group .btn { width: auto; align-self: flex-start; }
  .idx { width: calc(33.333% - 6px); }
  .benefit { align-items: center; }
  .bimg { width: 100%; max-width: 560px; }
  .btext { width: 100%; max-width: 560px; }
  .band-wrap { padding-left: 48px; padding-right: 48px; }
  .band { padding: 40px; }
  .final .btn, .band .btn { width: auto; align-self: flex-start; }
  .final .cta-col, .band-cta { align-items: flex-start; }
}

/* Large screens: backgrounds run edge to edge, content stays in a 1280px column. */
@media (min-width: 1200px) {
  .wrap { max-width: none; }
  :root { --gutter: max(80px, calc((100vw - 1280px) / 2)); }
  .nav-desktop, .hero, .lintro, .benefit, .band-wrap, .lhow, .llimits, .final, footer { padding-left: var(--gutter); padding-right: var(--gutter); }
  .trustfaq { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-img-desktop { max-width: 720px; }
}
@media (min-width: 1600px) {
  .hero-img-desktop { height: 680px; }
}
/* Small laptops: tighter gaps, so the circle and the card render stay out of the text column. */
@media (min-width: 900px) and (max-width: 1199px) {
  .bimg::before { width: 220px; height: 220px; right: -24px; }
  .flip .bimg::before { left: -24px; right: auto; }
  .bcard { left: -24px; width: 220px; }
  .bchip { left: -20px; }
  .flip .bchip { right: -20px; left: auto; }
}