/* GlorySmile — legal pages (terms.html, privacy.html), body[data-page='legal'].
   The only text-heavy pages on the site: calm, very readable.
   One bold moment (the big title with the halo ring); everything below is quiet. */

/* Smooth jumps from the table of contents. The global reduced-motion rule resets this. */
:root:has(> body[data-page='legal']) { scroll-behavior: smooth; }

/* ---------- Head: title, lead, date, halo ring ---------- */
.legal__head {
  position: relative;
  overflow: clip;                       /* crops the ring at the viewport edge, no horizontal scroll */
  padding-block: clamp(3.5rem, 9vw, 8.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.legal__head > .wrap { position: relative; }  /* text paints above the ring */
.legal__ring {
  --size: clamp(300px, 46vw, 720px);
  --ring: 2px;
  position: absolute;
  top: calc(var(--size) * -0.46);
  right: calc(var(--size) * -0.22);
}
.legal__title { font-size: min(var(--t-2xl), 9vw); line-height: 0.98; letter-spacing: -0.045em; max-width: 11ch; }
.legal__lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 30ch; }
.legal__date { margin-top: 1rem; font-size: var(--t-s); color: var(--ink-2); }
.legal__date time { font-variant-numeric: tabular-nums; }

/* ---------- Body: sticky contents + document ---------- */
.legal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: var(--section);
}

/* Mobile/tablet contents: reuses the shared accordion */
.legal__toc-m summary { font-size: var(--t-m); }
.legal__toc-m ol { list-style: none; padding: 0; display: grid; }
.legal__toc-m a {
  display: flex; align-items: baseline; gap: 0.75rem; min-height: 44px; padding-block: 0.6rem;
  color: var(--ink); text-decoration: none; line-height: 1.35;
}
.legal__toc-m a span { color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 1.5em; }

/* Desktop contents: sticky rail with the active section marked */
.legal__toc { display: none; }
.legal__toc-title { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); margin-bottom: 0.75rem; padding-left: 1.15rem; }
/* The track is drawn by the links themselves: a marker pulled outside with a negative margin was clipped
   by the rail's overflow box whenever its left edge fell on a sub-pixel (gone at 1024px). */
.legal__toc ol { list-style: none; padding: 0; }
.legal__toc a {
  display: flex; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0.3rem 0 0.3rem 1.1rem;
  border-left: 1.5px solid transparent; color: var(--ink-2); font-size: var(--t-s); line-height: 1.3; text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Numbers stay --ink-2 (8.2:1 on enamel); no opacity, which dropped them to 3.8:1. The active label still steps up to --ink. */
.legal__toc a span { min-width: 1.35em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.legal__toc ol a { border-left-color: var(--mist); }
.legal__toc a:hover { color: var(--ink); }
.legal__toc a[aria-current] { color: var(--ink); border-left-color: var(--ultra); font-weight: 500; }
.legal__toc a:focus-visible { outline-offset: -3px; }
.legal__toc-top {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 1.25rem; padding-left: 1.15rem;
  font-size: var(--t-s); font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.legal__toc-top:hover { color: var(--ink); }
.legal__toc-top svg, .legal__top svg { width: 18px; height: 18px; transform: rotate(-90deg); }

/* ---------- Document ---------- */
.legal__doc { min-width: 0; max-width: 68ch; font-size: var(--t-m); line-height: 1.7; }
.legal__doc p { max-width: none; }
.legal__doc a:not(.btn) { text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.legal__doc a:not(.btn):hover { color: var(--ultra); text-decoration-color: currentColor; }

.legal__sec + .legal__sec {
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  padding-top: clamp(2.75rem, 4.5vw, 4rem);
  border-top: 1px solid var(--mist);
}
.legal__sec h2 {
  display: flex; gap: 0.55em; align-items: baseline;
  font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.25rem); line-height: 1.1;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.legal__n { font-weight: 200; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legal__sec h3 {
  font-family: var(--f-text); font-weight: 600; font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.01em;
  margin: 2.25rem 0 0.75rem;
}
.legal__sec > * + p, .legal__sec > * + ul, .legal__sec > * + ol, .legal__sec > * + dl { margin-top: 1em; }
.legal__sec h3 + * { margin-top: 0; }
.legal__sec ul, .legal__sec ol { padding-left: 1.25rem; }
.legal__sec li + li { margin-top: 0.5em; }
.legal__sec li::marker { color: var(--ink-2); }
.legal__sec strong { font-weight: 600; }

/* Key/value rows: merchant identification, purposes and legal bases, retention */
.legal__facts > div { display: grid; gap: 0.15rem; padding-block: 0.9rem; border-top: 1px solid var(--mist); }
.legal__facts dt { font-size: var(--t-s); color: var(--ink-2); line-height: 1.45; }
.legal__facts dd { line-height: 1.55; }
@media (min-width: 640px) {
  .legal__facts > div { grid-template-columns: minmax(10rem, 0.42fr) 1fr; gap: 1.5rem; align-items: baseline; }
}
/* Purpose rows read better with the purpose first and the basis as the quiet line */
.legal__facts--basis dt { font-size: var(--t-m); color: var(--ink); line-height: 1.5; }
.legal__facts--basis dd { font-size: var(--t-s); font-weight: 500; line-height: 1.5; }
.legal__facts--basis dd span { display: block; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 640px) {
  .legal__facts--basis > div { grid-template-columns: 1fr minmax(13.5rem, 0.6fr); }
}

/* Statutory withdrawal form, folded inside the shared accordion */
.legal__form { margin-top: 1.75rem; }
.legal__form summary { font-size: var(--t-m); }
.legal__form-body {
  background: var(--pearl); border-radius: var(--r-soft); padding: clamp(1.25rem, 3.5vw, 2rem);
  color: var(--ink); font-size: var(--t-s); line-height: 1.65;
}
.legal__form-body ul { list-style: none; padding: 0; margin-top: 0.75rem; }
.legal__form-body li { padding-left: 1rem; text-indent: -1rem; }
.legal__form-body li::before { content: '\2014\00a0'; color: var(--ink-2); }
.legal__form-body ul + p { margin-top: 0.75rem; }

/* End of document: back to top + the sibling document */
.legal__end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--mist);
}
.legal__next { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Placeholders: unknown company facts, impossible to miss until filled ---------- */
.legal__doc mark.todo {
  background: color-mix(in srgb, var(--ultra) 12%, var(--pearl));
  color: var(--ultra-deep);
  outline: 1px dashed color-mix(in srgb, var(--ultra) 55%, transparent);
  outline-offset: -1px;
  border-radius: 6px;
  padding: 0.05em 0.35em;
  font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Desktop: contents rail + document ---------- */
@media (min-width: 1024px) {
  .legal__body {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 68ch);
    column-gap: clamp(4rem, 9vw, 10rem);
    padding-top: clamp(1rem, 2vw, 2rem);
  }
  .legal__toc-m { display: none; }
  .legal__toc {
    display: block; align-self: start;
    position: sticky; top: calc(var(--header-h) + 2.5rem);
    max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Small phones: keep the title from crowding the ring */
@media (max-width: 480px) {
  .legal__ring { --size: 300px; top: -170px; right: -130px; }
}