/* Totu Tales — policy pages (Privacy, Terms, Delete account, Contact).
   Same palette and type as the homepage, without the film or the animation. */
:root {
  --cream: #F7E9D0;
  --cream-deep: #EFDDBD;
  --paper: #FFF8EC;
  --ink: #3B2A1E;
  --ink-soft: #6A5335;
  --muted: #8A7760;
  --maroon: #8E2A22;
  --maroon-dark: #6F1F19;
  --night: #1E2A44;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito", "Noto Sans Devanagari", "Noto Sans Gujarati", system-ui, sans-serif;
  --weave: repeating-linear-gradient(0deg, rgba(59,42,30,.035) 0 1px, transparent 1px 3px),
           repeating-linear-gradient(90deg, rgba(59,42,30,.03) 0 1px, transparent 1px 3px);
  --flank: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%238E2A22%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1%201L7%207M7%201L1%207%22/%3E%3Cpath%20d%3D%22M12%201L18%207M18%201L12%207%22/%3E%3Cpath%20d%3D%22M23%201L29%207M29%201L23%207%22/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--weave), var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(247,233,208,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(59,42,30,.1); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand b { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .01em; }
.nav-cta { font: 700 15px/1 var(--sans); text-decoration: none; color: var(--paper); background: var(--maroon); padding: 12px 18px; border-radius: 999px; outline: 1.5px dashed rgba(255,248,236,.55); outline-offset: -5px; transition: background .2s; }
.nav-cta:hover { background: var(--maroon-dark); }

/* Page */
.doc { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.eyebrow::after { content: ""; width: 30px; height: 8px; background: var(--flank) center / contain no-repeat; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.01em; margin-top: 12px; }
.doc .updated { margin-top: 12px; font-size: 14px; color: var(--muted); }
.doc .lede { margin-top: 24px; font-size: 19px; color: var(--ink-soft); }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.25; margin: 48px 0 12px; scroll-margin-top: 96px; }
.doc h3 { font-size: 17px; font-weight: 700; margin: 24px 0 6px; }
.doc p, .doc li { font-size: 17px; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 10px 0 0 22px; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--maroon); }
.doc a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { color: var(--maroon-dark); }
.doc strong { font-weight: 700; }

/* "In short" summary and highlighted boxes */
.box { margin-top: 28px; padding: 22px 24px; background: var(--paper); border-radius: 18px; box-shadow: 0 1px 0 rgba(59,42,30,.06), 0 12px 30px -20px rgba(59,42,30,.35); outline: 1.5px dashed rgba(142,42,34,.25); outline-offset: -8px; }
.doc .box h2, .doc .box h3 { margin-top: 0; }
.box ul { margin-top: 8px; }
.steps { counter-reset: s; list-style: none; margin-left: 0 !important; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--maroon); color: var(--paper); font: 700 15px/1 var(--sans); }

/* Details table (who we are, contacts) */
.facts { margin-top: 14px; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 17px; }
.facts dt { font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; }

.toc { margin-top: 28px; padding-top: 20px; border-top: 1px dashed rgba(59,42,30,.2); font-size: 15px; }
.toc ol { margin: 8px 0 0 20px; columns: 2; column-gap: 32px; }
.toc li { font-size: 15px; break-inside: avoid; }
.toc li + li { margin-top: 4px; }

/* Footer — matches the homepage */
footer { background: var(--night); color: #E9DFCF; padding: 56px 0 28px; text-align: center; }
footer .brand { color: #fff; justify-content: center; }
footer .tag { font-family: var(--serif); font-style: italic; color: #C9BBA5; margin-top: 10px; font-size: 17px; }
.credits { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; font-size: 15px; color: #C9C3B6; }
.credits a { font-family: var(--serif); font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(231,184,102,.55); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.credits a:hover { color: #E7B866; border-bottom-color: #E7B866; }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 14px; }
.legal-links a { color: #C9C3B6; text-decoration: none; transition: color .2s; }
.legal-links a:hover, .legal-links a[aria-current="page"] { color: #E7B866; }
footer .bottom { margin-top: 28px; padding-top: 18px; border-top: 1px dashed rgba(233,223,207,.2); display: flex; justify-content: center; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: #9FA8BC; }
footer .bottom a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(159,168,188,.4); transition: color .2s; }
footer .bottom a:hover { color: #E7B866; }

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: 64px; }
  .brand b { font-size: 19px; }
  .nav-cta { padding: 10px 14px; font-size: 14px; }
  .doc { padding: 40px 16px 72px; }
  .doc .lede { font-size: 17px; }
  .doc h2 { font-size: 22px; margin-top: 40px; }
  .doc p, .doc li, .facts { font-size: 16px; }
  .box { padding: 18px 18px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd + dt { margin-top: 10px; }
  .toc ol { columns: 1; }
  .credits { flex-direction: column; gap: 6px; }
}