/* The formal pages of wheelmachine.ai - the Legal page and the documents it lists - and nothing else: a calm,
   typographic page, white by day and a warm near-black by night, the words in Geist and in the text's own colour, thin
   lines where a line helps. Only those pages link this sheet, and every rule here is under their <body class="legal">,
   so the home page, Pricing and Contact keep the site's own look. The top bar and the footer are the site's, with the
   same links and words; here they sit on the page's own ground, because a formal page has no band. */

/* the page's colours, by day and by night: every colour that carries words reads at 4.5:1 or more on its ground */
body.legal {
  --bg: #ffffff; --fg: #14120b; --fg2: #3d3b34; --muted: #6b6860; --faint: #b0ada4; --line: rgba(20, 18, 11, .1); --line2: rgba(20, 18, 11, .17);
  --card: #ffffff; --wash: #f7f6f3; --lp-top: 68px;
  background: var(--bg); color: var(--fg);
}
:root[data-theme="dark"] body.legal {
  --bg: #12110e; --fg: #f2f1ec; --fg2: #c9c6bc; --muted: #8f8c85; --faint: #5f5c55; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .17);
  --card: #161511; --wash: #1b1a16;
}
/* the site's top bar, on the page's own ground from the start, with a hairline once the page moves */
.legal .nav.solid { box-shadow: none; }
.legal .nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.legal main h1, .legal main h2, .legal main h3 { font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; letter-spacing: -.025em; }

/* the text in one column, the list of formal pages on its left and its contents on its right, where there is room */
.legal .lp-page { padding-block: clamp(44px, 7vw, 104px) clamp(72px, 10vw, 128px); }
.legal .lp-layout { display: grid; grid-template-columns: 188px minmax(0, 640px) 216px; justify-content: space-between; align-items: start; gap: 48px; }
.legal .lp-rail { position: sticky; top: calc(var(--lp-top) + 40px); padding-top: 14px; font-size: 14.5px; line-height: 1.4; }
.legal .lp-rail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.legal .lp-rail a { display: block; padding: 5px 0; color: var(--muted); text-decoration: none; transition: color .15s; }
.legal .lp-rail a:hover, .legal .lp-rail a[aria-current] { color: var(--fg); }
.legal .lp-toc { position: sticky; top: calc(var(--lp-top) + 40px); max-height: calc(100vh - var(--lp-top) - 64px); overflow: auto; overscroll-behavior: contain;
  padding-top: 14px; font-size: 14px; line-height: 1.4; }
.legal .lp-toc-h { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.legal .lp-toc ol, .legal .lp-tocbox ol { margin: 0; padding: 0; list-style: none; }
.legal .lp-toc ol { scroll-target-group: auto; }
.legal .lp-toc a { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); padding: 5px 0; color: var(--muted); text-decoration: none; transition: color .15s; }
.legal .lp-toc a:hover, .legal .lp-toc a:target-current { color: var(--fg); }
.legal .n { font-variant-numeric: tabular-nums; }
@media (max-width: 1239px) { .legal .lp-layout { grid-template-columns: minmax(0, 640px) 216px; justify-content: center; gap: 64px; } .legal .lp-rail { display: none; } }
@media (max-width: 1023px) { .legal .lp-layout { grid-template-columns: minmax(0, 1fr); } .legal .lp-toc { display: none; } .legal .lp-doc { max-width: 680px; } }
@media (min-width: 1024px) { .legal .lp-fold { display: none; } }

