/* ============================================================
   Lexora AI — public landing, REBUILT to redesign mockup 1b
   ("Clean productivity"). Full-bleed ruled sections: 68px nav →
   split hero (1.1fr/.9fr, constellation right) → stat row →
   features → popular tools → pricing → privacy banner → footer.
   Rules do the organizing: 2px --line-strong between sections,
   1px --line inside grids. Radius 0. No shadows, no gradients.
   ============================================================ */

#landing{position:fixed; inset:0; z-index:150; overflow-y:auto;
  background:var(--bg, #111110); color:var(--text, #f5f3ee);
  -webkit-overflow-scrolling:touch;
  font-family:var(--font-ui, Inter, sans-serif)}
#landing .ldWrap{max-width:1360px; margin:0 auto; padding:0;
  border-left:1px solid var(--line, #2c2a26); border-right:1px solid var(--line, #2c2a26)}

/* ---------- nav: 68px, 2px rule below ---------- */
#landing .ldTop{display:flex; align-items:center; gap:28px; height:68px;
  padding:0 56px; border-bottom:2px solid var(--line-strong, #3a3833)}
#landing .ldBrand{font-family:var(--font-display, Georgia, serif); font-size:19px;
  font-weight:600; display:flex; align-items:center; gap:11px}
#landing .ldBrand > span:last-child{color:var(--accent)}
#landing .ldMark{width:26px; height:26px; background:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; flex:none}
#landing .ldMark span{width:8px; height:8px; background:var(--bg, #111110); display:block}
#landing .ldTop a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500}
#landing .ldTop a:hover{color:var(--text)}
#landing .ldTop .sp{flex:1}
#landing .ldTop a.ldLogin{color:var(--text); font-weight:600; border:none; padding:0}
#landing .ldTop a.ldTopCta{background:var(--accent); color:var(--on-accent, #111110);
  font-weight:600; padding:11px 20px}
#landing .ldTop a.ldTopCta::after{content:none}
#landing .ldTop a.ldTopCta:hover{color:var(--on-accent, #111110); filter:brightness(1.07)}

/* ---------- hero: split grid, 2px rule below ---------- */
#landing .ldHero{display:grid; grid-template-columns:1.1fr .9fr;
  border-bottom:2px solid var(--line-strong, #3a3833)}
#landing .ldHeroL{padding:88px 56px 72px; border-right:1px solid var(--line, #2c2a26)}
#landing .ldHeroR{display:flex; align-items:center; justify-content:center; padding:40px}
#landing .kicker{font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}
#landing h1{font-family:var(--font-display, Georgia, serif);
  font-size:clamp(38px, 4.5vw, 64px); font-weight:600; line-height:1.06;
  letter-spacing:-.015em; margin:22px 0 0}
#landing h1 em{font-style:normal; color:inherit}
#landing .ldSub{color:var(--muted); font-size:17px; line-height:1.65;
  margin:24px 0 0; max-width:520px}
#landing .ldSub b{color:var(--text)}
#landing .ldCtas{display:flex; gap:14px; flex-wrap:wrap; margin:36px 0 0}
#landing .ldBtn{display:inline-flex; align-items:center; gap:12px;
  background:var(--accent); color:var(--on-accent, #111110); border:none;
  padding:16px 24px; font-size:15px; font-weight:600; text-decoration:none;
  cursor:pointer; font-family:inherit}
#landing .ldBtn:hover{filter:brightness(1.07); color:var(--on-accent, #111110)}
#landing .ldBtn::after{content:"→"; font-weight:400}
#landing .ldBtn.ghost{background:none; color:var(--text);
  border:1px solid var(--line-strong, #3a3833)}
#landing .ldBtn.ghost::after{content:none}
#landing .ldBtn.ghost:hover{border-color:var(--accent); color:var(--text); filter:none}
#landing .ldTrust{display:flex; align-items:center; gap:9px; color:var(--muted);
  font-size:13.5px; margin:26px 0 0}

/* ---------- stat row: 4 cells, 2px rule below ---------- */
#landing .ldStats{display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:2px solid var(--line-strong, #3a3833)}
#landing .ldStats > div{padding:28px 32px; border-right:1px solid var(--line, #2c2a26)}
#landing .ldStats > div:last-child{border-right:none}
#landing .ldStats b{display:block; font-family:var(--font-display, Georgia, serif);
  font-size:34px; font-weight:600; font-variant-numeric:tabular-nums}
#landing .ldStats span{display:block; color:var(--muted); font-size:13px; margin-top:4px}

/* ---------- sections: 64/56 padding, 2px rules between ---------- */
#landing .ldSec{padding:64px 56px; border-bottom:2px solid var(--line-strong, #3a3833)}
#landing h2{font-family:var(--font-display, Georgia, serif); font-size:36px;
  font-weight:600; letter-spacing:-.015em; margin:0}
