/* Readyo · legal pages (privacy, terms, support) and the 404 page. */

/* ---------- Legal pages + 404 ---------- */
.topbar {
  width: min(100% - 2 * var(--page-gutter), var(--page-max));
  margin: var(--page-gutter) auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 0.6rem 0.6rem 0.6rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-card);
  background: var(--color-card);
}
.topbar + main { margin-top: var(--card-gap); }
.doc-head {
  position: relative; isolation: isolate; overflow: clip;
  width: min(100% - 2 * var(--page-gutter), var(--page-max));
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-text);
}
.doc-head::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0.75rem 0.75rem 0.75rem auto; width: 30%;
  border-radius: calc(var(--radius-card) - 0.4rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50.0 0.0 L53.7 31.4 L66.8 9.3 L60.6 34.2 L85.4 14.6 L65.8 39.4 L87.0 34.7 L68.6 46.3 L100.0 50.0 L68.6 53.7 L92.5 67.6 L65.8 60.6 L85.4 85.4 L60.6 65.8 L66.1 88.8 L53.7 68.6 L50.0 100.0 L46.3 68.6 L33.2 90.7 L39.4 65.8 L14.6 85.4 L34.2 60.6 L13.0 65.3 L31.4 53.7 L0.0 50.0 L31.4 46.3 L7.5 32.4 L34.2 39.4 L14.6 14.6 L39.4 34.2 L33.9 11.2 L46.3 31.4Z'/%3E%3C/svg%3E") no-repeat 50% 50% / 86% auto,
    linear-gradient(180deg, var(--color-lavender-2), var(--color-lavender) 50%, #b7de46);
}
.doc-head::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1'%3E%3Cpath vector-effect='non-scaling-stroke' d='M-40 430 L1040 170M-40 690 L1040 420M-40 250 L760 60'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.doc-head .wrap { width: auto; max-width: min(40rem, 62%); margin: 0; }
.doc-head__inner { display: grid; justify-items: start; gap: var(--space-md); }
.doc-head .title { font-size: clamp(2.6rem, 5.5vw, 4.75rem); letter-spacing: -0.045em; line-height: 1; }
.doc-head .body { margin-top: var(--space-md); }
.doc-head .btn { margin-top: var(--space-lg); }
.lost { display: grid; justify-items: start; }
.doc-tabs, .doc-langs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.doc-tabs a, .doc-langs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong);
  color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
}
.doc-tabs a[aria-current="page"] { background: #fff; color: var(--color-ink); border-color: #fff; font-weight: 700; }
.doc-tabs { margin-bottom: var(--space-md); }
.doc-langs { margin-top: var(--space-xs); }
.doc-langs a:hover, .doc-tabs a:hover { border-color: var(--color-lavender); }

.doc.wrap {
  margin-top: var(--card-gap);
  padding: clamp(2rem, 6vw, 5.5rem) var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--color-sheet); color: #1c1b4a;
}
.doc__body { max-width: 46rem; line-height: 1.7; }
.doc__body > * + * { margin-top: var(--space-md); }
.doc h2 { margin-top: clamp(2.25rem, 4vw, 3rem); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink); }
.doc h3 { margin-top: var(--space-xl); font-size: var(--text-md); font-weight: 700; line-height: 1.35; color: var(--color-ink); }
.doc h2 + *, .doc h3 + * { margin-top: var(--space-xs); }
.doc ul:not([class]) { padding-left: 1.25rem; }
.doc li + li { margin-top: 0.35rem; }
.doc strong { color: var(--color-ink); }
.summary {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: #f1f9d4;
}
.summary > strong { display: block; margin-bottom: var(--space-xs); font-size: var(--text-md); }
.summary ul { padding-left: 1.25rem; }
.tablewrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-line-ink); }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.tablewrap th, .tablewrap td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line-ink); }
.tablewrap th { background: var(--color-sheet-2); color: var(--color-ink); font-weight: 700; }
.tablewrap tr:last-child td { border-bottom: 0; }
.doc-lang { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--space-lg); border-top: 1px solid var(--color-line-ink); }
.doc-lang[dir="rtl"] ul { padding-left: 0; padding-right: 1.25rem; }
.on-navy { color: var(--color-text); }
.on-navy .body, .on-navy .small { color: var(--color-text-muted); }
/* The article card is light: its small print (the "Updated …" line) needs the dark muted ink (about 1.9:1 before). */
.doc .small { color: var(--color-ink-muted); }

@media (max-width: 64rem) {
  .doc-head .wrap { max-width: 100%; }
  .doc-head::before { display: none; }
}