/* The privacy pages (/privacy, and /privacy-app in the same look): a page for reading, over /site/pages.css (the bar). */
body.privacy-body { margin: 0; min-height: 100vh; background: #04070a radial-gradient(ellipse 120% 620px at 50% -120px, #15303a, #04070a 70%) no-repeat; color: #f8f0dc; }
.gu-page.privacy-body #page { max-width: 1080px; margin: 0 auto; padding: calc(60px + 56px) 24px 64px; box-sizing: border-box; font-family: var(--gu-sans); }
.gu-page .privacy a { color: #f5dfaa; text-underline-offset: 3px; text-decoration-color: #dbbc7680; }
.gu-page .privacy a:hover { color: #fff; text-decoration-color: currentColor; }
.gu-page .privacy a:focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; border-radius: 3px; }

/* the top: title, what it is, when it changed */
.gu-page .privacy-hero { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin: 0 0 28px; }
.gu-page .privacy-hero h1 { margin: 0; font: 400 52px/1.05 var(--gu-serif); letter-spacing: -.01em; color: #f8f0dc; }
.gu-page .privacy-lead { margin: 0; font-size: 18px; line-height: 1.6; color: #d9cfbd; }
.gu-page .privacy-date, .gu-page .privacy-app-note { margin: 0; font-size: 14px; line-height: 1.5; color: #a9babd; }
.gu-page .privacy-date { margin-top: 4px; }
.gu-page .privacy-date time { color: #d9cfbd; }

/* the short version: a warm box, two columns on a wide screen */
.gu-page .privacy-short { margin: 0 0 36px; padding: 28px 32px; border-radius: 20px; background: linear-gradient(145deg, #2a2316e6, #15120ce6); border: 1px solid #dbbc7647; box-shadow: 0 24px 60px #00000080; }
.gu-page .privacy-short h2 { margin: 0 0 14px; font: 400 26px/1.2 var(--gu-serif); color: #f8f0dc; }
.gu-page .privacy-short ul { margin: 0; padding-left: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 10px; }
.gu-page .privacy-short li { font-size: 16px; line-height: 1.55; color: #ede4d0; }
.gu-page .privacy-short li::marker { color: #dbbc76; }

/* the contents beside the article */
.gu-page .privacy-grid { display: grid; grid-template-columns: 230px minmax(0, 680px); gap: 48px; align-items: start; }
.gu-page .privacy-toc { position: sticky; top: calc(60px + 28px); padding-top: 38px; }
.gu-page .privacy-toc h2 { margin: 0 0 12px; font: 400 19px/1.3 var(--gu-serif); color: #f8f0dc; }
.gu-page .privacy-toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #a9babd; }
.gu-page .privacy-toc a { color: #d9cfbd; text-decoration: none; }
.gu-page .privacy-toc a:hover { color: #f8f0dc; text-decoration: underline; }
.gu-page .privacy-toc a[aria-current="true"] { color: #f5dfaa; }

/* the article: sections divided by a line, not a card each; a comfortable measure */
.gu-page .privacy-body-text > section { padding: 36px 0; border-top: 1px solid #d7e3e724; scroll-margin-top: calc(60px + 16px); }
.gu-page .privacy-body-text h2 { margin: 0 0 14px; font: 400 30px/1.2 var(--gu-serif); color: #f8f0dc; scroll-margin-top: calc(60px + 52px); }
.gu-page .privacy-body-text p, .gu-page .privacy-body-text li, .gu-page .privacy-body-text dd { font-size: 17px; line-height: 1.7; color: #e3dccd; }
.gu-page .privacy-body-text p { margin: 0 0 14px; }
.gu-page .privacy-body-text p:last-child { margin-bottom: 0; }
.gu-page .privacy-body-text ul { margin: 0 0 14px; padding-left: 22px; }
.gu-page .privacy-body-text li { margin: 0 0 8px; }
.gu-page .privacy-body-text li::marker { color: #dbbc76; }
.gu-page .privacy-body-text strong { color: #f8f0dc; font-weight: 600; }
.gu-page .privacy-list { margin: 0 0 14px; }
.gu-page .privacy-list dt { margin: 26px 0 6px; font: 400 21px/1.3 var(--gu-serif); color: #f5dfaa; }
.gu-page .privacy-list dt:first-child { margin-top: 8px; }
.gu-page .privacy-list dd { margin: 0; }
/* "Our legal reason: …": set apart, small, with a gold rule */
.gu-page .privacy-basis { display: block; margin: 10px 0 0; padding-left: 14px; border-left: 2px solid #dbbc7666; font-size: 15px; line-height: 1.55; color: #b8c5c7; }
.gu-page .privacy-small { font-size: 14px !important; color: #a9babd !important; }

.gu-page .privacy code { font: 14px ui-monospace, SFMono-Regular, Consolas, monospace; color: #f5dfaa; background: #dbbc761a; padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }

/* the tables (cookies, how long) */
.gu-page .privacy-table-wrap { margin: 18px 0; border: 1px solid #d7e3e73d; border-radius: 14px; overflow: hidden; background: #0a161e99; }
.gu-page .privacy-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gu-page .privacy-table th, .gu-page .privacy-table td { padding: 12px 16px; text-align: left; vertical-align: top; line-height: 1.5; border-top: 1px solid #d7e3e71f; }
.gu-page .privacy-table thead th { border-top: 0; background: #ffffff08; color: #a9babd; font-size: 14px; font-weight: 500; }
.gu-page .privacy-table tbody th { color: #f8f0dc; font-weight: 600; }
.gu-page .privacy-table tbody th code { white-space: nowrap; overflow-wrap: normal; }
.gu-page .privacy-table td { color: #d9cfbd; }
.gu-page .privacy-keep tbody th { width: 58%; font-weight: 500; }

/* the app's page: no bar above it, and one column */
.gu-page.privacy-app-body #page { max-width: 760px; padding-top: 56px; }
.gu-page .privacy-app .privacy-body-text { max-width: 680px; }
.gu-page .privacy-app .privacy-body-text > p { margin: 0 0 16px; }
.gu-page .privacy-app .privacy-body-text > p:first-child { margin-top: 0; }
.gu-page .privacy-app-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid #d7e3e724; }

@media (max-width: 900px) {
  .gu-page .privacy-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gu-page .privacy-toc { position: static; padding: 0 0 20px; }
  .gu-page .privacy-toc ol { display: block; columns: 2; column-gap: 28px; }
  .gu-page .privacy-toc li { margin: 0 0 8px; break-inside: avoid; }
}
@media (max-width: 700px) {
  .gu-page .privacy-short ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .gu-page.privacy-body #page { padding: calc(60px + 28px) 16px 40px; }
  .gu-page.privacy-app-body #page { padding-top: 28px; }
  .gu-page .privacy-hero { gap: 10px; margin-bottom: 20px; }
  .gu-page .privacy-hero h1 { font-size: 36px; line-height: 1.1; }
  .gu-page .privacy-lead { font-size: 16px; line-height: 1.55; }
  .gu-page .privacy-short { padding: 20px 18px; border-radius: 18px; margin-bottom: 24px; }
  .gu-page .privacy-short h2 { font-size: 23px; }
  .gu-page .privacy-short li { font-size: 15.5px; }
  .gu-page .privacy-toc ol { columns: 1; }
  .gu-page .privacy-body-text > section { padding: 26px 0; }
  .gu-page .privacy-body-text h2 { font-size: 25px; }
  .gu-page .privacy-body-text p, .gu-page .privacy-body-text li, .gu-page .privacy-body-text dd { font-size: 16px; line-height: 1.65; }
  .gu-page .privacy-list dt { font-size: 19px; margin-top: 22px; }
  /* the tables become a card per row */
  .gu-page .privacy-table thead { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .gu-page .privacy-table, .gu-page .privacy-table tbody, .gu-page .privacy-table tr, .gu-page .privacy-table th, .gu-page .privacy-table td { display: block; width: auto; }
  .gu-page .privacy-table tr { padding: 12px 14px; border-top: 1px solid #d7e3e71f; }
  .gu-page .privacy-table tbody tr:first-child { border-top: 0; }
  .gu-page .privacy-table th, .gu-page .privacy-table td { padding: 0; border: 0; }
  .gu-page .privacy-table td { margin-top: 4px; }
  .gu-page .privacy-keep tbody th { width: auto; }
}