/* Odisal Sections: Document (privacy policy and the like). One readable column, the "On this page" list on the left
   on wide screens (a drop-down box on tablets and phones). The pv-* classes and mark.ask can be used in the text. */
.osx-document { --_soft: color-mix(in srgb, var(--osx-text) 86%, var(--osx-dark)); --_softer: color-mix(in srgb, var(--osx-text) 74%, var(--osx-dark));
  --_line: rgba(255,255,255,.08); --_box: rgba(0,0,0,.2);
  padding-top: var(--osx-doc-top, 64px); padding-bottom: var(--osx-doc-bottom, 110px); }
.osx-doc--bg { background: linear-gradient(90deg, var(--osx-dark) 0%, var(--osx-dark-2) 100%); }
.osx-doc-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 70px; align-items: start; }
.osx-doc-body--solo { grid-template-columns: minmax(0, 1fr); }

/* On this page */
.osx-doc-toc { position: sticky; top: var(--osx-doc-sticky, 112px); }
.osx-document .osx-doc-toc summary { display: block; list-style: none; font: 400 11px/1 var(--osx-label); letter-spacing: 2px; text-transform: uppercase; color: var(--osx-muted); cursor: default; pointer-events: none; }
.osx-doc-toc summary::-webkit-details-marker { display: none; }
.osx-document .osx-doc-toc ol { display: grid; gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: osx-doc; }
.osx-document .osx-doc-toc li { margin: 0; counter-increment: osx-doc; }
.osx-document .osx-doc-toc a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.35; color: color-mix(in srgb, var(--osx-text) 80%, var(--osx-dark)); text-decoration: none; transition: color 150ms ease; }
.osx-doc-toc a::before { content: counter(osx-doc, decimal-leading-zero); flex: none; width: 20px; font: 400 12px/1.6 var(--osx-head); color: color-mix(in srgb, var(--osx-muted) 60%, var(--osx-dark)); transition: color 150ms ease; }
.osx-doc--plain .osx-doc-toc a::before { content: none; }
.osx-document .osx-doc-toc a:is(:hover, :focus-visible, .on) { color: var(--osx-accent); }
.osx-doc-toc a.on::before { color: var(--osx-accent); }

/* The text */
.osx-doc-text { max-width: 720px; min-width: 0; }
.osx-doc-body--solo .osx-doc-text { margin-inline: auto; }
.osx .osx-doc-lead { padding-bottom: 40px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); font: 400 21px/1.55 var(--osx-head); color: var(--osx-text); }
.osx-doc-sec { padding-top: 40px; scroll-margin-top: 100px; }
.osx .osx-doc-h2 { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 600 28px/1.2 var(--osx-head); color: var(--osx-text); }
.osx-doc-h2 .osx-doc-num { flex: none; font-size: 14px; color: var(--osx-accent); }
.osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) h3 { margin: 28px 0 0; font: 600 15px/1.3 var(--osx-body); color: var(--osx-text); }
.osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) h4 { margin: 22px 0 0; font: 600 14px/1.3 var(--osx-body); color: var(--osx-text); }
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) p { margin: 14px 0 0; font-size: 16px; line-height: 1.75; color: var(--_soft); }
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) h3 + p { margin-top: 8px; }
.osx-document .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) a { color: var(--osx-accent); text-decoration: underline; text-underline-offset: 3px; }
.osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) :is(b, strong) { font-weight: 600; color: var(--osx-text); }

/* Lists: gold dots (any bulleted list, or ul.pv-list); numbered lists stay numbered */
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) ul > li { position: relative; margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--_soft); }
.osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--osx-accent); }
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) ol { margin: 14px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--_soft); }
.osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) ol > li + li { margin-top: 8px; }

/* Definition card: <dl class="pv-card"><div><dt>Name</dt><dd>Value</dd></div>…</dl> */
.osx .osx-doc-text .pv-card { display: grid; gap: 0; margin: 20px 0 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--_box); box-shadow: inset 0 0 0 1px var(--_line); }
.osx-doc-text .pv-card > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.osx-doc-text .pv-card > div + div { border-top: 1px solid rgba(255,255,255,.07); }
.osx-doc-text .pv-card dt { padding-top: 2px; font: 400 11px/1.6 var(--osx-label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--osx-muted); }
.osx-doc-text .pv-card dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--osx-text); overflow-wrap: anywhere; }

