/* ============================================================================
   legal.css — shared layout for the policy pages
   (privacy-policy.html, terms.html, refund-policy.html,
    digital-product-policy.html)
   ========================================================================== */

.legal-hero {
  padding: clamp(36px, 6vw, 64px) 0 clamp(24px, 4vw, 36px);
  background:
    radial-gradient(760px 420px at 12% -20%, var(--primary-soft), transparent 62%);
  border-bottom: 1px solid var(--border);
}
.legal-hero h1 { margin-bottom: 10px; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.legal-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .88rem; color: var(--muted); margin: 0;
}
.legal-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.legal-hero__meta svg { color: var(--primary); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   TEMPLATE NOTICE
   The yellow banner at the top of each policy page. DELETE the whole
   <aside class="template-notice"> block once you have written your own text.
   ------------------------------------------------------------------------ */
.template-notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 20px 22px;
  margin: clamp(24px, 4vw, 36px) 0 0;
}
.template-notice__icon { flex: 0 0 auto; color: #b45309; margin-top: 2px; }
.template-notice h2 { font-size: 1rem; margin: 0 0 6px; }
.template-notice p { font-size: .92rem; color: var(--muted); margin: 0 0 8px; }
.template-notice p:last-child { margin: 0; }
.template-notice strong { color: var(--text); }

/* ---------------------------------------------------------------------------
   LAYOUT: sticky contents rail + document body
   ------------------------------------------------------------------------ */
.legal-layout {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
}
/* Without this, a wide table inside the document sets the grid column's
   min-content width and pushes the whole page sideways on small screens. */
.legal-layout > * { min-width: 0; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } }

.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) {
  .legal-toc {
    position: static;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px;
  }
}
.legal-toc h2 {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc a {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--muted); line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.legal-toc a:hover { color: var(--text); background: var(--surface-2); }
.legal-toc a.is-current { color: var(--primary); border-left-color: var(--primary); background: var(--primary-soft); font-weight: 600; }

/* ---------------------------------------------------------------------------
   DOCUMENT BODY
   ------------------------------------------------------------------------ */
.legal-body { max-width: 74ch; font-size: 1.02rem; }
.legal-body > section { padding-top: 8px; margin-bottom: 40px; }
.legal-body > section:last-child { margin-bottom: 0; }

.legal-body h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-body h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.legal-body p { color: var(--muted); }
.legal-body ul, .legal-body ol { color: var(--muted); padding-left: 1.25em; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--primary); }
.legal-body strong { color: var(--text); }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }

.legal-body table {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  font-size: .93rem;
}
.legal-body .table-scroll { overflow-x: auto; max-width: 100%; }
.legal-body th, .legal-body td {
  text-align: left; padding: 11px 14px;
  border: 1px solid var(--border); color: var(--muted);
  vertical-align: top;
}
.legal-body th { background: var(--surface); color: var(--text); font-weight: 650; white-space: nowrap; }

/* Placeholders you must replace ------------------------------------------- */
.ph {
  background: var(--accent-soft); color: #92400e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; font-weight: 600;
  /* Placeholders are often long sentences, so they must be able to wrap. */
  overflow-wrap: anywhere; word-break: break-word;
  /* The tint and dashed underline are drawn with box-shadow and
     text-decoration rather than padding and a border, because inline padding
     at the end of a wrapped line pushes the page sideways on narrow screens. */
  box-shadow: 0 0 0 3px var(--accent-soft);
  text-decoration: underline dashed color-mix(in srgb, var(--accent) 70%, transparent);
  text-underline-offset: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) { .ph { color: #fcd34d; } }

/* "Choose one" decision blocks in the refund policy ------------------------ */
.choose {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: 20px 22px; margin: 20px 0;
}
.choose__label {
  display: inline-block; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
  background: var(--primary-soft); padding: 4px 10px;
  border-radius: var(--radius-pill); margin-bottom: 12px;
}
.choose h3 { margin-top: 0; }
.choose p:last-child { margin-bottom: 0; }

/* Callout used for important non-legal notes ------------------------------- */
.legal-note {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin: 20px 0;
  font-size: .94rem;
}
.legal-note p:last-child { margin-bottom: 0; }

/* Footer of the document --------------------------------------------------- */
.legal-end {
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.legal-end p { font-size: .88rem; color: var(--muted); margin: 0; }

.legal-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.legal-related a {
  font-size: .85rem; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--muted); text-decoration: none;
  transition: all var(--t-fast);
}
.legal-related a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

@media print {
  .legal-toc, .template-notice, .legal-end, .breadcrumb { display: none !important; }
  .legal-layout { grid-template-columns: 1fr; padding: 0; }
  .legal-body { max-width: none; }
}