/**
 * Accounta — legal pages (privacy, terms, refund)
 * Loaded after site.css: reuses its tokens, masthead and footer, and adds
 * the document layout these three pages share.
 */

/* ---------------------------------------------------------------- banner */
.doc-hero {
  background:
    radial-gradient(760px 380px at 82% 0%, rgba(92,182,219,.2), transparent 62%),
    linear-gradient(180deg, var(--mist), var(--paper));
  border-bottom: 1px solid var(--line);
  padding-block: clamp(34px, 4.5vw, 60px) clamp(30px, 4vw, 52px);
}

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--slate); margin: 0 0 16px; }
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--brand-2); }
.crumb svg { width: 14px; height: 14px; opacity: .55; }

.doc-hero h1 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 14px; }
.doc-hero .lede { max-width: 64ch; }

.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.doc-meta span {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 30px;
  padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--slate);
}
.doc-meta svg { width: 14px; height: 14px; color: var(--brand-2); }

/* ----------------------------------------------------------------- body */
.doc { padding-block: clamp(40px, 5vw, 72px); }
.doc .wrap { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(30px, 4vw, 62px); align-items: start; }

/* table of contents */
.toc { position: sticky; top: 88px; }
.toc h2 {
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 12px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 2px solid var(--line); }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px;
  padding: 7px 12px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px; color: var(--slate); text-decoration: none; line-height: 1.4;
}
.toc a::before { content: counter(toc); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--line); }
.toc a:hover { color: var(--brand); border-left-color: var(--sky); }
.toc a:hover::before { color: var(--brand-2); }
.toc a[aria-current="true"] { color: var(--brand); font-weight: 600; border-left-color: var(--brand); }
.toc a[aria-current="true"]::before { color: var(--brand-2); }

/* prose */
.prose { max-width: 74ch; }
.prose > p:first-child { font-size: 18.5px; line-height: 1.6; color: var(--ink); }

.doc-section { padding-block: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); }
.doc-section:first-of-type { border-top: 0; padding-top: 0; }

.doc-section h2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline;
  font-size: clamp(21px, 2.1vw, 27px); margin-bottom: 14px; scroll-margin-top: 86px;
}
.doc-section h2 .n {
  font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--brand-2);
  background: var(--mist); border-radius: 7px; padding: 4px 9px; letter-spacing: .02em;
  transform: translateY(-2px);
}
.doc-section h3 { font-size: 17.5px; margin: 22px 0 10px; }

.prose p { margin: 0 0 15px; color: var(--slate); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--brand-2); text-underline-offset: 3px; }

.prose ul, .prose ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--slate); }
.prose ul > li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
  content: counter(li) "."; position: absolute; left: 0; top: 0;
  font-weight: 600; color: var(--brand-2); font-variant-numeric: tabular-nums;
}

/* a pulled-out caution or emphasis block */
.note {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px;
  background: var(--mist); border: 1px solid var(--line); border-left: 3px solid var(--brand-2);
  border-radius: 12px; padding: 16px 18px; margin: 18px 0;
}
.note svg { width: 19px; height: 19px; color: var(--brand-2); margin-top: 2px; }
.note p { margin: 0; font-size: 15px; }

/* closing contact card */
.doc-contact {
  background: var(--ink); color: rgba(255,255,255,.76); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); margin-top: 34px;
}
.doc-contact h2 { color: #fff; font-size: clamp(21px, 2.1vw, 26px); margin-bottom: 10px; }
.doc-contact p { margin: 0 0 18px; font-size: 15.5px; }
.doc-contact .links { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-contact .links a {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 10px 15px;
  font-size: 14.5px; font-weight: 500; color: #fff; text-decoration: none;
}
.doc-contact .links a:hover { background: var(--brand-2); border-color: var(--brand-2); }
.doc-contact .links svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .doc .wrap { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static;
    background: var(--mist); border: 1px solid var(--line);
    border-radius: var(--r); padding: 18px 20px;
  }
  .toc ol { column-count: 2; column-gap: 20px; border-left: 0; }
  .toc a { margin-left: 0; border-left: 0; padding: 6px 0; break-inside: avoid; }
}

@media (max-width: 560px) {
  .toc ol { column-count: 1; }
  .doc-section h2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .doc-section h2 .n { justify-self: start; transform: none; }
}