/* The legal page (/privacy-policy). Same document layout as orgomedia.ai's legal.css, on Skail's tokens. */
.legal { /* the site's --measure, 54ch, about 75 characters a line (owner, 2026-10-23; 58ch set 81 in this face: board, item 91) */ background: var(--bg); color: var(--body); padding: 132px var(--page-gutter) 60px; }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal__title { font-size: var(--fs-h2); font-stretch: var(--display-stretch); font-weight: var(--display-weight); line-height: var(--lh-display); color: var(--txt); margin: 0 0 16px; text-transform: uppercase; }
.legal__updated { font-size: var(--fs-small); font-weight: 400; color: var(--muted); margin: 0; }
.legal__intro { margin: 24px 0 0; max-width: calc(var(--measure) * 16 / 18); font-size: var(--fs-body-lg); line-height: 1.7; color: var(--body); text-wrap: pretty; }
/* THE CONTENTS CARD (board, 2026-10-17). One column with the lede and the body, so all three share a right edge (the
   lede's measure is scaled down by its larger size: a ch grows with the font). A disclosure, open on a wide screen by
   the page's one-line script and closed on a phone, where 12 to 17 rows would fill the first screen. Each number sits
   in its own right-aligned gutter in the accent, so every title starts on one edge and reads as a link; the list fills
   column by column (--rows set on the list), so a wrapped title only makes its own row taller. */
.legal__toc { max-width: var(--measure); box-sizing: border-box; margin: 28px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--bg-soft); }
.legal__toc summary { display: flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; list-style: none; justify-content: space-between; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--legal-heading, var(--txt)); }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) ease; }
.legal__toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* one title a row: in two columns the longer titles wrapped beside an empty page (owner, 2026-10-17) */
.legal__toc ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.legal__toc a { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 4px 0; font-size: var(--fs-small); line-height: 1.45; text-wrap: balance; color: var(--body); text-decoration: none; transition: color var(--dur) ease; }
.legal__n { justify-self: end; font-variant-numeric: tabular-nums; color: var(--muted); }
.legal__toc a:hover, .legal__toc a:focus-visible { color: var(--red); }
@media (max-width: 560px) {
  .legal__toc { padding: 0 16px; }
  .legal__toc summary { min-height: 48px; }
  .legal__toc ul { margin: 0 0 8px; row-gap: 0; }
  .legal__toc a { min-height: 44px; align-content: center; padding: 0; }
}
.legal__section { scroll-margin-top: calc(var(--nav-h, 72px) + 24px); }
/* A WIDE SCREEN READS LIKE STRIPE'S LEGAL PAGES (owner, 2026-10-17: "i like stripes", after a review of 52 SaaS privacy
   policies for the most AI-readable). A left rail headed Legal lists the documents; the open one is bold (no stripe down its side:
   measureSideStripe) and its numbered sections under it, the same list the phone opens, and the title, date and summary head the
   reading column beside it. The rail is one fixed width on every document, wide enough for the longest entry, so the
   rail and the text do not move when a reader switches documents (board, 2026-10-17); the pair is centred, so neither
   side of the page is a dead strip (check_text_fills_box.js measureDeadSide, measureWrappedLabel, measureLooseTrack).
   Below that width the two documents are a row of links above the contents disclosure, so a phone can switch too. */
.legal__railh { display: none; }
.legal__toc .legal__doc { display: none; }
@media (max-width: 1023.98px) {
  .legal__toc { display: flex; flex-wrap: wrap; column-gap: 24px; }
  .legal__toc .legal__doc { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--body); text-decoration: none; }
  .legal__toc .legal__doc[aria-current="page"] { font-weight: 600; color: var(--legal-heading, var(--txt)); box-shadow: inset 0 -2px var(--legal-accent, var(--red)); }
  .legal__toc details { order: 1; flex: 1 0 100%; border-top: 1px solid var(--line, #2a2a44); }
  .legal__toc summary { padding-top: 12px; }
}
@media (max-width: 560px) { .legal__toc summary { padding-top: 0; } }
@media (min-width: 1024px) {
  .legal__inner { max-width: none; display: grid; grid-template-columns: 20rem minmax(0, var(--measure)); column-gap: clamp(48px, 4vw, 64px); justify-content: center; align-items: start; }
  .legal__inner > * { grid-column: 2; }
  .legal__toc { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--nav-h, 72px) + 40px); max-width: none; margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: var(--fs-small); line-height: 1.45; }
  .legal__railh { display: block; margin: 0 0 12px; font-size: var(--fs-label, 12px); font-weight: 600; color: var(--muted); }
  .legal__toc .legal__doc { display: block; position: relative; padding: 5px 0; color: var(--body); text-decoration: none; transition: color var(--dur) ease; }
  .legal__toc .legal__doc[aria-current="page"] { font-weight: 700; color: var(--legal-accent, var(--red)); }
  .legal__doc:hover, .legal__doc:focus-visible { color: var(--legal-accent, var(--red)); }
  .legal__toc summary { display: none; }
  .legal__toc ul { margin: 2px 0 6px; padding: 0 0 0 12px; row-gap: 0; }
  .legal__toc a:not(.legal__doc) { padding: 5px 0; color: var(--muted); }
}
.legal__body { margin-top: 44px; }
.legal__section { margin-top: 56px; }
.legal__section:first-child { margin-top: 0; }
.legal__section h2 { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; color: var(--legal-heading, var(--txt)); margin: 0 0 16px; }
.legal__section h3 { text-wrap: pretty; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--txt); margin: 22px 0 8px; }
.legal__section p { max-width: var(--measure); font-size: var(--fs-body); line-height: 1.7; color: var(--body); margin: 0 0 14px; text-wrap: pretty; }
.legal__nb { white-space: nowrap; }  /* a hyphenated compound never splits at the hyphen at the legal measure (board, item 91) */
.legal__section a { color: var(--txt); text-underline-offset: 3px; }
.legal__section ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal__section li { position: relative; max-width: calc(var(--measure) + 20px); padding-left: 20px; font-size: var(--fs-body); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.legal__section li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.legal__section:last-child > :last-child { margin-bottom: 0; }