/* ---------- Legal pages: Privacy policy and Terms (template-parts/legal/page.php) ---------- */

/* One grid for the header and the text: a narrow left column (label, then the contents list)
   and the text on the right. The divider between them runs the full height of both sections. */
.lg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);}
.lg-grid > *{min-width:0;}
.frame.lg-rule{background:linear-gradient(to right,transparent calc(100% / 3 - 1px),var(--line) calc(100% / 3 - 1px),var(--line) calc(100% / 3),transparent calc(100% / 3));}

/* Header: "Legal" label on the left, title and intro on the right */
.lg-hdr{border-top:0;}
.lg-hdr-main .lede{margin-top:clamp(18px,2vw,26px);}

/* Contents list: stays in view while you scroll (just under the sticky toolbar), the section you're reading turns blue */
.lg-side{padding:clamp(56px,8vw,112px) 0;}
.lg-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:0 var(--gut);}
.lg-toc-h{color:var(--muted);margin-bottom:18px;}
.lg-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.lg-toc li{border-bottom:1px solid var(--line);}
.lg-toc a{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:8px;
  padding:11px 0;text-decoration:none;color:var(--muted);font-size:14px;line-height:1.35;
  transition:color .2s ease;
}
.lg-toc-n{font-size:11px;color:var(--muted);transition:color .2s ease;}
.lg-toc a:hover,.lg-toc a.is-on{color:var(--ink);}
.lg-toc a:hover .lg-toc-n,.lg-toc a.is-on .lg-toc-n{color:var(--blue);}
.lg-toc a.is-on{box-shadow:inset 2px 0 0 var(--blue);padding-left:12px;margin-left:-12px;}
.lg-toc a{transition:color .2s ease,padding .25s ease,margin .25s ease;}

/* The text */
.lg-prose{font-size:16px;line-height:1.7;}
.lg-prose h2{
  scroll-margin-top:96px; /* clears the sticky toolbar when you jump to a section */
  padding-top:1.4em;margin-top:2em;border-top:1px solid var(--line);
  font-size:clamp(22px,2vw,28px);
}
.lg-prose > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.lg-prose h3{font-size:clamp(18px,1.4vw,20px);margin-top:1.6em;}
.lg-prose strong{color:var(--ink);font-weight:600;}
.lg-prose li::marker{color:var(--muted);}
.lg-prose ol.lg-alpha{list-style:lower-alpha;}

/* clause numbers (Terms): in blue, hanging in the margin so the text lines up */
.lg-n{font-family:var(--mono);font-size:.62em;letter-spacing:.06em;color:var(--blue);}
.lg-prose h2 .lg-n{display:inline-block;min-width:2.4em;vertical-align:.3em;}
.lg-prose p.lg-cl{position:relative;padding-left:3.6em;}
.lg-prose p.lg-cl > .lg-n{position:absolute;left:0;top:.45em;font-size:12px;}
.lg-prose p.lg-cl--2{padding-left:7.4em;}
.lg-prose p.lg-cl--2 > .lg-n{left:3.6rem;} /* rem: lines up with the clause text above (the number itself is smaller type) */
.lg-prose p.lg-in{padding-left:3.6em;}
/* lettered lists under a clause: the letters line up with the clause text */
.lg-prose ol.lg-in{padding-left:5em;}
.lg-prose ol.lg-in--2{padding-left:8.8em;}

/* the date at the end */
.lg-prose p.lg-date{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:1.6em;border-top:1px solid var(--line);margin-top:2em;}

@media (max-width:860px){
  .lg-grid{grid-template-columns:1fr;}
  .frame.lg-rule{background:none;}
  .lg-hdr-tag{padding-bottom:0;}
  .lg-hdr-main{padding-top:24px;}
  .lg-side{padding:0;border-bottom:1px solid var(--line);}
  .lg-toc{position:static;max-height:none;padding:28px var(--gut);}
  .lg-prose p.lg-cl{padding-left:2.9em;}
  .lg-prose p.lg-cl--2{padding-left:5.9em;}
  .lg-prose p.lg-cl--2 > .lg-n{left:2.9rem;}
  .lg-prose p.lg-in{padding-left:2.9em;}
  .lg-prose ol.lg-in{padding-left:4.2em;}
  .lg-prose ol.lg-in--2{padding-left:7.2em;}
}

