/* ==========================================================================
   Luseed — legal pages: /privacy, /terms, /delete-account
   Loaded on top of site.css AND support.css: the header band (sp-head,
   sp-eyebrow), the flat backdrop (page-flat) and the palette come from
   /support so the two read as one family. Only the long-form reading layout
   lives here (lg-*).
   ========================================================================== */

.lg-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0;
  color: #7e71a6; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.lg-meta time { color: #b7aed2 }

/* ---------- two columns: contents | prose ----------------------------- */

.lg-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start;
  max-width: 1328px; margin-inline: auto;
  padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 96px);
}

.lg-aside { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 18px }

.lg-toc {
  padding: 20px 22px; border: 1px solid #1e1735; border-radius: 16px; background: #0a0716;
}
.lg-toc summary {
  list-style: none; cursor: pointer;
  color: #7e71a6; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
}
.lg-toc summary::-webkit-details-marker { display: none }
.lg-toc ol {
  display: flex; flex-direction: column; gap: 2px;
  margin: 14px 0 0; padding: 0; list-style: none; counter-reset: lg-toc;
}
.lg-toc li { counter-increment: lg-toc }
.lg-toc a {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 5px 0;
  color: #948ab4; font-size: 13.5px; line-height: 1.45; text-decoration: none;
  transition: color .15s ease;
}
.lg-toc a:before {
  content: counter(lg-toc, decimal-leading-zero);
  color: #4e4670; font-family: var(--serif); font-size: 11.5px; line-height: 1.9;
}
.lg-toc a:hover, .lg-toc a:focus-visible { color: #e4dbff }

.lg-related { display: flex; flex-direction: column; gap: 8px; padding: 0 4px }
.lg-related__label {
  margin: 0 0 2px; color: #5f5684; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
}
.lg-related a {
  display: flex; align-items: center; gap: 8px;
  color: #9a85d6; font-size: 13px; letter-spacing: .04em; text-decoration: none;
}
.lg-related a .icon { font-size: 14px; stroke-width: 1.7 }
.lg-related a:hover, .lg-related a:focus-visible { color: #cbbcff }

/* ---------- prose ------------------------------------------------------ */

.lg-prose {
  max-width: 78ch;
  color: #a79fc2; font-size: 15.5px; line-height: 1.75; text-wrap: pretty;
}
.lg-prose > section { scroll-margin-top: 24px }
.lg-prose > section + section { margin-top: 52px; padding-top: 44px; border-top: 1px solid #15102a }

.lg-prose h2 {
  margin: 0 0 18px; color: #f3effc;
  font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.3;
}
.lg-prose h3 {
  margin: 28px 0 10px; color: #cbbcff;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.lg-prose p { margin: 0 0 14px }
.lg-prose p:last-child { margin-bottom: 0 }
.lg-prose strong { color: #e4dcf7; font-weight: 600 }
.lg-prose a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(196, 181, 253, .4) }
.lg-prose a:hover, .lg-prose a:focus-visible { color: #ece4ff; text-decoration-color: currentColor }

.lg-prose ul {
  display: flex; flex-direction: column; gap: 9px;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.lg-prose ul li { position: relative; padding-left: 22px }
.lg-prose ul li:before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: #6e56c8;
}

/* ---------- summary card (In short) ----------------------------------- */

.lg-card {
  padding: 26px 30px; border: 1px solid #2a2149; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 22, 58, .42), #0a0716);
}
.lg-card ul { margin: 0 }
.lg-card ul li { padding-left: 28px; color: #b7aed2 }
.lg-card ul li:before {
  left: 0; top: .42em; width: 16px; height: 16px; border-radius: 0; background: #8f7bd6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 12.6l5.1 5.1L19.8 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 12.6l5.1 5.1L19.8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- callout (an important aside inside the prose) -------------- */

.lg-callout {
  margin: 0 0 16px; padding: 16px 20px;
  border: 1px solid #241c42; border-left: 2px solid #6e56c8; border-radius: 10px; background: #0a0716;
  color: #b7aed2;
}

/* ---------- numbered steps (delete-account) ---------------------------- */

.lg-steps {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 18px; padding: 0; list-style: none; counter-reset: lg-step;
}
.lg-steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  counter-increment: lg-step; color: #b7aed2;
}
.lg-steps li:before {
  content: counter(lg-step);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #33275c;
  color: #c4b5fd; font-family: var(--serif); font-size: 17px;
  background: radial-gradient(circle at 50% 40%, rgba(120, 86, 220, .2), rgba(10, 8, 22, 0));
}
.lg-steps li > span { padding-top: 8px }

/* ---------- two-column definition table (what / how long) -------------- */

.lg-table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14.5px }
.lg-table th, .lg-table td {
  padding: 13px 16px 13px 0; border-bottom: 1px solid #191330;
  text-align: left; vertical-align: top; line-height: 1.6;
}
.lg-table thead th {
  padding-top: 0; color: #7e71a6; font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
}
.lg-table tbody th { width: 36%; color: #e4dcf7; font-weight: 500 }
.lg-table td { color: #a79fc2 }

/* ---------- owner placeholders ------------------------------------------
   Every "[Owner to confirm: ...]" in these pages is wrapped in this, so an
   unresolved one is impossible to miss on the page and easy to grep for in
   the source. Remove the mark (and the brackets) once the fact is settled. */

.lg-confirm {
  padding: 1px 6px; border: 1px dashed rgba(224, 164, 74, .7); border-radius: 5px;
  background: rgba(224, 164, 74, .12); color: #f0c987;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
p.lg-confirm { display: block; margin: 0 0 14px; padding: 10px 14px; line-height: 1.65 }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .lg-layout { grid-template-columns: 1fr; gap: 28px }
  .lg-aside { position: static }
}

@media (max-width: 640px) {
  .lg-meta { font-size: 10.5px; letter-spacing: .14em }
  .lg-prose { font-size: 14.5px; line-height: 1.72 }
  .lg-prose > section + section { margin-top: 40px; padding-top: 34px }
  .lg-card { padding: 20px 20px; border-radius: 14px }
  .lg-toc { padding: 16px 18px; border-radius: 14px }

  /* the table becomes stacked label/value blocks */
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table th, .lg-table td { display: block; width: auto }
  .lg-table thead { display: none }
  .lg-table tr { padding: 12px 0; border-bottom: 1px solid #191330 }
  .lg-table th, .lg-table td { padding: 0; border: 0 }
  .lg-table tbody th { width: auto; margin-bottom: 4px }
}