/* ============================================================================
   page.css — the "quiet pages": privacy, terms, support, studio.
   Loaded AFTER styles.css, so it reuses every design token + the shared
   header/footer/buttons chrome. This file only styles the prose body.
   ========================================================================== */

.legal {
  max-width: var(--maxw-narrow);
  margin-inline: auto;
  padding: clamp(40px, 7vw, 80px) var(--pad) 24px;
}

.legal__kicker {
  margin: 0 0 14px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: .82rem; color: var(--accent);
}
.legal > h1 {
  font-weight: 900; font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 16px;
}
.legal__lead { font-size: clamp(1.12rem, 1.7vw, 1.3rem); color: var(--muted); margin: 0; max-width: 60ch; line-height: 1.55; }
.legal__meta { font-size: .92rem; color: var(--muted); margin: 22px 0 0; }
.legal a { color: var(--terracotta-2); text-underline-offset: 3px; font-weight: 700; }
.legal a:hover { color: var(--terracotta); text-decoration: underline; }

/* "the short version" summary card */
.summary {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px); margin: 40px 0 8px; box-shadow: var(--shadow-sm);
}
.summary h2 { margin: 0 0 16px; font-size: 1.2rem; font-weight: 800; }
.summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.summary li { position: relative; padding-left: 30px; }
.summary li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 11px; height: 11px;
  border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 18%, transparent);
}
.summary li.no::before { background: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 18%, transparent); }

/* on-this-page nav */
.legal nav[aria-label="On this page"] {
  margin: 30px 0 4px; padding: 16px 20px; border: 1px dashed var(--line-strong);
  border-radius: var(--r-md); font-size: .95rem; color: var(--muted);
}
.legal nav[aria-label="On this page"] p { margin: 0; line-height: 2; }
.legal nav[aria-label="On this page"] a { color: var(--ink-2); font-weight: 700; }
.legal nav[aria-label="On this page"] a:hover { color: var(--terracotta); }

/* sections */
.legal section { margin: 46px 0; scroll-margin-top: 90px; }
.legal section > h2 { font-weight: 900; font-size: clamp(1.4rem, 3.2vw, 1.85rem); line-height: 1.2; margin: 0 0 14px; letter-spacing: -.01em; }
.legal h3 { font-weight: 800; font-size: 1.18rem; margin: 26px 0 8px; }
.legal p { margin: 0 0 16px; max-width: 66ch; }
.legal ul:not(.summary ul):not(.holds), .legal ol { margin: 0 0 16px; padding-left: 22px; max-width: 66ch; }
.legal li { margin: 0 0 9px; }
.legal strong { font-weight: 800; color: var(--ink); }

/* gentle callout */
.note {
  border-left: 4px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 22px; margin: 24px 0;
}
.note p:last-child { margin-bottom: 0; }

/* defined-term list */
.holds { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 14px; }
.holds li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; margin: 0; }
.holds .term { display: block; font-weight: 800; margin-bottom: 3px; }
.holds .desc { color: var(--muted); margin: 0; }

/* contact / FAQ cards */
.contact-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px); margin: 24px 0; box-shadow: var(--shadow-sm);
}
.contact-card p { margin: 0 0 8px; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card a { font-weight: 800; }

/* FAQ (support) */
.faq { display: grid; gap: 14px; margin: 8px 0 16px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 4px 22px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; font-weight: 800; padding: 16px 0; position: relative; padding-right: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: translateY(-65%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.faq details > p { margin: 0 0 16px; max-width: none; color: var(--ink-2); }
.faq details > p:first-of-type { margin-top: 2px; }