/* ============================================================
   TravlFun · doc.css · v1.0 · © Luxa Grid LLC
   Long-form document pages (dc- prefix): legal, help.
   ============================================================ */

body { margin: 0; }

.dc-main { max-width: 720px; margin-inline: auto; padding: 40px 24px 90px; }
.dc-main h1 { font: var(--tf-text-h1); margin: 0 0 6px; }
.dc-updated { font: var(--tf-text-body-s); color: var(--tf-ink-3); margin: 0 0 28px; }
.dc-main h2 { font: var(--tf-text-h3); margin: 34px 0 10px; }
.dc-main h3 { font: var(--tf-text-h4); margin: 22px 0 8px; }
.dc-main p, .dc-main li { font: var(--tf-text-body); color: var(--tf-ink-2); margin: 0 0 12px; }
.dc-main ul { padding-left: 22px; margin: 0 0 14px; }
.dc-main li { margin-bottom: 7px; }
.dc-main a { color: var(--tf-color-primary); text-decoration: none; }
.dc-main a:hover { text-decoration: underline; }
.dc-main b { color: var(--tf-ink); }

.dc-callout { display: flex; gap: 12px; background: var(--tf-color-primary-soft);
  border-radius: 14px; padding: 14px 16px; margin: 18px 0;
  font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.dc-callout svg { width: 18px; height: 18px; flex: none; color: var(--tf-color-primary); margin-top: 2px; }

/* FAQ accordions */
.dc-faq { border: 1px solid var(--tf-border); border-radius: 14px; background: var(--tf-surface);
  margin-bottom: 10px; overflow: hidden; }
.dc-faq summary { list-style: none; cursor: pointer; padding: 15px 18px;
  font: 600 15px var(--tf-font-display); color: var(--tf-ink);
  display: flex; align-items: center; gap: 10px; }
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after { content: "+"; margin-left: auto; color: var(--tf-color-primary);
  font: 700 18px var(--tf-font-body); transition: transform .2s var(--tf-ease); }
.dc-faq[open] summary::after { transform: rotate(45deg); }
.dc-faq summary:hover { background: var(--tf-surface-2); }
.dc-faq[open] { box-shadow: var(--tf-shadow-1); }
.dc-faq .body { padding: 0 18px 16px; font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.dc-faq .body p { margin: 0 0 8px; font: inherit; }

.dc-toc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

@media (max-width: 560px) { .dc-main { padding: 26px 18px 70px; } }