/* the name, large and quiet, and the day it last changed */
.legal .lp-head h1 { font-size: clamp(40px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -.035em; }
.legal .lp-head .dated, .legal .lp-head .lede { margin-top: 12px; max-width: 36em; color: var(--muted); font-size: 17px; line-height: 1.5; }
.legal .lp-head .lede { font-size: clamp(18px, 1.8vw, 20px); }
.legal .dated .sep { margin: 0 .45em; }

/* the reading column: 17 px, in the text's own colour, loose enough to read at length */
.legal .lp-doc { min-width: 0; font-size: 17px; line-height: 1.7; }
.legal .lp-doc > * + * { margin-top: 28px; }
.legal .lp-doc > section + section { margin-top: 56px; }
.legal .lp-doc section > * + * { margin-top: 16px; }
.legal .lp-doc section > h3 { margin-top: 32px; }
.legal .lp-doc p, .legal .lp-doc li, .legal .lp-doc td, .legal .lp-doc dd { color: var(--fg); }
.legal .lp-doc h2 { position: relative; font-size: clamp(22px, 2.2vw, 25px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; scroll-margin-top: calc(var(--lp-top) + 24px); }
.legal .lp-doc h3 { position: relative; font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: calc(var(--lp-top) + 24px); }
.legal .lp-doc h3 .n { font-weight: 400; }
.legal .lp-doc a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere;
  transition: text-decoration-color .15s; }
.legal .lp-doc a:hover { text-decoration-color: currentColor; }
.legal .lp-doc a[href^="tel:"], .legal .facts a[href^="tel:"] { white-space: nowrap; }
.legal .lp-doc strong { color: var(--fg); font-weight: 600; }
.legal .lp-doc code { font: 500 .88em "Geist Mono", ui-monospace, monospace; color: var(--fg); overflow-wrap: anywhere; }
.legal .lp-doc ul, .legal .lp-doc ol { margin: 0; padding: 0; list-style: none; }
.legal .lp-doc li { position: relative; padding-left: 24px; }
.legal .lp-doc li + li { margin-top: 10px; }
.legal .lp-doc ul > li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; background: var(--faint); }
.legal .lp-doc ol { counter-reset: item; }
.legal .lp-doc ol > li { counter-increment: item; padding-left: 28px; }
.legal .lp-doc ol > li::before { content: counter(item) "."; position: absolute; left: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal .lp-doc li > ul { margin-top: 10px; }
.legal .lp-doc li > ul + p { margin: 10px 0 0; }
/* a section's link, beside its name where a pointer can hover over it: the address to copy, with no script */
.legal .lp-self { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -8px 0 -8px 4px; vertical-align: middle; border-radius: 8px;
  color: var(--muted); font: 400 .8em/1 Geist, sans-serif; text-decoration: none; opacity: 0; transition: opacity .15s; }
.legal .lp-self::before { content: "#"; }
.legal .lp-self:hover { color: var(--fg); background: var(--wash); }
.legal h2:hover > .lp-self, .legal h3:hover > .lp-self, .legal .lp-self:focus-visible { opacity: 1; }
@media (hover: none) { .legal .lp-self { display: none; } }
/* who the agreement is between, said first */
.legal .lp-doc .parties { font-size: 18px; line-height: 1.65; }
/* the contents, and the summary: a quiet box each, its name in grey */
.legal .lp-tocbox, .legal .lp-short { border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.legal .lp-tocbox > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 18px; color: var(--muted); font-size: 15px;
  cursor: pointer; list-style: none; }
.legal .lp-tocbox > summary::-webkit-details-marker { display: none; }
.legal .lp-tocbox > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.legal .lp-tocbox[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.legal .lp-tocbox ol { padding: 0 18px 14px; font-size: 15.5px; line-height: 1.45; }
.legal .lp-doc .lp-tocbox li { padding-left: 0; }
.legal .lp-doc .lp-tocbox li + li { margin-top: 0; }
.legal .lp-doc .lp-tocbox li::before { content: none; }
.legal .lp-tocbox a { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); align-items: baseline; padding: 5px 0; min-height: 32px; color: var(--fg); text-decoration: none; }
.legal .lp-tocbox a:hover { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.legal .lp-short { padding: 16px 20px 18px; }
.legal .lp-doc .lp-short h2 { color: var(--muted); font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.legal .lp-short ul { display: grid; gap: 10px; margin-top: 10px; }
.legal .lp-doc .lp-short li + li { margin-top: 0; }
.legal .lp-doc .lp-note { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@supports (interpolate-size: allow-keywords) {
  .legal { interpolate-size: allow-keywords; }
  .legal .lp-tocbox::details-content { height: 0; overflow: clip; transition: height .22s ease, content-visibility .22s allow-discrete; }
  .legal .lp-tocbox[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .legal .lp-tocbox::details-content { transition: none; } }
/* tables: rows to read across, with a hairline under each, which stack into blocks on a phone */
.legal .lp-doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.legal .lp-doc th, .legal .lp-doc td { padding: 12px 18px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal .lp-doc th { color: var(--muted); font-size: 14px; font-weight: 400; border-bottom-color: var(--line2); }
.legal .lp-doc td:first-child { font-weight: 500; }
.legal .lp-doc .times td:last-child { white-space: nowrap; }
@media (max-width: 640px) {
  .legal .lp-doc table, .legal .lp-doc tbody, .legal .lp-doc tr, .legal .lp-doc td { display: block; width: 100%; }
  .legal .lp-doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal .lp-doc tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal .lp-doc td { padding: 2px 0; border: 0; }
  .legal .lp-doc td[data-label]::before { content: attr(data-label); display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; font-weight: 400; }
  /* a row's first cell names it: shown as its title, with no label over it */
  .legal .lp-doc td:first-child { padding-bottom: 2px; font-weight: 600; }
  .legal .lp-doc td:first-child::before { display: none; }
}
/* who to reach, a line each - a person's or a company's details - with a hairline under each */
.legal .facts { margin: 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: none; overflow: visible; }
.legal .facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.legal .facts dt { color: var(--muted); font: 400 15px/1.6 Geist, sans-serif; letter-spacing: 0; text-transform: none; }
.legal .facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.legal .facts a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal .lp-doc .facts + p, .legal .lp-doc p + .facts { margin-top: 16px; }
@media (max-width: 640px) { .legal .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* the Legal page: the formal pages, a row each under who they are for */
.legal .lp-hub { display: grid; gap: clamp(40px, 5vw, 56px); max-width: 860px; margin-top: clamp(32px, 4vw, 48px); }
.legal .lp-hub section > h2 { margin-bottom: 6px; color: var(--muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.legal .lp-hub section > p { max-width: 640px; color: var(--fg); font-size: 17px; line-height: 1.7; }
.legal .lp-hub a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.legal .lp-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); }
.legal .lp-rows li { border-bottom: 1px solid var(--line); }
.legal .lp-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 32px; min-height: 44px; padding: 18px 0; text-decoration: none; }
.legal .lp-rows b { color: var(--fg); font-size: 17.5px; font-weight: 500; letter-spacing: -.01em; }
.legal .lp-rows a:hover b { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
.legal .lp-rows .line { grid-column: 1; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.legal .lp-rows .when { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) { .legal .lp-rows a { grid-template-columns: minmax(0, 1fr); } .legal .lp-rows .when { grid-column: 1; grid-row: auto; margin-top: 4px; } }

/* on paper: black on white, the words alone, each link's address written out */
@media print {
  body.legal, :root[data-theme="dark"] body.legal { --bg: #fff; --fg: #000; --fg2: #111; --muted: #444; --faint: #000; --line: #bbb; --line2: #888; --card: #fff; --wash: #fff; }
  .legal .lp-rail, .legal .lp-toc, .legal .lp-fold, .legal .lp-self { display: none !important; }
  .legal .lp-page { padding: 0; }
  .legal .lp-layout { display: block; }
  .legal .lp-head { margin-bottom: 14pt; }
  .legal .lp-head h1 { font-size: 24pt; }
  .legal .lp-doc { max-width: none; font-size: 11pt; line-height: 1.5; }
  .legal .lp-doc .parties { font-size: 12pt; }
  .legal .lp-doc a, .legal .facts a, .legal .lp-hub a { color: #000; text-decoration-color: #000; }
  .legal .lp-doc a[href^="http"]::after, .legal .facts a[href^="http"]::after, .legal .lp-hub a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .legal .lp-doc a[href^="/"]::after, .legal .facts a[href^="/"]::after, .legal .lp-hub a[href^="/"]::after { content: " (https://wheelmachine.ai" attr(href) ")"; font-size: .85em; }
  /* a bullet that paper keeps: browsers print no backgrounds, so the square becomes a character */
  .legal .lp-doc ul > li::before { content: "\2022"; top: 0; left: 6px; width: auto; height: auto; background: none; color: #000; }
  .legal .lp-doc section, .legal .facts > div, .legal .lp-rows li, .legal tr { break-inside: avoid; }
  .legal .lp-doc h2, .legal .lp-doc h3 { break-after: avoid; }
  .legal .lp-short, .legal .lp-tocbox { background: #fff; border-color: #999; }
}