/* Shared landing-page styles — used by all /<type>-qr-code-generator pages
   Inherits app.css design tokens (--primary, --text, --border, etc.) */

body.lp-body { background: var(--white); color: var(--text); font-family: Inter, system-ui, sans-serif; margin: 0; }

.lp-main { max-width: 880px; margin: 0 auto; padding: 56px 24px 32px; }

/* Hero */
.lp-hero { text-align: center; padding: 8px 0 16px; }
.lp-hero h1 { font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--text); }
.lp-hero p { font-size: 18px; line-height: 1.7; color: #475569; max-width: 720px; margin: 0 auto 24px; }
.lp-hero .btn { font-size: 16px; padding: 14px 28px; }
@media (max-width: 640px) { .lp-hero h1 { font-size: 30px; } .lp-hero p { font-size: 16px; } }

/* Body sections */
.lp-main section { margin: 56px 0; }
.lp-main section h2 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--text); }
.lp-main section p { font-size: 16px; line-height: 1.75; color: #334155; margin: 0 0 16px; }
.lp-main section ul, .lp-main section ol { padding-left: 22px; margin: 12px 0 20px; }
.lp-main section li { font-size: 16px; line-height: 1.75; color: #334155; margin-bottom: 10px; }
.lp-main section li strong { color: var(--text); }
.lp-main section a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.lp-main section a:not(.btn):hover { text-decoration: none; }
.lp-main section a.btn { text-decoration: none; }
.lp-main code { background: #F1F5F9; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 90%; color: #3C50E0; word-break: break-all; }

/* FAQ accordion */
.lp-faq details { border: 1px solid var(--border); border-radius: 10px; background: var(--white); margin-bottom: 10px; transition: border-color .15s; }
.lp-faq details[open] { border-color: var(--primary); }
.lp-faq summary { padding: 16px 20px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--text); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--text-muted); flex-shrink: 0; line-height: 1; }
.lp-faq details[open] summary::after { content: '−'; color: var(--primary); }
.lp-faq .faq-a { padding: 0 20px 18px; font-size: 15px; line-height: 1.7; color: #475569; }

/* Closing CTA */
.lp-main section.lp-closing-cta { text-align: center; padding: 48px 32px; background: #1C2434; color: #fff; border-radius: 16px; margin: 64px 0 16px; }
.lp-main section.lp-closing-cta h2 { color: #fff; font-size: 28px; margin: 0 0 14px; }
.lp-main section.lp-closing-cta p { color: #CBD5E1; font-size: 16px; line-height: 1.7; max-width: 640px; margin: 0 auto 24px; }
.lp-main section.lp-closing-cta .btn { font-size: 16px; padding: 14px 28px; }
.lp-main section.lp-closing-cta a:not(.btn) { color: #93C5FD; }
.lp-main section.lp-closing-cta a:not(.btn):hover { color: #BFDBFE; }

/* Footer (mirrors app site-footer) */
.site-footer { border-top: 1px solid var(--border); background: var(--white); margin-top: 40px; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.site-footer-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; }
.site-footer-links a:hover { color: var(--primary); }
@media (max-width: 640px) { .site-footer-inner { flex-direction: column; align-items: flex-start; } }