#landing .kicker + h2{margin-top:12px}
#landing .ldSecHead{display:flex; align-items:baseline; gap:20px}
#landing .ldAll{margin-left:auto; color:var(--accent); font-size:14px;
  font-weight:600; text-decoration:none}
#landing .ldAll:hover{color:var(--text)}

/* features: shared-border 4-col grid */
#landing .ldGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line, #2c2a26); border:1px solid var(--line, #2c2a26); margin-top:36px}
#landing .ldGrid .ldCard{background:var(--bg, #111110); padding:28px 24px 32px}
#landing .ldCard .ic{display:inline-flex; width:40px; height:40px;
  border:1px solid var(--line-strong, #3a3833); align-items:center; justify-content:center}
#landing .ldCard b{display:block; font-size:16px; font-weight:600; margin-top:18px}
#landing .ldCard p{color:var(--muted); font-size:13.5px; line-height:1.6; margin:8px 0 0}

/* popular tools: shared-border rows, icon + name + desc */
#landing .ldTools{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line, #2c2a26); border:1px solid var(--line, #2c2a26); margin-top:32px}
#landing .ldTools a{background:var(--bg, #111110); padding:20px 22px;
  display:flex; align-items:center; gap:14px; color:var(--text);
  text-decoration:none; transition:background .12s}
#landing .ldTools a:hover{background:var(--panel, #181714)}
#landing .ldTools .ti{flex:none; display:inline-flex}
#landing .ldTools .tt{min-width:0; font-size:14.5px; font-weight:600}
#landing .ldTools .tt small{display:block; color:var(--muted); font-weight:400;
  font-size:12.5px; margin-top:2px}

/* pricing: shared-border 3-col, middle card carries the orange rule */
#landing .ldPrice{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line, #2c2a26); border:1px solid var(--line, #2c2a26); margin-top:32px}
#landing .ldPrice .ldCard{background:var(--bg, #111110); padding:32px 28px}
#landing .ldPrice .ldCard.mid{border-top:2px solid var(--accent); margin-top:-1px}
#landing .ldPrice .amt{display:block; font-family:var(--font-display, Georgia, serif);
  font-size:40px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text)}
#landing .ldPrice .amt em{font-style:normal; color:var(--muted); font-size:18px}
#landing .ldPrice .ldCard b{display:block; font-size:15px; font-weight:600; margin-top:8px}
#landing .ldPrice .ldCard p{color:var(--muted); font-size:13.5px; line-height:1.6; margin:10px 0 0}

/* privacy banner */
#landing .ldPriv{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:64px 56px; border:1px solid var(--line, #2c2a26); padding:24px 28px}
#landing .ldPriv .lkBox{width:44px; height:44px; border:1px solid var(--accent);
  color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex:none}
#landing .ldPriv > div{flex:1; min-width:240px}
#landing .ldPriv b{display:block; font-size:15.5px; color:var(--accent)}
#landing .ldPriv p{color:var(--muted); font-size:13px; line-height:1.55; margin:4px 0 0}
#landing .ldPriv .ldBtn.ghost{padding:12px 20px; font-size:13.5px}

/* footer */
#landing .ldFoot{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  padding:22px 56px 26px; border-top:2px solid var(--line-strong, #3a3833);
  color:var(--muted); font-size:13px}
#landing .ldFoot a{color:var(--muted); text-decoration:none}
#landing .ldFoot a:hover{color:var(--accent)}

/* light theme mirrors the roles */
body.light #landing{background:var(--bg, #faf9f5); color:var(--text, #1a1915)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #landing .ldHeroL{padding:56px 32px 48px}
  #landing .ldSec{padding:48px 32px}
  #landing .ldTop{padding:0 32px}
  #landing .ldGrid, #landing .ldTools{grid-template-columns:repeat(2,1fr)}
  #landing .ldStats{grid-template-columns:repeat(2,1fr)}
  #landing .ldStats > div:nth-child(2){border-right:none}
  #landing .ldStats > div:nth-child(-n+2){border-bottom:1px solid var(--line, #2c2a26)}
  #landing .ldPriv{margin:48px 32px}
  #landing .ldFoot{padding:22px 32px 26px}
}
@media (max-width:760px){
  #landing .ldHero{grid-template-columns:1fr}
  #landing .ldHeroL{border-right:none}
  #landing .ldHeroR{display:none}
  #landing .ldPrice{grid-template-columns:1fr}
  #landing .ldPrice .ldCard.mid{border-top:2px solid var(--accent)}
  #landing .ldTop a:not(.ldLogin):not(.ldTopCta){display:none}
  #landing h1{font-size:clamp(34px, 9vw, 44px)}
}
@media (max-width:520px){
  #landing .ldGrid, #landing .ldTools{grid-template-columns:1fr}
  #landing .ldStats{grid-template-columns:1fr}
  #landing .ldStats > div{border-right:none; border-bottom:1px solid var(--line, #2c2a26)}
  #landing .ldStats > div:last-child{border-bottom:none}
}