/* ==========================================================================
   Creator Alchemist — landing pages (lp.creatoralchemist.io)
   Loaded AFTER site.css. Only LP-specific components live here; all colours,
   fonts and spacing come from the tokens in site.css. Never hard-code a hex.
   ========================================================================== */

/* ---- Page shell --------------------------------------------------------- */
.lp{--lp-max:1120px;}
.lp-container{max-width:var(--lp-max);margin:0 auto;padding:0 clamp(20px,5vw,56px);}

/* ---- Minimal header ----------------------------------------------------- */
.lp-header{padding:22px 0;border-bottom:1px solid var(--line);background:var(--paper-50);}
.lp-header .lp-container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.lp-header img{height:28px;width:auto;}
.lp-header .lp-back{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--ls-label-sm);
  text-transform:uppercase;color:var(--text-meta);}
.lp-header .lp-back:hover{color:var(--coral-700);}

/* ---- Hero --------------------------------------------------------------- */
.lp-hero{padding:clamp(40px,7vw,80px) 0 clamp(36px,6vw,64px);}
.lp-hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,64px);align-items:start;}
.lp-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:var(--ls-display);margin:14px 0 0;}
.lp-hero .lp-sub{font-size:var(--fs-body-lg);color:var(--ink-600);margin-top:16px;max-width:38ch;}

/* ---- Benefit list ------------------------------------------------------- */
.lp-benefits{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.lp-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);color:var(--ink-700);}
.lp-benefits li::before{content:"";flex:none;margin-top:0.55em;width:7px;height:7px;border-radius:999px;
  background:var(--coral-500);box-shadow:0 0 0 3px var(--coral-100);}

/* ---- Form card ---------------------------------------------------------- */
.lp-card{margin-top:32px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:clamp(22px,3.5vw,32px);}
.lp-card h2{font-size:var(--fs-h3);}
.lp-card .lp-card-note{font-size:var(--fs-body-sm);color:var(--ink-500);margin-top:6px;}
.lp-form{display:grid;gap:20px;margin-top:22px;}
.lp-consent{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-body-sm);color:var(--ink-600);
  line-height:var(--lh-snug);cursor:pointer;}
.lp-consent input{flex:none;margin-top:0.2em;width:17px;height:17px;accent-color:var(--coral-600);cursor:pointer;}
.lp-form .btn{width:100%;}
.lp-fineprint{font-family:var(--font-mono);font-size:var(--fs-meta-sm);letter-spacing:var(--ls-label-sm);
  text-transform:uppercase;color:var(--text-meta);margin-top:16px;text-align:center;}
.lp-error{display:none;font-size:var(--fs-body-sm);color:var(--coral-700);background:var(--coral-50);
  border:1px solid var(--coral-300);border-radius:var(--radius-md);padding:10px 13px;}
.lp-error.is-visible{display:block;}
/* honeypot — must stay invisible to humans, visible to bots */
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- Mockup panel ------------------------------------------------------- */
.lp-visual{position:sticky;top:32px;}
.lp-visual-frame{background:var(--paper-0);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);overflow:hidden;}
.lp-visual-frame img,.lp-visual-frame svg{display:block;width:100%;height:auto;}
.lp-visual-cap{font-family:var(--font-mono);font-size:var(--fs-meta-sm);letter-spacing:var(--ls-label-sm);
  text-transform:uppercase;color:var(--text-meta);margin-top:12px;text-align:center;}

/* ---- Inside strip ------------------------------------------------------- */
.lp-inside{background:var(--ca-ink);color:var(--on-ink);padding:clamp(40px,6vw,68px) 0;}
.lp-inside h2{color:var(--on-ink-hi);font-size:var(--fs-h2);margin-top:12px;}
.lp-inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:34px;}
.lp-inside-item h3{color:var(--on-ink-hi);font-size:var(--fs-body-lg);}
.lp-inside-item p{color:var(--on-ink-mute);font-size:var(--fs-body-sm);margin-top:8px;}
.lp-inside-num{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--coral-500);
  letter-spacing:var(--ls-label);display:block;margin-bottom:10px;}

/* ---- Author row --------------------------------------------------------- */
.lp-author{padding:clamp(40px,6vw,68px) 0;}
.lp-author-inner{display:flex;gap:24px;align-items:flex-start;max-width:760px;}
.lp-author p{color:var(--ink-600);margin-top:10px;}

/* ---- Footer ------------------------------------------------------------- */
.lp-footer{border-top:1px solid var(--line);padding:26px 0 40px;}
.lp-footer .lp-container{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--ls-label-sm);
  text-transform:uppercase;color:var(--text-meta);}
.lp-footer a{color:var(--text-meta);}
.lp-footer a:hover{color:var(--coral-700);}

/* ---- Confirmation / thank-you pages ------------------------------------- */
.lp-msg{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(40px,8vw,90px) 0;}
.lp-msg-inner{max-width:560px;}
.lp-msg h1{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-top:16px;}
.lp-msg p{color:var(--ink-600);margin-top:16px;font-size:var(--fs-body-lg);}
.lp-msg .btn{margin-top:30px;}
.lp-msg-mark{width:64px;height:64px;margin:0 auto;border-radius:999px;background:var(--coral-50);
  border:1px solid var(--coral-300);display:flex;align-items:center;justify-content:center;}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr;}
  .lp-visual{position:static;order:-1;}
  .lp-inside-grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .lp-author-inner{flex-direction:column;gap:16px;}
}

/* ---- Encharge embed ------------------------------------------------------
   The Encharge form brings its own background/padding (set in Encharge ->
   Style), so the card wrapper drops its own chrome and just holds it.        */
.lp-card--embed{background:transparent;border:none;box-shadow:none;padding:0;}
.lp-card--embed .encharge-form-embed{max-width:100%;}
.lp-card--embed .encharge-form-embed form{max-width:100%!important;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);}
.lp-card--embed .lp-fineprint{margin-top:14px;}