/* Shared landing template for both products (editor and /ai). One structure,
   one set of section styles; each page supplies its own accent tokens and
   copy. Loaded after each page's own <style>, so it can rely on these tokens
   being defined there: --accent, --accent-ink, --accent-glow, --accent-wash,
   --accent-shadow, --accent-b40, --accent-b15, plus the shared --surface /
   --card / --rule / --text* and --space-* / --radius-* scales.

   All classes are prefixed `lp-` so they never collide with a page's own
   hero / working-state CSS. Every section below the hero is landing-only:
   the editor hides them with body:not(.is-landing); /ai with body.is-working.
   Both hooks are set here so one file covers both pages. */

.lp{max-width:900px;margin:0 auto;padding:0 var(--space-6)}
.lp-h{font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;text-align:center;margin:0 0 var(--space-2);color:var(--text)}
.lp-sub{color:var(--text-2);text-align:center;max-width:52ch;margin:0 auto var(--space-12);line-height:var(--leading-normal)}

/* Hide the whole marketing stack once a document is open. Both products set
   body.is-working in that state (the editor also toggles it alongside its
   own is-landing bookkeeping), so this one hook covers both pages. */
body.is-working .lp-section{display:none}

/* ── How it works: three steps ── */
.lp-steps{padding:var(--space-24, 80px) 0}
.lp-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.lp-step{text-align:left}
.lp-step .n{width:30px;height:30px;border-radius:50%;background:var(--accent-glow);color:var(--accent-ink);font-size:var(--text-sm);font-weight:700;display:grid;place-items:center;margin-bottom:var(--space-3)}
.lp-step h3{font-size:var(--text-base);font-weight:600;margin:0 0 var(--space-1)}
.lp-step p{color:var(--text-2);font-size:var(--text-sm);margin:0;line-height:var(--leading-snug)}

/* ── Privacy band (tinted, breaks the vertical rhythm) ── */
.lp-trust{background:var(--accent-wash);border-top:1px solid var(--accent-b15);border-bottom:1px solid var(--accent-b15)}
.lp-trust .lp{padding-top:var(--space-16);padding-bottom:var(--space-16);text-align:center}
.lp-trust svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--space-3)}
.lp-trust h2{font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em;margin:0 0 var(--space-2);color:var(--text)}
.lp-trust p{color:var(--text-2);max-width:48ch;margin:0 auto var(--space-4);line-height:var(--leading-normal)}
.lp-trust a{color:var(--accent-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-b40)}
.lp-trust a:hover{border-bottom-color:var(--accent-ink)}

/* ── FAQ ── */
.lp-faq{padding:var(--space-24, 80px) 0}
.lp-faq-list{max-width:640px;margin:0 auto}
.lp-faq-item{padding:var(--space-4) 0;border-top:1px solid var(--rule)}
.lp-faq-item:first-child{border-top:0}
.lp-faq-item h3{font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-1);color:var(--text)}
.lp-faq-item p{color:var(--text-2);font-size:var(--text-sm);margin:0;line-height:var(--leading-snug)}
.lp-faq-item a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent-b40)}

/* ── Stay in touch: release updates + a feedback link ── */
.lp-stay{padding:var(--space-16) 0 var(--space-24, 80px)}
.lp-stay-card{max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center}
.lp-stay-card h3{font-size:var(--text-base);font-weight:600;margin:0 0 var(--space-1);color:var(--text)}
.lp-stay-card p{color:var(--text-2);font-size:var(--text-xs);margin:0 0 var(--space-4)}
.lp-stay-form{display:flex;gap:var(--space-2)}
.lp-stay-form input{flex:1;min-width:0;border:1px solid var(--rule);border-radius:var(--radius-md);padding:10px var(--space-3);font:inherit;font-size:var(--text-sm);background:var(--surface);color:var(--text);min-height:44px}
.lp-stay-form input:focus{outline:2px solid var(--accent-glow);outline-offset:1px;border-color:var(--accent)}
.lp-stay-form button{border:0;border-radius:var(--radius-md);background:var(--accent-ink);color:#fff;font-weight:600;padding:0 var(--space-4);cursor:pointer;white-space:nowrap;min-height:44px}
.lp-stay-form button:hover{filter:brightness(.94)}
.lp-stay-micro{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--text-3);min-height:1.2em}
.lp-stay-micro a,.lp-stay-micro button{color:var(--accent-ink);text-decoration:none;border:0;background:none;font:inherit;font-size:var(--text-xs);cursor:pointer;border-bottom:1px solid var(--accent-b40);padding:0}

/* ChatGPT-GPT call-to-action button, sits inside a .lp-stay-card.
   Matches the Subscribe button's proportions (44px tall via line-height,
   inline-block, side padding only) so the two cards read as siblings. */
.lp-chatgpt-cta{display:inline-block;border-radius:var(--radius-md);background:var(--accent-ink);color:#fff;font-weight:600;font-size:var(--text-sm);padding:0 var(--space-6);line-height:44px;text-decoration:none}
.lp-chatgpt-cta:hover{filter:brightness(.94)}

/* ── Footer ── */
.lp-footer{border-top:1px solid var(--rule)}
.lp-footer .lp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding-top:var(--space-6);padding-bottom:var(--space-6);font-size:var(--text-xs);color:var(--text-3)}
.lp-footer a,.lp-footer button{color:var(--text-3);text-decoration:none;border:0;background:none;font:inherit;font-size:var(--text-xs);cursor:pointer;border-bottom:1px solid rgba(120,113,108,.4);padding:0;display:inline-flex;align-items:center;gap:5px}
.lp-footer a:hover,.lp-footer button:hover{color:var(--text)}
.lp-footer svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-footer .lp-credit{margin-left:auto}
.lp-footer .pwa-install-wrap{position:relative;display:inline-flex}
.lp-footer .pwa-install-pop{top:auto;bottom:calc(100% + 8px);left:0;right:auto}

@media(max-width:720px){
  .lp-steps-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .lp-footer .lp-credit{margin-left:0;flex-basis:100%;margin-top:var(--space-1)}
}
@media(prefers-reduced-motion:reduce){.lp-stay-form button:hover{filter:none}}