/* ==========================================================================
   BugCatch — legal pages (terms, privacy, refunds)
   Loaded after styles.css and adds nothing to the marketing page. Every token
   here comes from styles.css; this file is layout + long-form prose only.

   Long-form legal copy has one job — being read and cited — so the measure is
   held near 70ch, headings are numbered by CSS counter (renumbering is then a
   markup edit, never a find-and-replace), and the section list is sticky so a
   reader landing mid-document always knows where they are.
   ========================================================================== */

/* ------------------------------------------------------------- header ----- */
.legal-hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.legal-hero::before {
  content: ""; position: absolute; inset: -40% 20% auto; height: 420px;
  background: radial-gradient(closest-side, rgba(124, 108, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.legal-hero-in { position: relative; z-index: 2; }
.legal-hero .h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.legal-hero .sub { max-width: 620px; }

.legal-dates {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 22px; font-size: 0.85rem; color: var(--ink-faint);
}
.legal-dates b { color: var(--ink-dim); font-weight: 560; }

/* Switcher between the three documents. */
.legal-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.legal-switch a {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: rgba(255, 255, 255, 0.02);
  font-size: 0.87rem; color: var(--ink-dim);
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.legal-switch a:hover { color: var(--ink); border-color: var(--ink-faint); background: rgba(255, 255, 255, 0.05); }
.legal-switch a[aria-current="page"] {
  color: var(--ink); border-color: var(--accent);
  background: var(--accent-soft);
}

/* --------------------------------------------------------------- body ----- */
.legal-body {
  display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 100px);
  align-items: start;
}

.legal-toc { position: sticky; top: 92px; }
.legal-toc h2 {
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 14px;
}
.legal-toc ol { counter-reset: toc; }
.legal-toc a {
  display: block; padding: 6px 0 6px 30px; position: relative;
  font-size: 0.87rem; color: var(--ink-faint); line-height: 1.4;
  transition: color 0.16s;
}
.legal-toc a::before {
  counter-increment: toc; content: counter(toc);
  position: absolute; left: 0; top: 6px;
  width: 20px; text-align: right;
  font-family: var(--mono); font-size: 0.78rem; color: var(--line-bright);
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a:hover::before { color: var(--accent-2); }

/* --------------------------------------------------------------- prose ---- */
/* min-width:0 is load-bearing. A grid item's automatic minimum size is its
   content's min-content width, and .table-scroll contributes its table's
   460px min-width even though it scrolls — so without this the column floors
   at 460px and the whole page scrolls sideways on a phone. */
.prose { min-width: 0; max-width: 72ch; counter-reset: sec; }
.prose > section { scroll-margin-top: 92px; padding-top: 4px; }
.prose > section + section { margin-top: 46px; }

.prose h2 {
  position: relative; font-size: clamp(1.15rem, 2vw, 1.4rem); padding-left: 42px;
  margin-bottom: 16px;
}
.prose h2::before {
  counter-increment: sec; content: counter(sec);
  position: absolute; left: 0; top: 0.1em;
  width: 28px; text-align: right;
  font-family: var(--mono); font-size: 0.9em; font-weight: 500; color: var(--accent-2);
}
.prose h3 { font-size: 1rem; margin: 26px 0 10px; color: var(--ink); }

.prose p, .prose li { color: var(--ink-dim); font-size: 0.97rem; text-wrap: pretty; }
.prose p + p { margin-top: 14px; }
.prose a:not(.btn) { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose ul, .prose ol { margin: 14px 0; padding-left: 26px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 7px 0; padding-left: 4px; }
.prose li::marker { color: var(--line-bright); }

/* Callout for the one-paragraph summary at the top of each document, and for
   anything a reader must not skim past. */
.note {
  margin: 22px 0; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.note p { color: var(--ink-dim); font-size: 0.94rem; }
.note-title {
  display: block; margin-bottom: 8px;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 620;
}

/* Wide tables scroll inside their own box — the page body never scrolls
   sideways, at any width. */
.table-scroll { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface); color: var(--ink); font-weight: 580; white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td { color: var(--ink-dim); }

/* Contact block at the foot of each document. */
.legal-contact {
  margin-top: 46px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.legal-contact h2 { padding-left: 0; }
.legal-contact h2::before { content: none; counter-increment: none; }
.legal-contact dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 0.94rem; }
.legal-contact dt { color: var(--ink-faint); }
.legal-contact dd { margin: 0; color: var(--ink-dim); }

/* --------------------------------------------------------- placeholders ---
   Every span marked .fill is a value only the business can supply — the
   registered entity, the jurisdiction, the payment processor. It is styled to
   be impossible to miss on the page precisely so this document cannot be
   published while it still says "[registered entity]". Delete the wrapper, not
   just the brackets, once the real value is in. */
.fill {
  padding: 1px 6px; border-radius: 5px;
  background: rgba(255, 159, 67, 0.14); border: 1px dashed rgba(255, 159, 67, 0.55);
  color: var(--sev-high); font-size: 0.94em; white-space: nowrap;
}

.draft-banner {
  border-bottom: 1px solid rgba(255, 159, 67, 0.35);
  background: rgba(255, 159, 67, 0.1);
  color: #ffcf9b;
  font-size: 0.86rem;
}
.draft-banner .wrap { display: flex; gap: 10px; align-items: flex-start; padding-top: 11px; padding-bottom: 11px; }
.draft-banner svg { flex: none; margin-top: 2px; font-size: 1.05rem; color: var(--sev-high); }

/* ---------------------------------------------------------- responsive ---- */
@media (max-width: 900px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc {
    position: static;
    padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--bg-2);
  }
  .legal-toc ol { columns: 2; column-gap: 24px; }
  .legal-toc a { break-inside: avoid; }
}

@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
  .legal-contact dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-contact dt { margin-top: 10px; }
}

/* ==========================================================================
   Touch
   --------------------------------------------------------------------------
   The table of contents is a column of thirteen one-line links about 31px
   apart. On a phone that is a column of thirteen chances to open the wrong
   section, so the rows get the height a thumb needs. Keyed on the pointer, not
   the width — a narrow desktop window keeps the compact list.
   ========================================================================== */
@media (pointer: coarse) {
  .legal-toc a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Prose links stay inline; only their target grows. The mailto links are the
     ones this is for — "email support@…" is an instruction people follow by
     tapping it, in the document they were reading when something went wrong.

     The leading opens up first. An expander tall enough to be comfortable
     reaches into the line above unless there is room for it, and a link that
     steals taps from the sentence over it is worse than a small one. */
  .legal-body p, .legal-body li { line-height: 1.95; }
  .legal-body a { position: relative; }
  .legal-body a::after {
    content: '';
    position: absolute;
    inset: -11px -4px;
  }
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
}