/* Table: <div class="pv-table"><div class="pv-tr pv-th"><span>…</span><span>…</span></div><div class="pv-tr">…</div></div>
   (a plain <table> from the editor gets the same look) */
.osx-doc-text .pv-table, .osx .osx-doc-text table { width: 100%; margin: 18px 0 0; border: 0; border-collapse: collapse; border-radius: 18px; overflow: hidden; background: var(--_box); box-shadow: inset 0 0 0 1px var(--_line); }
.osx-doc-text .pv-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 14px 20px; font-size: 15px; line-height: 1.55; color: var(--_soft); }
.osx-doc-text .pv-tr + .pv-tr { border-top: 1px solid rgba(255,255,255,.07); }
.osx-doc-text .pv-tr > :first-child { color: var(--osx-text); }
.osx-doc-text .pv-th { background: rgba(255,255,255,.04); font: 400 11px/1.4 var(--osx-label); letter-spacing: 1.6px; text-transform: uppercase; }
.osx-doc-text .pv-th > *, .osx-doc-text .pv-th > :first-child { color: var(--osx-muted); }
.osx .osx-doc-text table :is(th, td) { padding: 14px 20px; border: 0; background: none; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.55; color: var(--_soft); }
.osx .osx-doc-text table tr + tr :is(th, td) { border-top: 1px solid rgba(255,255,255,.07); }
.osx .osx-doc-text table th { background: rgba(255,255,255,.04); font: 400 11px/1.4 var(--osx-label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--osx-muted); }
.osx .osx-doc-text table td:first-child { color: var(--osx-text); }
.osx .osx-doc-text :is(.osx-doc-pre, .osx-doc-sec) p.pv-note { font-size: 14px; color: var(--osx-muted); }

/* "Ask the client": things still to fill in. <mark class="ask"><strong>Ask the client</strong>Question <em>hint</em></mark> */
.osx-doc-text mark.ask { display: block; margin: 10px 0 2px; padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--osx-accent); background: color-mix(in srgb, var(--osx-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--osx-accent) 50%, transparent); color: color-mix(in srgb, var(--osx-accent) 25%, #fff); font-size: 14px; line-height: 1.5; }
.osx .osx-doc-text mark.ask > :is(b, strong) { display: block; margin-bottom: 3px; font: 700 10px/1.3 var(--osx-label); letter-spacing: 1.8px; text-transform: uppercase; color: var(--osx-accent); }
.osx .osx-doc-text mark.ask > :is(i, em) { display: block; margin-top: 4px; font-style: normal; color: color-mix(in srgb, var(--osx-accent) 45%, #a8a8a8); }
.osx-doc-text :is(.pv-card dd, .pv-tr) mark.ask { margin: 0; }

@media (max-width: 900px) {
  .osx-document { padding-top: var(--osx-doc-top, 40px); }
  .osx-doc-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .osx-doc-toc { position: static; border-radius: 16px; background: var(--_box); box-shadow: inset 0 0 0 1px var(--_line); }
  .osx-document .osx-doc-toc summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; pointer-events: auto; cursor: pointer; }
  .osx-doc-toc summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--osx-ease-out); }
  .osx-doc-toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .osx-document .osx-doc-toc ol { margin: 0; padding: 0 20px 14px; }
  .osx-doc-toc + script + .osx-doc-text, .osx-doc-toc + .osx-doc-text { margin-top: 40px; }
}
@media (max-width: 620px) {
  .osx .osx-doc-lead { font-size: 18px; }
  .osx .osx-doc-h2 { font-size: 23px; }
  .osx-doc-text .pv-card > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .osx-doc-text .pv-tr { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .osx-doc-text .pv-th { display: none; }
  .osx-doc-text .pv-tr > :last-child { font-size: 14px; color: color-mix(in srgb, var(--osx-text) 76%, var(--osx-dark)); }
}
@media (prefers-reduced-motion: reduce) {
  .osx-doc-toc a, .osx-doc-toc a::before, .osx-doc-toc summary::after { transition: none; }
}