/* ==========================================================================
   The Advocate Path: the legal pages /privacy-policy, /terms-and-conditions, /disclaimer, /accessibility
   (.pg-legal) and /do-not-sell (.pg-legal.pg-dns). The texts come from the admin's documents: their class names
   (col-lg-3 d-none d-lg-block, toc, col-lg-9, doc-body, doc-meta, kv, callout, eyebrow) are styled here, never renamed.
   A white document page bound by an oxblood ribbon down its left edge (the home page's notice, at reading length); the
   section numbers in Courier (src/components/LegalNumbers.tsx); the contents list in the margin, sticky, with a short
   oxblood ribbon marking the section being read (src/components/TocSpy.tsx).
   ========================================================================== */

.pg-legal .lg-head { padding-bottom: clamp(40px, 4vw, 60px); }
.pg-legal .lg-head h1 { max-width: 14em; }

/* ---- the document and its contents ---- */
.pg-legal .doc { padding: 0 0 clamp(80px, 8vw, 128px); }
.pg-legal .lg-doc { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.pg-legal .lg-doc > [class*="col-lg-"] { width: auto; max-width: none; flex: none; padding: 0; }
.pg-legal .lg-doc > .col-lg-3 { grid-column: 1; align-self: stretch; }
.pg-legal .lg-doc > .col-lg-9 { grid-column: 2; min-width: 0; }

.pg-legal .toc { position: sticky; top: calc(var(--header-h-scrolled) + 40px); }
.pg-legal .toc h4 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--brass); color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pg-legal .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.pg-legal .toc li { position: relative; max-width: none; counter-increment: toc; border-bottom: 1px solid var(--line-hair); }
.pg-legal .toc a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 9px 0; color: var(--ink-text); font-size: 15px; line-height: 1.4; text-decoration: none; transition: color 0.18s ease; }
.pg-legal .toc a::before { content: counter(toc, decimal-leading-zero); color: var(--brass-ink); font: 400 12px / 1.8 var(--font-label); letter-spacing: 0.06em; }
.pg-legal .toc a:hover, .pg-legal .toc a.is-current { color: var(--ox); }
.pg-legal .toc a.is-current::after {
  content: "";
  position: absolute;
  left: -22px;
  top: -1px;
  width: 12px;
  height: 28px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
}

