/* ══════════════════════════════════════════════════════════════════════════
   Landing page (public marketing) — uses the design tokens from app.css
   ══════════════════════════════════════════════════════════════════════════ */
.lp { color:var(--ink); background:var(--surface); }
.lp a { text-decoration:none; }

/* Header */
.lp-header {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,64px); background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.lp-brand { display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:1.12rem; font-weight:500; color:var(--ink); }
.lp-brand strong { font-weight:700; }
.lp-mark { width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center; color:var(--brand-950);
  background:linear-gradient(160deg, var(--brass-400), var(--brass-600)); box-shadow:0 4px 12px -4px rgba(199,145,58,.5); }
.lp-mark svg { width:20px; height:20px; }
.lp-mark-sm { width:26px; height:26px; flex:0 0 26px; border-radius:8px; } .lp-mark-sm svg { width:15px; height:15px; }
.lp-nav { display:flex; align-items:center; gap:22px; }
.lp-nav > a { color:var(--ink-2); font-size:.92rem; font-weight:500; }
.lp-nav > a:hover { color:var(--brand-700); }

/* Buttons */
.lp-btn { display:inline-flex; align-items:center; gap:8px; border-radius:10px; font-weight:600; font-size:.92rem;
  padding:9px 17px; transition:background .15s, box-shadow .15s, transform .05s; border:1px solid transparent; cursor:pointer; }
.lp-btn-lg { padding:13px 24px; font-size:1rem; border-radius:12px; }
.lp-btn-primary { background:var(--brand-700); color:#fff; box-shadow:0 1px 2px rgba(12,32,22,.15); }
.lp-btn-primary:hover { background:var(--brand-800); box-shadow:var(--shadow); }
.lp-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.lp-btn-ghost:hover { background:var(--surface-2); }
.lp-btn-brass { background:linear-gradient(160deg, var(--brass-400), var(--brass-600)); color:var(--brand-950); box-shadow:0 8px 22px -10px rgba(199,145,58,.6); }
.lp-btn-brass:hover { filter:brightness(1.05); }
.lp-btn:active { transform:translateY(1px); }

/* Hero */
.lp-hero { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px); max-width:1200px; margin:0 auto; }
.lp-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-600); background:var(--brass-100); padding:5px 11px; border-radius:999px; margin-bottom:20px; }
.lp-hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.03;
  letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance; }
.lp-lead { font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.6; color:var(--ink-2); max-width:56ch; margin:0 0 28px; }
.lp-cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.lp-note { margin-top:16px; font-size:.86rem; color:var(--muted); }

/* Hero mockup */
.lp-hero-card { display:grid; place-items:center; }
.lp-doc { width:100%; max-width:360px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:var(--shadow-lg); transform:rotate(1.2deg); }
.lp-doc-head { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--brand-900); padding-bottom:12px; margin-bottom:14px; }
.lp-doc-title { font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--brand-900); letter-spacing:.02em; }
.lp-doc-badge { font-family:var(--font-mono); font-size:.66rem; background:var(--success-bg); color:var(--success); padding:4px 9px; border-radius:6px; font-weight:600; }
.lp-doc-row { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:7px; }
.lp-doc-row span { color:var(--muted); } .lp-doc-row b { font-variant-numeric:tabular-nums; }
.lp-doc-line { display:flex; justify-content:space-between; font-size:.85rem; padding:8px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.lp-doc-total { display:flex; justify-content:space-between; font-size:1rem; padding-top:12px; margin-top:4px; border-top:2px solid var(--brand-900); }
.lp-doc-total b { font-variant-numeric:tabular-nums; }
.lp-doc-foot { display:flex; align-items:center; gap:14px; margin-top:18px; }
.lp-qr { width:56px; height:56px; border-radius:8px; background:
  repeating-conic-gradient(var(--brand-950) 0 25%, #fff 0 50%) 0 0/14px 14px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); }
.lp-verify span { display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.lp-verify b { font-family:var(--font-mono); font-size:.82rem; }

/* Trust bar */
.lp-trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; padding:20px;
  background:var(--brand-950); color:#b6c9bf; font-size:.85rem; font-weight:500; }
.lp-trust i { width:4px; height:4px; border-radius:50%; background:var(--brass-500); }

/* Sections */
.lp-section { max-width:1120px; margin:0 auto; padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px); }
.lp-section-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.lp-section-head h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.5rem); letter-spacing:-.015em; margin:0 0 12px; text-wrap:balance; }
.lp-section-head p { font-size:1.06rem; color:var(--muted); margin:0; }

/* Features */
.lp-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.lp-feature { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s; }
.lp-feature:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.lp-fi { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--brass-100); color:var(--brass-600); }
.lp-fi svg { width:24px; height:24px; }
.lp-feature h3 { font-size:1.08rem; font-weight:600; margin:0 0 8px; }
.lp-feature p { font-size:.92rem; color:var(--muted); line-height:1.6; margin:0; }

