/* Child Safety Standards page (v3). Scoped to body[data-page="child-safety"].
   Document layout: 1040px column, mono labels, sticky contents rail, ruled numbered sections,
   accent callouts, one contact card and a policy list. Lavender #D3D3FF / ink #0B0B0F.
   Dark mode follows the site toggle ([data-theme] on <html>) and the OS on "system".
   Fonts: only the shared stacks from main-*.css (var(--font-display) for headings, var(--font-body) for
   everything else), exactly as the home page uses them. */
body[data-page="child-safety"] {
  --cs-bg: #fbfbff; --cs-paper: #ffffff; --cs-ink: #0b0b0f; --cs-soft: #4a4957; --cs-muted: #6e6d7c;
  --cs-rule: #e4e4f2; --cs-lav: #d3d3ff; --cs-dot: #8f8cf2; --cs-wash: #f1f1ff; --cs-edge: #c9c9fb;
  --cs-link: #4b47c9;
  --cs-head-f: var(--font-display);
  --cs-text-f: var(--font-body);
  background: var(--cs-bg); color: var(--cs-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="child-safety"] {
    --cs-bg: #0b0b0f; --cs-paper: #14141b; --cs-ink: #f1f0fb; --cs-soft: #c9c8d6; --cs-muted: #9897a8;
    --cs-rule: #23232d; --cs-lav: #2a2a45; --cs-dot: #b9b9ff; --cs-wash: #16162a; --cs-edge: #34345a; --cs-link: #c3c3ff;
  }
}
:root[data-theme="dark"] body[data-page="child-safety"] {
  --cs-bg: #0b0b0f; --cs-paper: #14141b; --cs-ink: #f1f0fb; --cs-soft: #c9c8d6; --cs-muted: #9897a8;
  --cs-rule: #23232d; --cs-lav: #2a2a45; --cs-dot: #b9b9ff; --cs-wash: #16162a; --cs-edge: #34345a; --cs-link: #c3c3ff;
}
html { scroll-padding-top: 6rem; }
@media (min-width: 768px) { html { scroll-padding-top: 7rem; } }

.cs-shell { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .cs-shell { padding-inline: 40px; } }
.cs-mono { font-family: var(--cs-text-f); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-muted); margin: 0; }
.cs a { color: var(--cs-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cs code { font-family: var(--cs-text-f); font-size: 1em; font-weight: 600; }

/* Hero */
.cs-hero { padding: 72px 0 48px; }
@media (min-width: 768px) { .cs-hero { padding: 104px 0 64px; } }
.cs-hero h1 { font-family: var(--cs-head-f); font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
  font-size: clamp(2.4rem, 6vw, 3.75rem); margin: 20px 0 0; color: var(--cs-ink); }
.cs-dot { color: var(--cs-dot); }
.cs-lede { max-width: 58ch; margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: var(--cs-soft); }
.cs-updated { margin-top: 28px; letter-spacing: .16em; }
.cs-updated + .cs-updated { margin-top: 10px; }
.cs-updated time, .cs-updated a { color: var(--cs-soft); text-transform: none; letter-spacing: .04em; }

/* Grid + contents */
.cs-grid { display: grid; row-gap: 40px; padding-bottom: 112px; }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; padding-bottom: 144px; } }
.cs-toc ol { list-style: none; margin: 0; padding: 0; }
.cs-toc li + li { margin-top: 2px; }
.cs-toc a { position: relative; display: flex; gap: 12px; padding: 6px 8px 6px 16px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.35; color: var(--cs-muted); text-decoration: none; transition: color .3s; }
.cs-toc a span { font-family: var(--cs-text-f); font-weight: 600; font-size: 11px; opacity: .55; padding-top: 1px; font-variant-numeric: tabular-nums; }
.cs-toc a::before { content: ""; position: absolute; left: 0; top: .95em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cs-dot); transform: scale(0); transition: transform .4s; }
.cs-toc a:hover, .cs-toc a[aria-current="true"] { color: var(--cs-ink); }
.cs-toc a[aria-current="true"]::before { transform: scale(1); }
.cs-toc__d { display: none; }
.cs-toc__d > .cs-mono { padding-left: 16px; margin-bottom: 16px; }
@media (min-width: 1024px) {
  .cs-toc__m { display: none; }
  .cs-toc__d { display: block; position: sticky; top: 8rem; }
}
.cs-toc__m { border-top: 1px solid var(--cs-rule); border-bottom: 1px solid var(--cs-rule); }
.cs-toc__m summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; }
.cs-toc__m summary::-webkit-details-marker { display: none; }
.cs-toc__m summary span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--cs-rule); font-size: 14px; letter-spacing: 0; transition: transform .4s; }
.cs-toc__m[open] summary span { transform: rotate(45deg); }
.cs-toc__m ol { margin: 0 0 16px -16px; }

