/* Shared styling for Leren's legal and company pages.
   Mirrors the type and palette used across leren.education. */
:root {
  --paper:#f7f3ea; --paper-deep:#efe8d8; --ink:#1a1714; --ink-soft:#4a443c;
  --ink-faint:#847c6f; --gold:#b8862b; --gold-deep:#936a1c; --line:#ddd4c2;
  --card:#fffdf8; --max-w:760px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 26px; }

header.site { border-bottom:1px solid var(--line); padding:22px 0; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand {
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:22px;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
  font-variation-settings:"opsz" 24;
}
.brand img { width:30px; height:30px; object-fit:contain; }
.nav-cta {
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
  border:1.5px solid var(--ink); border-radius:100px; padding:9px 18px;
  transition:all .2s ease; white-space:nowrap;
}
/* Hover styles only where there is a real pointer: on a phone a tap leaves :hover stuck,
   so a button stayed orange, lifted and glowing after its popup closed. */
@media (hover: hover) { .nav-cta:hover { background:var(--ink); color:var(--paper); } }

article { padding:60px 0 30px; }
.eyebrow {
  font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:20px;
}
h1 {
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(32px,5.5vw,48px); line-height:1.08;
  letter-spacing:-0.02em; margin-bottom:22px;
}
.standfirst { font-size:20px; line-height:1.6; color:var(--ink-soft); margin-bottom:26px; }
.meta {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  font-size:14px; color:var(--ink-faint);
  padding-bottom:34px; border-bottom:1px solid var(--line);
}
.meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.meta a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }

.body { padding-top:38px; }
.body h2 {
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(24px,4vw,31px); line-height:1.18; letter-spacing:-0.015em;
  margin:46px 0 16px;
}
.body h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px; margin:30px 0 10px; }
.body p { margin-bottom:20px; }
.body a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.body strong { font-weight:600; }
.body ul { margin:0 0 22px; padding-left:0; list-style:none; }
.body ul li { position:relative; padding-left:26px; margin-bottom:11px; }
.body ul li::before {
  content:""; position:absolute; left:4px; top:11px;
  width:7px; height:7px; background:var(--gold); border-radius:50%;
}
.callout {
  background:var(--paper-deep); border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius:12px;
  padding:20px 24px; margin:0 0 32px;
}
.callout p { margin:0; font-size:16px; color:var(--ink-soft); }
.callout p strong { color:var(--ink); }

table.data {
  width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15.5px;
}
table.data th, table.data td {
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
table.data th { font-weight:600; color:var(--ink); background:var(--paper-deep); }
table.data td { color:var(--ink-soft); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

footer.site {
  border-top:1px solid var(--line); margin-top:50px; padding:30px 0 46px;
  font-size:14px; color:var(--ink-faint); text-align:center;
}
/* inline-block lets the links wrap on a phone; the markup has no spaces between them */
footer.site a { display:inline-block; color:var(--ink-soft); text-decoration:none; margin:0 9px; }
footer.site a:hover { color:var(--ink); text-decoration:underline; }
footer.site .copy { margin-top:14px; }

/* A page with no date line under its intro (About) skips the padding that sat under that
   line's divider, so the first heading follows the intro at a normal distance. */
.standfirst + .body { padding-top:0; }
.standfirst + .body > h2:first-child { margin-top:40px; }

@media (max-width:600px) {
  body { font-size:16px; }
  article { padding:38px 0 22px; }
  .standfirst { font-size:18px; }
  header.site .wrap { gap:10px; }
  /* Phones: footer links get a finger-sized hit area (they were about 24px tall). */
  footer.site a { padding:10px 2px; }
  /* Phones: headings split into even lines and paragraphs avoid ending on a lone word. */
  h1,h2,h3 { text-wrap:balance; }
  p,li { text-wrap:pretty; }
}