/* the bound page */
.pg-legal .doc-body {
  position: relative;
  max-width: 900px;
  padding: clamp(40px, 4.6vw, 64px) clamp(24px, 4.6vw, 72px) clamp(40px, 4.6vw, 64px) clamp(64px, 7vw, 104px);
  background: var(--white);
  border: 1px solid var(--line-hair);
  font-size: 17px;
  line-height: 1.72;
}
.pg-legal .doc-body::before, .pg-legal .doc-body::after { content: ""; position: absolute; pointer-events: none; }
.pg-legal .doc-body::before { left: clamp(18px, 2.4vw, 34px); top: -1px; bottom: -40px; width: 22px; background: var(--ox); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%); }
.pg-legal .doc-body::after { left: calc(clamp(18px, 2.4vw, 34px) + 5px); top: 0; bottom: -28px; width: 12px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.pg-legal .doc-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(28px, 3vw, 40px); color: var(--brass-ink); font: 400 var(--text-meta) / 1.5 var(--font-label); letter-spacing: 0.06em; }
.pg-legal .doc-meta::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--brass); }
.pg-legal .doc-body h2 {
  margin: 1.9em 0 0.6em;
  max-width: 24em;
  font-size: clamp(23px, 0.6vw + 19px, 27px);
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h-scrolled) + 28px);
}
.pg-legal .doc-body .doc-meta + h2 { margin-top: 0; }
.pg-legal .lg-no { display: inline-block; min-width: 2.2em; margin-left: -2.2em; color: var(--ox); font: 400 0.62em / 1 var(--font-label); letter-spacing: 0.04em; vertical-align: 0.18em; }
.pg-legal .doc-body h3 { margin: 1.6em 0 0.5em; font-size: 19px; line-height: 1.3; }
.pg-legal .doc-body p, .pg-legal .doc-body li { max-width: 40em; }
.pg-legal .doc-body p { margin: 0 0 1em; }
.pg-legal .doc-body ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.pg-legal .doc-body ul > li { position: relative; padding: 0 0 0.5em 24px; }
.pg-legal .doc-body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 11px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.pg-legal .doc-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.pg-legal .doc-body ol > li::marker { color: var(--ox); font: 400 14px var(--font-label); }
.pg-legal .doc-body a { color: var(--ox); text-decoration-color: var(--brass); }
.pg-legal .doc-body a:hover { color: var(--ink-text); }
.pg-legal .doc-body .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 28px; margin: 0 0 1.2em; padding: 0; border-top: 1px solid var(--brass); }
.pg-legal .doc-body .kv dt, .pg-legal .doc-body .kv dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-hair); }
.pg-legal .doc-body .kv dt { color: var(--brass-ink); font: 400 var(--text-meta) / 1.9 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.pg-legal .doc-body .callout { margin: 1.6em 0; padding: 18px 22px; background: var(--parchment); border: 0; border-left: 4px solid var(--ox); font-size: 16px; line-height: 1.65; }
.pg-legal .doc-body .callout::before { content: none; }
.pg-legal .doc-body .callout p { max-width: none; margin: 0; }
.pg-legal .doc-body .callout p + p { margin-top: 0.8em; }
.pg-legal .doc-body table { font-size: 15px; }

/* ---- /do-not-sell: the explanation as a bound page beside the request form on the white numbered sheet ---- */
.pg-dns .lg-request { padding: 0 0 clamp(80px, 8vw, 128px); }
.lg-request-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.lg-request-text { grid-column: 1 / span 6; align-self: stretch; }
.pg-dns .lg-request-form.ap-intake { grid-column: 7 / span 6; }
.pg-dns .lg-request-text .sticky-aside {
  position: relative;
  padding: clamp(40px, 4vw, 56px) clamp(24px, 3.4vw, 48px) clamp(36px, 3.6vw, 48px) clamp(60px, 6vw, 88px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
@media (min-width: 992px) { .pg-dns .lg-request-text .sticky-aside { position: sticky; } }
.pg-dns .lg-request-text .sticky-aside::before, .pg-dns .lg-request-text .sticky-aside::after { content: ""; position: absolute; pointer-events: none; }
.pg-dns .lg-request-text .sticky-aside::before { left: clamp(16px, 2vw, 28px); top: -1px; bottom: -36px; width: 20px; background: var(--ox); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); }
.pg-dns .lg-request-text .sticky-aside::after { left: calc(clamp(16px, 2vw, 28px) + 5px); top: 0; bottom: -24px; width: 10px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.pg-dns .sticky-aside > .eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pg-dns .sticky-aside > .eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--brass); }
.pg-dns .sticky-aside > h2 { margin: 0 0 18px; font-size: clamp(28px, 1vw + 21px, 36px) !important; line-height: 1.12; }
.pg-dns .sticky-aside > p { margin: 0 0 1em; font-size: 17px; line-height: 1.7; color: var(--ink-text) !important; }
.pg-dns .sticky-aside > p:last-child { margin-bottom: 0; }
.pg-dns .sticky-aside a { color: var(--ox); }
.lg-request-send { margin-top: 26px; }
/* the two short fields stand one under the other, so a long label never pushes one field lower than its neighbour */
.pg-dns .ap-intake .row > .col-sm-6 { flex: 0 0 auto; width: 100%; }
.pg-dns .form-foot { margin-top: 18px; }

/* ---- narrower screens ---- */
@media (max-width: 991.98px) {
  .pg-legal .lg-doc { display: block; }
  /* the contents list above the page (the admin's wrapper hides it below 992 px with Bootstrap's .d-none, which stays in
     the markup: this rule only outweighs it); it scrolls with the page and its ribbon marker rests (no margin for it) */
  .pg-legal .lg-doc > .col-lg-3.d-none { display: block !important; margin-bottom: 32px; }
  .pg-legal .toc { position: static; }
  .pg-legal .toc a.is-current::after { content: none; }
  .pg-legal .toc li { break-inside: avoid; }
  .lg-request-grid { display: block; }
  .pg-dns .lg-request-form.ap-intake { margin-top: 72px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pg-legal .toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 767.98px) {
  .pg-legal .doc-body { padding: 44px 18px 36px 50px; font-size: 16.5px; }
  /* the record line breaks between its two dates, never inside one: without the tracking a whole
     "Effective date: September 22, 2026" fits a 360 px phone */
  .pg-legal .doc-meta { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--brass); font-size: 12.5px; letter-spacing: 0; }
  .pg-legal .doc-meta::after { content: none; }
  .pg-legal .doc-body::before { left: 14px; width: 18px; }
  .pg-legal .doc-body::after { left: 18px; width: 10px; }
  /* the Courier number on its own line above the heading, aligned with its left edge (inline, a wrapped heading broke
     raggedly after it) */
  .pg-legal .lg-no { display: block; min-width: 0; margin: 0 0 6px; font-size: 13px; vertical-align: baseline; }
  .pg-legal .doc-body .kv { grid-template-columns: minmax(0, 1fr); }
  .pg-legal .doc-body .kv dt { padding-bottom: 0; border-bottom: 0; }
  .pg-legal .doc-body .kv dd { padding-top: 2px; }
  .pg-dns .lg-request-text .sticky-aside { padding: 44px 18px 36px 50px; }
  .pg-dns .lg-request-text .sticky-aside::before { left: 14px; width: 18px; }
  .pg-dns .lg-request-text .sticky-aside::after { left: 18px; width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-legal .toc a { transition: none; }
}

/* ==== text that must fit its box on every device (photos + devices pass, 2026-10-15) ================================
   On 320 px phones a long word (the site's address, a long capitalised word) ran past the column of the terms; it now
   wraps inside the column. The wording itself is unchanged. */
.pg-legal .doc-body p, .pg-legal .doc-body li { overflow-wrap: break-word; }

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* the Courier section numbers stand clear of the ribbon binding: from 768 to about 1366 px the ribbon covered their
   first digit ("10." read "0.", "1." only showed its dot); the page's left margin now grows with the screen and keeps
   at least 10 px between the ribbon and the numbers (the phone layout puts each number above its heading) */
@media (min-width: 768px) {
  .pg-legal .doc-body { padding-left: clamp(84px, 3.2vw + 60px, 108px); }
  /* the record line breaks at the dot between its two dates, never inside a date */
  .pg-legal .doc-meta { text-wrap: balance; }
}
/* phones under 375 px: the bound page keeps a wider text column (about 25 characters a line before); the ribbon binding
   narrows with it */
@media (max-width: 374.98px) {
  .pg-legal .doc-body, .pg-dns .lg-request-text .sticky-aside { padding-left: 40px; padding-right: 12px; }
  .pg-legal .doc-body::before, .pg-dns .lg-request-text .sticky-aside::before { left: 10px; width: 16px; }
  .pg-legal .doc-body::after, .pg-dns .lg-request-text .sticky-aside::after { left: 13px; width: 10px; }
}
/* phones under 360 px: the record line breaks between its two dates, never inside one (at 12.5 px "Effective date:
   September 22, 2026" was 20 px too wide for the 234 px column, so both dates broke in two); it may run 8 px into the
   page's right margin */
@media (max-width: 359.98px) {
  .pg-legal .doc-meta { margin-right: -8px; font-size: 12px; letter-spacing: -0.02em; }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* the record line from 768 to 1199 px: on two lines it gets the phone treatment, a brass rule under both lines (beside
   them the rule shrank to a 35 px dash floating at the right) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pg-legal .doc-meta { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--brass); }
  .pg-legal .doc-meta::after { content: none; }
}
/* /do-not-sell: the eyebrow's brass rule runs to the text column's right edge (held to the paragraph measure it stopped
   about 125 px short on tablets) */
.pg-dns .sticky-aside > .eyebrow { max-width: none; }