/* How it works */
.lp-how { background:var(--ground); max-width:none; }
.lp-how > .lp-section-head, .lp-how > .lp-steps { max-width:1120px; margin-left:auto; margin-right:auto; }
.lp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.lp-step { position:relative; padding:26px 24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.lp-step-n { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; font-family:var(--font-display);
  font-weight:700; color:#fff; background:var(--brand-700); margin-bottom:14px; }
.lp-step h3 { font-size:1.08rem; font-weight:600; margin:0 0 8px; }
.lp-step p { font-size:.92rem; color:var(--muted); line-height:1.6; margin:0; }

/* Final CTA */
.lp-final { text-align:center; padding:clamp(56px,8vw,96px) 24px; color:#eaf2ec;
  background:radial-gradient(120% 130% at 50% 0%, var(--brand-700), var(--brand-950)); }
.lp-final h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3.6vw,2.6rem); color:#fff; margin:0 0 12px; letter-spacing:-.015em; }
.lp-final p { font-size:1.08rem; color:#b9cdc2; margin:0 0 28px; }

/* Footer */
.lp-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding:26px clamp(20px,5vw,64px); border-top:1px solid var(--line); background:var(--surface); }
.lp-footer .lp-brand { font-size:1rem; }
.lp-foot-note { font-size:.82rem; color:var(--muted); font-family:var(--font-mono); }
.lp-foot-links a { color:var(--brand-700); font-size:.86rem; font-weight:500; }

/* Pricing */
.lp-pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; align-items:stretch; max-width:1000px; margin:0 auto; }
.lp-plan { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:30px 26px; box-shadow:var(--shadow-sm); }
.lp-plan-featured { border-color:var(--brand-600); box-shadow:0 18px 44px -22px rgba(28,115,82,.5); }
.lp-plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; background:var(--brand-700); color:#fff; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.lp-plan-name { font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--ink); }
.lp-price { display:flex; align-items:baseline; gap:6px; margin:12px 0 4px; }
.lp-amt { font-family:var(--font-display); font-weight:700; font-size:2.6rem; letter-spacing:-.02em; color:var(--ink); }
.lp-per { font-size:.95rem; color:var(--muted); }
.lp-plan-sub { font-size:.9rem; color:var(--muted); margin:0 0 18px; }
.lp-plan-feats { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.lp-plan-feats li { position:relative; padding-left:26px; font-size:.92rem; color:var(--ink-2); }
.lp-plan-feats li::before { content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--success-bg); }
.lp-plan-feats li::after { content:""; position:absolute; left:5px; top:6px; width:5px; height:8px;
  border:solid var(--success); border-width:0 2px 2px 0; transform:rotate(45deg); }
.lp-plan-cta { justify-content:center; width:100%; padding:12px; }
.lp-plan-note { text-align:center; font-size:.84rem; color:var(--muted); margin:26px auto 0; max-width:60ch; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns:1fr; text-align:left; }
  .lp-hero-card { display:none; }
  .lp-nav > a:not(.lp-btn) { display:none; }
}