/* landing.css — Erudia public marketing page.
   Dark editorial: reuses app.css design tokens + a Fraunces display face.
   De-AI: flat surfaces, one accent, left-aligned/asymmetric hero, editorial
   numbered steps, a bento feature grid, a faint static graph texture. No
   glassmorphism, no drifting blobs, no staggered entrance cascade. */

:root {
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --maxw:1140px;
  --accent-line:color-mix(in srgb,var(--accent) 32%,transparent);
}

html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
.lp { font-family:var(--font-body); color:var(--ink); }
.lp section { position:relative; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---- atmosphere: a faint, static graph-paper grid (math texture) ---- */
.lp-grid { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 30% 0%, #000 30%, transparent 76%);
  mask-image:radial-gradient(ellipse 90% 55% at 30% 0%, #000 30%, transparent 76%); }

/* static math glyphs — quiet texture, no animation */
.lp-glyph { position:absolute; font-family:var(--serif); color:var(--ink-strong); opacity:.04; pointer-events:none; user-select:none; z-index:-1; }

/* ---- nav (solid, flat — no glassmorphism) ---- */
.lp-nav { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; background:var(--bg); border-bottom:1px solid transparent; transition:border-color .3s; }
.lp-nav.stuck { border-bottom-color:var(--line); }
.lp-brand { font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink-strong); letter-spacing:-.01em; text-decoration:none; display:inline-flex; align-items:center; }
.lp-brand::before { content:"∑"; color:var(--accent); margin-right:8px; font-family:var(--font-mono); font-size:19px; }
.lp-nav-actions { display:flex; align-items:center; gap:10px; }

/* shared button styles for the landing (independent of app .btn) — flat fills */
.lp-btn { display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-sm); padding:11px 20px; font-size:14.5px; font-weight:650; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); letter-spacing:-.01em; }
.lp-btn-primary { background:var(--accent); color:var(--accent-ink); }
.lp-btn-primary:hover { background:var(--accent-deep); }
.lp-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.lp-btn-ghost:hover { border-color:var(--ink-soft); color:var(--ink-strong); }
.lp-btn-lg { padding:15px 28px; font-size:16px; }

/* ---- hero: left-aligned, asymmetric ---- */
.lp-hero { padding:84px 0 60px; }
.lp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--radius-sm); padding:6px 12px; }
.lp-hero h1 { font-family:var(--serif); font-weight:600; font-optical-sizing:auto; font-size:clamp(40px,6.6vw,76px); line-height:1.03; letter-spacing:-.03em; color:var(--ink-strong); margin:22px 0 0; max-width:17ch; }
.lp-hero h1 .grad { color:var(--accent); font-style:italic; }
.lp-hero .sub { font-size:clamp(17px,2.1vw,20px); color:var(--ink-soft); max-width:56ch; margin:24px 0 0; line-height:1.55; }
.lp-cta-row { display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; margin-top:34px; }
.lp-hero-note { margin-top:18px; font-size:13px; color:var(--ink-faint); font-family:var(--font-mono); }

/* hero stat band — flat, left-aligned, mono numerals, divided by hairlines */
.lp-stats { display:flex; gap:0; justify-content:flex-start; flex-wrap:wrap; margin-top:56px; border-top:1px solid var(--line); padding-top:26px; }
.lp-stat { padding:0 34px; border-right:1px solid var(--line); }
.lp-stat:first-child { padding-left:0; }
.lp-stat:last-child { border-right:0; }
.lp-stat b { display:block; font-family:var(--font-mono); font-size:34px; font-weight:500; color:var(--ink-strong); line-height:1; letter-spacing:-.02em; }
.lp-stat span { display:block; margin-top:7px; font-size:12.5px; color:var(--ink-soft); }

/* ---- section scaffolding (left-aligned by default) ---- */
.lp-sec { padding:88px 0; }
.lp-kicker { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.lp-sec h2 { font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.2vw,48px); line-height:1.08; letter-spacing:-.025em; color:var(--ink-strong); margin:14px 0 0; max-width:22ch; }
.lp-sec .lead { font-size:18px; color:var(--ink-soft); max-width:58ch; margin:18px 0 0; line-height:1.6; }
.lp-sec.center { text-align:center; }
.lp-sec.center h2, .lp-sec.center .lead { margin-left:auto; margin-right:auto; }

/* insight band — a centered pull-quote focal moment */
.lp-insight { text-align:center; padding:96px 0; }
.lp-insight blockquote { font-family:var(--serif); font-size:clamp(26px,3.8vw,42px); line-height:1.25; letter-spacing:-.02em; color:var(--ink-strong); max-width:20ch; margin:0 auto; font-weight:500; }
.lp-insight blockquote em { font-style:italic; color:var(--accent); }
.lp-insight p { margin-top:24px; color:var(--ink-soft); font-size:18px; max-width:54ch; margin-left:auto; margin-right:auto; line-height:1.6; }

