/* Studio landing pages (Q588): landing/<slug>.json, rendered by tools/landing/landing.cjs. Page-only rules on top of
   base.css, in its own tokens: the hero and closing call to action are the shared .phero band, the questions are the
   shared .faq list. build.js publishes this file only while at least one landing page is built. */
.lp-hero { padding: 120px 0 88px; }
.lp-hero h1, .lp-hero h2 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.04em; max-width: 20ch; margin: 14px auto 0; color: #fff; }
.lp-points { list-style: none; padding: 0; margin: 22px 0 0; font-size: 15.5px; }
.lp-points li { display: inline-flex; gap: 8px; align-items: center; }
.lp-hero .lp-photo { margin: 44px auto 0; max-width: 960px; }
.lp-hero .lp-photo img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.lp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-s); }
.lp-card h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.lp-card p { color: var(--muted); margin: 10px 0 0; font-size: 16px; }

.lp-service { background: var(--surface); }
.lp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lp-split h2, .lp-faq h2 { margin-top: 10px; }
.lp-body p { margin: 0 0 18px; color: var(--muted); max-width: 680px; }
.lp-links { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-links a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--green); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s; }
.lp-links a:hover { background: var(--gold-light); }
.lp-links svg { width: 16px; height: 16px; }
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 56px; }
.lp-photo { margin: 0; }
.lp-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }

.lp-quote { max-width: 860px; margin: 0 auto; padding: 44px 48px; background: var(--surface); border-radius: var(--radius); text-align: center; }
.lp-quote::before { content: "\201C"; display: block; font: 800 72px/.6 Manrope, "Segoe UI", sans-serif; color: var(--gold); margin-bottom: 10px; }
.lp-quote blockquote { margin: 0; }
.lp-quote p { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.lp-quote figcaption { margin-top: 18px; color: var(--muted); font-weight: 700; font-size: 15px; }

.lp-cta { padding: 96px 0; }
.lp-cta h2 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.035em; margin: 0 auto; max-width: 18ch; }

@media (max-width: 900px) {
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .lp-hero { padding: 88px 0 64px; }
  .lp-quote { padding: 32px 22px; }
  .lp-card { padding: 22px; }
}