/* Legal pages (terms.html, privacy.html). Tokens, bar, ground and footer come
   from scrollcraft.css and site.css; this file only lays out the reading page. */
.legal { position: relative; z-index: 1; background: var(--sc-canvas); /* flat navy behind the text, no glow */ padding: calc(64px + env(safe-area-inset-top) + 40px) 0 72px; }
.legal__wrap { width: min(100% - 40px, 1112px); margin: 0 auto; }

.legal__head { max-width: 46rem; margin: 0 0 28px; }
.legal__head h1 {
  margin: 0 0 14px; font: 800 clamp(2rem, 1.4rem + 2.6vw, 3.2rem)/1.08 var(--sc-font-display);
  letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word;
}
.legal__date {
  margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--indigo-light);
  font: 500 1rem/1.5 var(--sc-font-text); color: #c7d2fe;
}

.legal__grid { display: block; }

/* On this page */
.toc { margin: 0 0 32px; border: 1px solid var(--line); border-radius: 16px; background: rgba(22, 22, 42, 0.7); }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; cursor: pointer;
  font: 700 0.8rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-light);
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; transition: transform 150ms var(--sc-ease-out); }
.toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc ul { list-style: none; margin: 0; padding: 0 8px 10px; }
.toc a {
  display: flex; align-items: center; min-height: 44px; padding: 11px 10px; border-radius: 10px;
  font: 500 1rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft); text-decoration: none;
}
.toc a:hover { color: var(--sc-ink); background: rgba(255, 255, 255, 0.06); }
.toc a { position: relative; text-wrap: balance; }
/* The section being read: white text, a violet tint and a violet bar on the left. */
.toc a[aria-current="true"] { color: #fff; background: rgba(167, 139, 250, 0.16); }
.toc a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--indigo-light); }

/* The text */
.legal__body { max-width: 40rem; font: 400 1rem/1.6 var(--sc-font-text); color: rgba(255, 255, 255, 0.86); overflow-wrap: break-word; }
.legal__body p { margin: 0 0 0.9em; }
.legal__body > p:first-child { font-size: 1.0625rem; color: var(--sc-ink); }
/* Sections: each h2 sits in a <details> summary. Folded on phones, open on wide screens. */
.sec { border-top: 1px solid var(--line); }
.sec:last-of-type { border-bottom: 1px solid var(--line); }
.sec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 6px 0;
  cursor: pointer; list-style: none; scroll-margin-top: 80px;
}
.sec > summary h2 { flex: 1; }
/* An open section reads as open: its heading takes the accent. */
.sec[open] > summary h2 { color: var(--indigo-light); }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 4px; color: var(--indigo-light);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.sec[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; }
.sec > summary:focus-visible, .toc a:focus-visible { outline: 2px solid var(--indigo-light); outline-offset: 2px; border-radius: 6px; }
.sec__body { padding: 2px 0 12px; }
.legal__body h2 {
  margin: 0; font: 600 1.125rem/1.3 var(--sc-font-text); letter-spacing: -0.005em; color: var(--sc-ink);
  scroll-margin-top: 80px; text-wrap: balance;
}
.legal__body > p:nth-of-type(2) + .sec { margin-top: 1.4em; }
.legal__body h3 {
  margin: 1.4em 0 0.4em; font: 700 1.05rem/1.35 var(--sc-font-text); color: var(--sc-ink); scroll-margin-top: 80px;
}
.legal__body ul { margin: 0 0 1em; padding: 0; list-style: none; }
.legal__body li { position: relative; margin: 0 0 0.3em; padding-left: 1.5em; }
.legal__body li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo-light); }
.legal__body strong { color: var(--sc-ink); font-weight: 700; }
.legal__body a {
  color: var(--indigo-light); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
  padding: 0.25em 0; /* grows the tap area of inline links without moving the text */
}
@media (max-width: 959px) {
  .legal__body a { text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
}
.legal__body a:hover { color: #c7d2fe; }

/* Footer: same bar of links as the home page, one tap-friendly row. */
.legal-foot { position: relative; z-index: 1; width: min(100% - 40px, 1112px); margin: 0 auto; padding-bottom: 40px; }
.legal-foot .foot { align-items: center; justify-content: flex-start; gap: 0 28px; line-height: 1.3; }
.legal-foot .foot span { display: flex; align-items: center; min-height: 44px; font-size: 1rem; }
.legal-foot .foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 959px) {
  .legal-foot .foot span { flex-basis: 100%; } /* the copyright on its own line, the links in one even row under it */
}
.legal-foot .foot a[aria-current="page"] { color: var(--sc-ink); }

@media (min-width: 960px) {
  .legal { padding-top: calc(64px + 72px); }
  .legal__body { font-size: 1.125rem; }
  .legal__body > p:first-child { font-size: 1.2rem; line-height: 1.55; }
  .legal__body h2 { font-size: 1.375rem; scroll-margin-top: 88px; }
  .legal__body h3 { scroll-margin-top: 88px; }
  .sec > summary { cursor: default; padding: 18px 0 6px; min-height: 0; scroll-margin-top: 88px; }
  .sec > summary::after { display: none; }
  .sec__body { padding: 0 0 16px; }
  /* Contents list on the left edge of the content width, text column on the right edge: no dead band either side. */
  .legal__grid { display: grid; grid-template-columns: 19rem minmax(0, 40rem); justify-content: space-between; column-gap: 72px; align-items: start; }
  .toc { position: sticky; top: 96px; margin: 0; }
  .toc summary { pointer-events: none; }
  .toc summary::after { display: none; }
}
/* Phones: folded sections replace the contents list, so the list is not shown. */
@media (max-width: 959px) {
  .toc { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 719px) {
  .bar__modes { display: none; } /* same as the home page: phones show the name and the button */
}

/* A near-solid bar here, so policy text doesn't show through it while reading. */
.bar { background: rgba(15, 15, 26, 0.96); }

/* Tap targets: the home page's bar items are 40px; these pages make them 44. */
.bar__title, .bar__cta { min-height: 44px; }
.bar__modes a { display: flex; align-items: center; min-height: 44px; }

/* The home page's footer is a two-column grid; here it is one even row of links. */
.legal-foot .foot { display: flex; flex-wrap: wrap; }
/* Phones: "Expand all" sits above the folded sections. Wide screens show everything open. */
.sec-all {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 8px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--indigo-light);
  font: 600 0.95rem/1 var(--sc-font-text); cursor: pointer;
}
.sec-all:focus-visible { outline: 2px solid var(--indigo-light); outline-offset: 2px; }
@media (min-width: 960px) { .sec-all { display: none; } }
/* Long section names wrap evenly instead of leaving one word alone. */
.sec > summary h2, .toc a { text-wrap: pretty; }