/* steps — editorial numbered list, no card boxes (breaks the 3-card grid) */
.lp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:50px; }
.lp-step::before { content:""; display:block; width:38px; height:2px; background:var(--accent); margin-bottom:22px; }
.lp-step .num { font-family:var(--serif); font-size:46px; font-weight:600; color:var(--accent); line-height:1; display:block; }
.lp-step h3 { font-size:19px; margin:14px 0 9px; color:var(--ink-strong); letter-spacing:-.01em; }
.lp-step p { color:var(--ink-soft); font-size:14.5px; line-height:1.62; margin:0; }
.lp-step em { font-style:italic; color:var(--ink); }

/* breadth tag cloud */
.lp-cloud { display:flex; flex-wrap:wrap; gap:9px; margin-top:38px; }
.lp-tag { font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); border:1px solid var(--line-strong); background:var(--surface-1); border-radius:var(--radius-sm); padding:7px 14px; transition:color .14s var(--ease), border-color .14s var(--ease); }
.lp-tag:hover { color:var(--accent); border-color:var(--accent-line); }
.lp-tag.adv { border-style:dashed; }
.lp-tag.adv:hover { color:var(--accent); }

/* feature grid — bento: two wide cards bookend two paired rows */
.lp-feat { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:46px; }
.lp-card { padding:24px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-1); transition:border-color .18s var(--ease); }
.lp-card:hover { border-color:var(--line-strong); }
.lp-card .fi { color:var(--accent); display:inline-flex; }
.lp-card .fi svg { width:26px; height:26px; }
.lp-card h3 { font-size:16.5px; margin:12px 0 7px; color:var(--ink-strong); letter-spacing:-.01em; }
.lp-card p { color:var(--ink-soft); font-size:14px; line-height:1.55; margin:0; }
/* wide featured cards: full width, horizontal (icon left, text right), raised */
.lp-card--wide { grid-column:1 / -1; display:flex; gap:22px; align-items:flex-start; background:var(--surface-2); padding:26px; }
.lp-card--wide .fi { flex:0 0 auto; margin-top:2px; }
.lp-card--wide .fi svg { width:30px; height:30px; }
.lp-card--wide .lp-card-body { min-width:0; }
.lp-card--wide h3 { margin-top:0; font-size:18px; }
.lp-card--wide p { font-size:14.5px; max-width:62ch; }

/* pricing */
.lp-price { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:760px; margin:46px auto 0; }
.lp-plan { padding:30px 28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-1); text-align:left; }
.lp-plan.feat { border-color:var(--accent-line); background:var(--surface-2); position:relative; }
.lp-plan .tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.lp-plan.feat .tag { color:var(--accent); }
.lp-plan .price { font-family:var(--serif); font-size:46px; font-weight:600; color:var(--ink-strong); margin:10px 0 2px; line-height:1; }
.lp-plan .price small { font-family:var(--font-mono); font-size:14px; color:var(--ink-soft); font-weight:400; }
.lp-plan ul { list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:10px; }
.lp-plan li { font-size:14.5px; color:var(--ink); display:flex; gap:10px; align-items:flex-start; }
.lp-plan li::before { content:"→"; color:var(--accent); font-family:var(--font-mono); }
.lp-plan .lp-btn { width:100%; justify-content:center; }

/* final cta */
.lp-final { text-align:center; padding:112px 0; }
.lp-final h2 { font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.03em; line-height:1.05; color:var(--ink-strong); max-width:18ch; margin:0 auto; }
.lp-final h2 .grad { color:var(--accent); font-style:italic; }
.lp-final p { color:var(--ink-soft); font-size:18px; margin:22px auto 34px; max-width:50ch; line-height:1.6; }

/* footer */
.lp-foot { border-top:1px solid var(--line); padding:34px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; color:var(--ink-faint); font-size:13px; }
.lp-foot a { color:var(--ink-soft); text-decoration:none; }
.lp-foot a:hover { color:var(--accent); }

/* ---- motion: a single subtle reveal, no staggered cascade ---- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.hero-anim > * { opacity:0; animation:heroUp .6s var(--ease) forwards; }
@keyframes heroUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-anim > * { opacity:1; animation:none; }
}

/* ---- responsive ---- */
@media (max-width:860px) {
  .lp-steps { grid-template-columns:1fr; gap:30px; }
  .lp-feat { grid-template-columns:1fr; }
  .lp-card--wide { flex-direction:column; gap:12px; }
  .lp-price { grid-template-columns:1fr; }
  .lp-sec { padding:64px 0; }
}
@media (max-width:560px) {
  .wrap { padding:0 18px; }
  .lp-nav-actions .lp-btn-ghost { display:none; }
  .lp-hero { padding:52px 0 44px; }
  .lp-stat { padding:0 18px; }
  .lp-stat:first-child { padding-left:0; }
  .lp-stat b { font-size:27px; }
}