/* 6Novel document pages: Privacy Policy, Terms of Service, account deletion.
 * Same tokens, fonts, navigation and footer as the landing page (assets/landing.css), set for long reading: an ivory page,
 * Cormorant headings, Inter body, rose as the accent and the brand gradient only on rules and small marks. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-variable.woff2) format("woff2"); }

:root {
  --color-primary: #C2414F;
  --color-secondary: #F0C2AE;
  --color-deep-wine: #54232B;
  --color-dark: #35191F;
  --color-ivory: #FFF8F4;
  --color-blush: #F9EAE5;
  --gradient-brand: linear-gradient(135deg, #C2414F 0%, #F0C2AE 100%);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Reading surface (light by default, burgundy in dark mode). */
  --page: var(--color-ivory);
  --ink: #35191F;
  --ink-soft: #5C3D43;
  --head: var(--color-deep-wine);
  --accent: var(--color-primary);
  --card: var(--color-blush);
  --line: rgba(84, 35, 43, .16);
  --maxw: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #2A1418;
    --ink: #F4E6E0;
    --ink-soft: #CDB6B0;
    --head: #FFF8F4;
    --accent: #F0A9A0;
    --card: rgba(240, 194, 174, .07);
    --line: rgba(240, 194, 174, .18);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 4px; }

/* ───────── Navigation (the landing page's solid state) ───────── */
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(53, 25, 31, .96); box-shadow: 0 1px 0 rgba(240, 194, 174, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; gap: 32px; max-width: var(--maxw); margin-inline: auto; padding: 12px var(--gutter); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-ivory); margin-right: auto; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand__word { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: .005em; line-height: 1; }
.nav__links { display: flex; gap: 34px; }
.nav__links a { position: relative; color: rgba(255, 248, 244, .86); text-decoration: none; font-size: .95rem; font-weight: 500; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gradient-brand); transition: right .5s cubic-bezier(.22, 1, .36, 1); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--color-ivory); }
.nav__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; color: var(--color-ivory); font-weight: 600; font-size: .95rem; text-decoration: none; background: linear-gradient(var(--color-dark), var(--color-dark)) padding-box, var(--gradient-brand) border-box; transition: transform .2s, box-shadow .5s; }
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(194, 65, 79, .8); }

/* ───────── The document ───────── */
main.doc { padding: clamp(44px, 8vw, 92px) 0 clamp(64px, 10vw, 120px); }
main.doc .wrap { max-width: 840px; margin-inline: auto; padding-inline: var(--gutter); }

main.doc h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.7rem, 7vw, 4.8rem); line-height: 1; letter-spacing: -.01em; color: var(--head); margin: 0 0 18px; text-wrap: balance; }
main.doc h1::after { content: ""; display: block; width: 76px; height: 3px; margin-top: 26px; background: var(--gradient-brand); border-radius: 2px; }
.upd { margin: 0 0 30px; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

main.doc h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 3.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.005em; color: var(--head); margin: 56px 0 12px; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 12px); }
main.doc h3 { font-size: 1rem; font-weight: 650; letter-spacing: .01em; color: var(--head); margin: 28px 0 6px; }
main.doc p { margin: 0 0 16px; color: var(--ink-soft); }
main.doc p:first-of-type { font-size: 1.08rem; }
main.doc strong { color: var(--ink); font-weight: 650; }
main.doc em { font-style: italic; }
main.doc a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
main.doc a:hover { text-decoration-color: var(--color-secondary); }

main.doc ul, main.doc ol { margin: 0 0 18px; padding-left: 1.3em; color: var(--ink-soft); }
main.doc li { margin: 7px 0; padding-left: .25em; }
main.doc li::marker { color: var(--accent); font-weight: 650; }

/* Contents list and the "in short" call-out. */
main.doc .toc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin: 30px 0 14px; font-size: .95rem; }
main.doc .toc strong { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
main.doc .toc strong::before { content: ""; width: 34px; height: 2px; background: var(--gradient-brand); }
main.doc .toc ol { margin: 6px 0 0; padding-left: 1.3em; columns: 2; column-gap: 34px; }
main.doc .toc li { margin: 4px 0; break-inside: avoid; }
main.doc .toc a { text-decoration: none; color: var(--ink-soft); }
main.doc .toc a:hover { color: var(--accent); text-decoration: underline; }

main.doc .note { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px 18px 26px; margin: 26px 0; color: var(--ink-soft); overflow: hidden; }
main.doc .note::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gradient-brand); }
main.doc .note strong { color: var(--head); }

main.doc .tablewrap { overflow-x: auto; margin: 18px 0 22px; border: 1px solid var(--line); border-radius: 14px; }
main.doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .92rem; line-height: 1.55; }
main.doc th, main.doc td { padding: 12px 15px; text-align: left; vertical-align: top; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
main.doc tr:last-child td { border-bottom: 0; }
main.doc th { background: var(--card); color: var(--head); font-weight: 650; font-size: .82rem; letter-spacing: .04em; }

/* ───────── Footer (as on the landing page) ───────── */
footer.foot { background: var(--color-dark); color: var(--color-ivory); border-top: 1px solid rgba(240, 194, 174, .14); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 44px; max-width: var(--maxw); margin-inline: auto; padding: 44px var(--gutter); }
.brand--foot { margin-right: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.foot__links a { color: rgba(255, 248, 244, .8); text-decoration: none; font-size: .95rem; padding: 8px 0; background-image: var(--gradient-brand); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s cubic-bezier(.22, 1, .36, 1), color .2s; }
.foot__links a:hover, .foot__links a:focus-visible { color: var(--color-ivory); background-size: 100% 2px; }
.foot__copy { flex-basis: 100%; margin: 0; font-size: .85rem; color: rgba(255, 248, 244, .6); padding-top: 22px; border-top: 1px solid rgba(240, 194, 174, .1); }

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav__links { display: none; }
  .nav__inner { gap: 16px; }
  .brand__word { font-size: 1.7rem; }
  main.doc h2 { margin-top: 44px; }
  main.doc .toc ol { columns: 1; }
  .foot__inner { padding-block: 36px; }
}
@media print {
  header.nav, footer.foot { display: none; }
  body { background: #fff; color: #000; }
  main.doc .toc { display: none; }
}