/* LEI shared page shell — used by all non-home pages (legal, signup flows).
   Visual language matches index.html: DM Sans body, Cormorant Garamond
   display, beige bg, sage/peach/sun brand accents. */

:root{
  --background:#F0E3D8;
  --foreground:#2A2A26;
  --muted-foreground:#5A5450;
  --sage:#98B090;
  --peach:#F8A880;
  --sun:#F8C040;
  --border:#C8B8A5;
  --card:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}
body{
  font-family:"DM Sans", system-ui, sans-serif;
  font-weight:300;font-size:16px;line-height:1.7;
  letter-spacing:.01em;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.display{
  font-family:"Cormorant Garamond", serif;
  font-weight:300;line-height:1.05;letter-spacing:-0.01em;
  color:var(--foreground);
}
.display em{font-style:italic;color:var(--sage)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;
  background:#FFFFFF;border-bottom:1px solid var(--border);
  z-index:50;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.brand{display:inline-flex;align-items:center;gap:10px}
/* Official LEI lockup — orb + italic bold Cormorant wordmark.
   Matches the Brand Manual canonical: "LEI" uppercase, italic 700,
   sage #98B090. Set font-size on .lei-mark for total height. */
.lei-mark{
  display:inline-flex;align-items:center;gap:.18em;
  line-height:0;font-size:30px;
}
.lei-mark::before{
  content:"";display:block;
  width:.92em;height:.92em;
  background:url("/assets/lei-icon-orb-tight.png") center/contain no-repeat;
  flex:none;
}
.lei-mark::after{
  content:"LEI";display:inline-block;
  font-family:"Cormorant Garamond", serif;
  font-style:italic;font-weight:700;
  font-size:1em;line-height:.85;
  color:#98B090;letter-spacing:.01em;
}
.lei-mark.dark::after{color:#FFFFFF}
.lei-mark.sm{font-size:22px}

.nav-links{list-style:none;display:flex;align-items:center;gap:28px;font-size:14px;letter-spacing:.02em}
.nav-links a{padding:6px 0;color:var(--muted-foreground);transition:color .2s}
.nav-links a:hover{color:var(--peach)}
.nav-lang{font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- main content ---------- */
main.page{
  flex:1;padding:72px 32px 96px;
}
.page-inner{max-width:760px;margin:0 auto}
.page-label{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-foreground);margin-bottom:18px;
}
.page h1.display{
  font-size:clamp(40px,6vw,72px);
  margin-bottom:48px;
}

/* generic content typography */
.page-content h2{
  font-family:"Cormorant Garamond", serif;
  font-weight:400;font-size:34px;line-height:1.15;
  color:var(--foreground);
  margin:56px 0 18px;
}
.page-content h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:400;font-style:italic;
  font-size:26px;line-height:1.2;
  color:var(--foreground);
  margin:40px 0 14px;
}
.page-content h4{
  font-family:"DM Sans", sans-serif;
  font-weight:500;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-foreground);
  margin:32px 0 10px;
}
.page-content p{
  font-size:17px;line-height:1.78;
  color:var(--muted-foreground);
  margin-bottom:18px;
}
.page-content ul, .page-content ol{
  margin:0 0 22px 22px;
  padding-left:6px;
}
.page-content li{
  font-size:17px;line-height:1.75;
  color:var(--muted-foreground);
  margin-bottom:8px;
}
.page-content strong{color:var(--foreground);font-weight:500}
.page-content em{font-style:italic}
.page-content a{
  color:var(--sage);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s;
}
.page-content a:hover{color:var(--peach)}

/* table of contents box (legal pages) */
.toc{
  border:1px solid var(--border);
  border-left:3px solid var(--sage);
  background:rgba(255,255,255,.35);
  padding:22px 28px 22px;
  margin:48px 0 56px;
}
.toc-label{
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage);margin-bottom:14px;
}
.toc-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:6px;
}
.toc-list li{display:flex;align-items:baseline;gap:14px}
.toc-num{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;font-weight:400;color:var(--sage);
  min-width:24px;letter-spacing:.04em;flex:none;
}
.toc-list a{
  color:var(--sage);font-size:15px;
  text-decoration:none;padding:2px 0;
  transition:color .2s;
}
.toc-list a:hover{color:var(--peach)}
.page-content h3[id]{scroll-margin-top:80px}

.page-content iframe{
  display:block;margin:32px auto;max-width:100%;
  border:1px solid var(--border);border-radius:6px;
  background:#FFFFFF;
}

/* CTA button (back to home, etc.) */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  background:var(--foreground);color:#FFFFFF;
  font-family:"DM Sans", sans-serif;
  font-size:14px;font-weight:400;letter-spacing:.06em;
  border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;
  transition:background .2s, transform .2s;
}
.btn:hover{background:var(--sage);transform:translateY(-1px);color:#fff}
.btn.ghost{background:transparent;color:var(--foreground);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--foreground);color:#FFFFFF;border-color:var(--foreground)}
.btn-row{margin:36px 0 28px;display:flex;flex-wrap:wrap;gap:14px}

.divider{
  height:1px;background:var(--border);
  margin:48px 0 32px;border:none;
}

/* compact intro for short pages (confirmation/success) */
.page.compact .page-inner{text-align:center}
.page.compact .btn-row{justify-content:center}

/* ---------- footer ---------- */
.site-foot{
  background:#FFFFFF;border-top:1px solid var(--border);
  padding:42px 32px 30px;
}
.foot-row{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.foot-links{display:flex;gap:22px;font-size:14px}
.foot-links a{color:var(--muted-foreground);transition:color .2s}
.foot-links a:hover{color:var(--peach)}
.foot-fine{
  max-width:1100px;margin:18px auto 0;
  font-size:12px;letter-spacing:.04em;
  color:var(--muted-foreground);
}

@media (max-width: 720px){
  .nav-inner{padding:14px 20px;gap:16px}
  .nav-links{gap:16px;font-size:13px}
  main.page{padding:48px 20px 72px}
  .page h1.display{font-size:clamp(34px,9vw,52px);margin-bottom:32px}
  .page-content h2{font-size:26px;margin:40px 0 14px}
  .page-content h3{font-size:21px;margin:28px 0 10px}
  .page-content p, .page-content li{font-size:16px}
  .site-foot{padding:32px 20px 26px}
  .foot-row{gap:14px}
  .foot-links{gap:14px;font-size:13px}
}