/* ============================================================
   Landing pages — /for/amazon, /for/meesho, etc.
   Loads after base.css; uses the same tokens and primitives.
   ============================================================ */

/* ---- Nav ---- */
.ln-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.ln-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--s3) }
.ln-nav__inner img { height: 30px; width: auto }

/* ---- Hero ---- */
.ln-hero { padding: calc(var(--nav-h) + var(--s6)) 0 var(--s6) }
.ln-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center }
.ln-hero__copy { display: flex; flex-direction: column; gap: var(--s3) }

.ln-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--pink) }

.ln-hero h1 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink) }

.ln-hero .lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); line-height: 1.6 }

/* Before / After */
.ln-before-after { display: flex; align-items: center; gap: var(--s3) }
.ln-ba__item { flex: 1; text-align: center }
.ln-ba__item img { width: 100%; border-radius: var(--r); aspect-ratio: 3/4; object-fit: cover }
.ln-ba__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s1); text-transform: uppercase; letter-spacing: .06em }
.ln-ba__arrow { font-size: 28px; color: var(--pink); font-weight: 700; flex-shrink: 0 }

/* ---- Sections ---- */
.ln-section { padding: var(--s6) 0 }
.ln-section--tinted { background: var(--bg-2) }
.ln-section h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; letter-spacing: -.025em; text-align: center; margin-bottom: var(--s2) }
.ln-section .lead { text-align: center; color: var(--ink-2); max-width: 64ch; margin: 0 auto var(--s5) }

/* Requirements grid */
.ln-reqs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) }
.ln-req { padding: var(--s4); background: #fff; border-radius: var(--r); border: 1px solid var(--line) }
.ln-req h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--s1); color: var(--ink) }
.ln-req p { font-size: 15px; color: var(--ink-2); line-height: 1.6 }
.ln-section--tinted .ln-req { background: #fff }

/* Steps */
.ln-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); text-align: center }
.ln-step { display: flex; flex-direction: column; align-items: center; gap: var(--s2) }
.ln-step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center }
.ln-step h3 { font-size: 18px; font-weight: 700 }
.ln-step p { font-size: 15px; color: var(--ink-2); line-height: 1.6 }

/* Gallery */
.ln-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3) }
.ln-gallery img { width: 100%; border-radius: var(--r); aspect-ratio: 3/4; object-fit: cover }

/* CTA */
.ln-cta { text-align: center; padding: var(--s5) 0 }
.ln-cta h2 { margin-bottom: var(--s2) }
.ln-cta p { color: var(--ink-2); max-width: 52ch; margin: 0 auto var(--s4); font-size: 17px; line-height: 1.6 }

/* ---- Footer ---- */
.ln-footer { border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s4) }
.ln-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center }
.ln-footer__inner > a img { height: 28px; width: auto }
.ln-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); font-size: 14px }
.ln-footer__links a { color: var(--ink-2); text-decoration: none }
.ln-footer__links a:hover { color: var(--pink) }
.ln-footer__copy { font-size: 13px; color: var(--ink-3) }

/* ---- Responsive ---- */
@media (max-width: 899px) {
  .ln-hero__grid { grid-template-columns: 1fr; gap: var(--s5) }
  .ln-hero__visual { order: -1 }
  .ln-reqs { grid-template-columns: 1fr }
  .ln-steps { grid-template-columns: 1fr; gap: var(--s5) }
  .ln-gallery { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 520px) {
  .ln-before-after { flex-direction: column }
  .ln-ba__arrow { transform: rotate(90deg) }
  .ln-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s2) }
}