/* ---------- How we compare (/compare/): the main comparison table ----------
   Full width under the title (template-parts/legal/page.php takes it out of the text).
   Like clickup.com/compare: Medialake first and highlighted, rows grouped under Control /
   Intelligence / Platform, and ticks, crosses or "Limited" in the cells.
   The cells keep the words Yes / No in the page (for search and AI), shown as icons here.
   Scrolls sideways on small screens rather than squashing the columns. */
.lg-vs h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1;max-width:16ch;text-wrap:balance;}
/* The table is part of the page grid: no padding inside the rails, so its lines run rail to rail and
   the frame's rails are its outer edges (the section's top line is the table's top line). */
.lg-vs .lg-vs-wrap{overflow-x:auto;}
.lg-vs .ml-vs{margin:0;}
.lg-vs .ml-vs table{border:0;}
.lg-vs .ml-vs thead,.lg-vs .ml-vs tbody{border:0;} /* WordPress's own table style draws a thick black line under the headings: not ours */
.lg-vs h2 + .ml-vs{margin-top:clamp(32px,4vw,56px);}
.lg-vs .ml-vs table{width:100%;min-width:920px;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.45;}
.lg-vs .ml-vs thead th:first-child{width:32%;}
.lg-vs .ml-vs th,.lg-vs .ml-vs td{text-align:left;vertical-align:middle;padding:15px 18px;border:0;border-bottom:1px solid var(--line);}
.lg-vs .ml-vs th + th,.lg-vs .ml-vs th + td,.lg-vs .ml-vs td + td{border-left:1px solid var(--line);} /* column lines: the site's thin grey grid line, no box round the outside */
.lg-vs .ml-vs thead th:first-child,.lg-vs .ml-vs tbody th:first-child{padding-left:var(--gut);} /* lines up with the text in the sections above and below */
.lg-vs .ml-vs td{text-align:center;color:var(--muted);}
.lg-vs .ml-vs thead th{vertical-align:bottom;text-align:center;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:22px;padding-bottom:18px;}
.lg-vs .ml-vs thead th:first-child{text-align:left;}
.lg-vs .ml-vs tbody th{font-weight:400;color:var(--ink);}
/* the Medialake column */
.lg-vs .ml-vs .vs-me{background:rgba(11,12,15,.035);}
.lg-vs .ml-vs thead th.vs-me{color:var(--blue);}
.lg-vs .vs-logo{display:block;width:100%;max-width:150px;height:auto;margin:0 auto;} /* scales down with the column, keeping its shape */
.lg-vs .vs-cta{display:block;width:max-content;margin:12px auto 0;padding:8px 12px;background:var(--blue);color:#fff;text-decoration:none;letter-spacing:.06em;}
.lg-vs .vs-cta:hover{background:var(--ink);}
/* group rows: plain blue square, then the label */
.lg-vs .ml-vs tr.vs-group th{padding-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.lg-vs .ml-vs tr.vs-group th::before{content:"";display:inline-block;width:8px;height:8px;background:var(--blue);margin-right:10px;vertical-align:1px;}
/* tick, cross, Limited */
.lg-vs .vs-y,.lg-vs .vs-n{display:inline-block;position:relative;width:18px;height:18px;vertical-align:middle;}
.lg-vs .vs-y > span,.lg-vs .vs-n > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* tick: the app UI's green */
.lg-vs .vs-y::before{content:"";position:absolute;left:6px;top:1px;width:6px;height:11px;border:solid #2fbf6b;border-width:0 2px 2px 0;transform:rotate(45deg);}
.lg-vs .vs-n::before,.lg-vs .vs-n::after{content:"";position:absolute;left:3px;top:8px;width:12px;height:1.5px;background:#fa4444;transform:rotate(45deg);} /* cross: the site's risk red (as in the app UI) */
.lg-vs .vs-n::after{transform:rotate(-45deg);}
.lg-vs .vs-l{font-size:14px;color:var(--muted);}
.lg-vs .vs-beta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:4px;vertical-align:middle;}
.lg-vs .ml-vs figcaption{margin:0;padding:16px var(--gut) 20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}