/* Movapix / PixelCraft — SEO landing pages (web/lp/*.html)
   Loaded after assets/pc.css; only adds the pieces the app stylesheet does
   not have: a narrow reading column, prompt blocks, comparison tables and
   example figures. Colours, buttons, FAQ and footer come from pc.css. */

.pnav-links a { height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.pnav-links a:hover { color: var(--text); background: var(--surface-2); }
.lp-main { max-width: 860px; margin: 0 auto; padding: 104px 16px 0; }
.lp-main h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.lp-lead { margin-top: 18px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); line-height: 1.65; max-width: 62ch; }
.lp-lead b, .lp-body b { color: var(--text); }
.lp-sec { margin-top: 52px; }
.lp-sec h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; margin-bottom: 14px; text-wrap: balance; }
.lp-sec h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 22px 0 8px; }
.lp-body { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.lp-body p + p { margin-top: 12px; }
.lp-body ul, .lp-body ol { margin: 12px 0 4px 20px; display: grid; gap: 8px; }
.lp-body a { color: var(--accent-text); font-weight: 600; }
.lp-body a:hover { text-decoration: underline; }
.lp-cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* Price mini table + comparison tables */
.lp-table-wrap { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); }
.lp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; min-width: 520px; }
.lp-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.lp-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.lp-table tr.lp-me td { background: var(--accent-soft); }

/* Copy-paste prompt blocks */
.lp-prompt { margin-top: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.lp-prompt .lp-prompt-k { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.lp-prompt code { font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* Example figure (showcase image + the prompt idea behind it) */
.lp-fig { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.lp-fig img { width: 100%; height: auto; }
.lp-fig figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.lp-fig figcaption b { color: var(--text-2); }

/* Limits / honesty box */
.lp-limits { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.lp-limits h3 { margin-top: 0; }
.lp-limits ul { margin-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* Related guides */
.lp-rel { display: grid; gap: 10px; margin-top: 16px; }
.lp-rel a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .18s var(--ease); }
.lp-rel a:hover { border-color: var(--accent); }
.lp-rel b { display: block; font-size: 15.5px; }
.lp-rel span { color: var(--muted); font-size: 14px; }

/* Index page list */
.lp-list { display: grid; gap: 12px; margin-top: 22px; }
.lp-list a { display: block; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .18s var(--ease); }
.lp-list a:hover { border-color: var(--accent); }
.lp-list b { display: block; font-size: 17px; letter-spacing: -.01em; }
.lp-list span { color: var(--muted); font-size: 14.5px; line-height: 1.55; display: block; margin-top: 4px; }

@media (max-width: 720px) {
  .lp-main { padding-top: 88px; }
  .lp-table { min-width: 460px; }
  .lp-cta-row .btn { width: 100%; }
}