/* Sections */
.cs-body { min-width: 0; }
.cs-sec { border-top: 1px solid var(--cs-rule); padding-top: 36px; }
.cs-sec:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .cs-sec { padding-top: 44px; } .cs-sec:first-child { padding-top: 0; } }
.cs-num { font-family: var(--cs-text-f); font-weight: 600; font-size: 12px; letter-spacing: .16em; color: var(--cs-muted); margin: 0;
  font-variant-numeric: tabular-nums; }
.cs-sec h2 { font-family: var(--cs-head-f); font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 12px 0 0; padding: 0; border: 0; color: var(--cs-ink); max-width: 28ch; }
.cs-doc { margin-top: 20px; padding-bottom: 48px; max-width: 66ch; font-size: 16px; line-height: 1.7; color: var(--cs-soft); }
@media (min-width: 1024px) { .cs-doc { padding-bottom: 56px; } }
.cs-doc > * { margin: 0; }
.cs-doc > * + * { margin-top: 1.15em; }
.cs-doc strong { color: var(--cs-ink); font-weight: 650; }
.cs-doc ul { list-style: none; padding: 0; }
.cs-doc li { position: relative; padding-left: 1.55em; }
.cs-doc li + li { margin-top: .5em; }
.cs-doc li::before { content: ""; position: absolute; left: .15em; top: .72em; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--cs-ink) 26%, transparent); }

/* Callout */
.cs-callout { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--cs-edge);
  background: var(--cs-wash); padding: 20px 24px 20px 28px; }
.cs-callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cs-dot); }
.cs-callout__tag { margin-bottom: 10px; letter-spacing: .16em; color: var(--cs-link); }
.cs-callout p:not(.cs-mono) { margin: 0; font-size: 15.5px; color: var(--cs-soft); }

/* Contact card */
.cs-sec--contact { padding-bottom: 8px; }
.cs-card { margin-top: 20px; border-radius: 28px; background: var(--cs-paper); border: 1px solid var(--cs-rule);
  padding: 28px; box-shadow: inset 0 1px rgb(255 255 255 / .6), 0 1px 2px rgb(20 20 60 / .05), 0 18px 40px -24px rgb(20 20 60 / .25); }
@media (min-width: 768px) { .cs-card { padding: 36px; } }
.cs-card__big { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin-top: 16px;
  font-family: var(--cs-head-f); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: var(--cs-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
.cs-card__big + .cs-card__big { margin-top: 8px; }
.cs-arrow { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cs-lav); color: var(--cs-ink); font-size: 15px; letter-spacing: 0; transition: transform .4s; }
.cs-card__big:hover .cs-arrow { transform: translate(2px, -2px); }
.cs-card__note { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--cs-soft); }

/* Other policies */
.cs-more { margin-top: 56px; }
.cs-more ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; column-gap: 32px; }
@media (min-width: 640px) { .cs-more ul { grid-template-columns: 1fr 1fr; } }
.cs-more a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--cs-rule); text-decoration: none; }
.cs-more strong { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--cs-ink); transition: color .3s; }
.cs-more em { display: block; margin-top: 4px; font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--cs-muted); }
.cs-more i { font-style: normal; color: var(--cs-muted); opacity: 0; transform: translateX(-4px); transition: opacity .4s, transform .4s; }
.cs-more a:hover strong { color: var(--cs-link); }
.cs-more a:hover i { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .cs-toc a::before, .cs-arrow, .cs-more i, .cs-toc__m summary span { transition: none; } }
@media print { .nav, .footer, .cs-toc { display: none !important; } .cs-grid { display: block; } }