/* ============================================================
   The landing pages (internal/pages/landing): /nl/jong-en-out and
   /{lang}/sports-clubs, on top of start.css, community.css (the wr-*
   sections) and creatorsmp.css (the setup card beside the /start
   door). The hero is the dark card with two real iOS captures from
   the help desk, in the features page's phone frame.
   ============================================================ */

/* ---- Hero: copy on the left, two phones on the right ---- */
.ld-hero-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center;padding:56px 52px 46px}
.ld-hero-copy h1{font-size:clamp(38px,4.6vw,60px);line-height:1.02;margin:0 0 18px;color:#fff}
.ld-hero-copy h1 span{display:block;color:#7fd3a0}
.ld-hero-actions{justify-content:flex-start}
.ld-stage{margin:0}
.ld-phones{display:flex;justify-content:center;align-items:flex-start;gap:20px}
.ld-phones .ld-phone{width:min(230px,46%)}
.ld-phones .ld-phone:nth-child(2){margin-top:48px}
.ld-caption{margin:20px auto 0;text-align:center;max-width:460px}

.ld-phone{padding:2.4%;border-radius:15.5%/7.1%;background:#0c0e11;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 28px 60px -22px rgba(0,0,0,.6),0 10px 24px -12px rgba(0,0,0,.4)}
.ld-phone img{display:block;width:100%;height:auto;border-radius:13.4%/6.2%;background:#16181c}

/* ---- A band of points beside one capture ---- */
.ld-split{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:52px;align-items:center;max-width:1000px;margin:0 auto}
.ld-split--flip{grid-template-columns:minmax(0,1fr) minmax(0,280px)}
.ld-split--flip .ld-split-shot{order:2}
.ld-split-shot{margin:0;display:flex;justify-content:center}
.ld-split-shot .ld-phone{width:100%;max-width:280px;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 28px 60px -22px rgba(22,34,24,.55),0 10px 24px -12px rgba(22,34,24,.35)}
.ld-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
.ld-point h3{font-size:17px;font-weight:700;margin:0 0 6px;color:var(--w-ink)}
.ld-point p{font-size:14.5px;line-height:1.55;color:var(--w-mut);margin:0}
.ld-point b,.ld-section .wr-feature b{color:var(--w-ink);font-weight:600}
.ld-point a,.ld-section .wr-feature a,.ld-note a{color:var(--w-ink);text-decoration:underline;text-underline-offset:2px}

.ld-note{max-width:760px;margin:28px auto 0;padding:14px 18px;border-radius:14px;background:var(--w-inset);font-size:14.5px;line-height:1.55;color:var(--w-ink3);text-align:center}

@media (max-width:980px){
  .ld-hero-card{grid-template-columns:minmax(0,1fr);gap:34px;padding:40px 28px 32px}
  .ld-hero-copy{text-align:center}
  .ld-hero-copy .wr-lead{margin-left:auto;margin-right:auto}
  .ld-hero-copy .wr-chips,.ld-hero-actions{justify-content:center}
  .ld-split,.ld-split--flip{grid-template-columns:minmax(0,1fr);gap:30px;max-width:620px}
  .ld-split--flip .ld-split-shot{order:0}
  .ld-split-shot .ld-phone{max-width:240px}
}

@media (max-width:640px){
  .ld-hero-card{padding:30px 16px 24px}
  .ld-phones{gap:12px}
  .ld-phones .ld-phone:nth-child(2){margin-top:32px}
  .ld-points{grid-template-columns:minmax(0,1fr);gap:22px}
  .ld-note{text-align:left}
}