/* THE FOOTER PAGES IN APPLE'S STYLE: Terms, Privacy, Support, Safety, Delete your account, Credits.
   Victor, 2026-11-02, pointing at the footer's Contact & Legal column: "update all the other pages
   too. Needs to look official like apple has it."

   Read off Apple's own legal pages: a white page, one narrow column (692px), the title large and
   semibold and LEFT-aligned rather than centred over a gradient, a small gray line above it, body
   copy at 17px in near-black, section heads semibold, links in Apple blue, and asides as quiet
   #f5f5f7 tiles. No blobs, no purple bars.

   Its own file, not styles.css: six pages share it, and styles.css is loaded by every page on the
   site, so a change there would move that key everywhere. Everything is under body.lg-ap; removing
   the class (or this <link>) puts the old look back. Style only: no words, links or sections change. */

body.lg-ap { background: #fff; }
.lg-ap main { --ink: #1d1d1f; --ink-2: #1d1d1f; --muted: #6e6e73; }

/* THE TITLE. Left-aligned in the reading column, no gradient wash. */
.lg-ap .page-hero { background: #fff; padding: 72px 0 0; text-align: left; }
.lg-ap .page-hero__bg { display: none; }
.lg-ap .page-hero .wrap { max-width: 740px; padding: 0 24px; }
.lg-ap .page-hero .eyebrow { display: block; text-transform: none; letter-spacing: 0; font-size: 17px;
  font-weight: 600; color: #6e6e73; background: none; padding: 0; margin: 0 0 10px; }
.lg-ap .page-hero h1 { margin: 0; font-family: var(--head); font-weight: 600; font-size: clamp(36px, 5vw, 48px);
  line-height: 1.08; letter-spacing: -.03em; color: #1d1d1f; text-align: left; }

/* THE READING COLUMN. */
.lg-ap .legal { max-width: 740px; padding: 28px 24px 88px; }
.lg-ap .legal .legal__meta { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid #d2d2d7;
  font-size: 14px; line-height: 1.5; color: #6e6e73; }
.lg-ap .legal .legal__meta strong { color: #1d1d1f; }
.lg-ap .legal p, .lg-ap .legal li { font-size: 17px; line-height: 1.53; color: #1d1d1f; }
.lg-ap .legal p { margin-bottom: 16px; }
.lg-ap .legal ul { margin: 0 0 20px 22px; gap: 10px; }
.lg-ap .legal strong { font-weight: 600; color: #1d1d1f; }
.lg-ap .legal h2 { margin: 48px 0 14px; font-family: var(--head); font-weight: 600; font-size: 28px;
  line-height: 1.15; letter-spacing: -.02em; color: #1d1d1f; }
.lg-ap .legal h3 { margin: 28px 0 8px; font-family: var(--head); font-weight: 600; font-size: 19px; color: #1d1d1f; }
.lg-ap .legal a { color: #0066cc; text-decoration: none; }
.lg-ap .legal a:hover { text-decoration: underline; }
.lg-ap .legal a:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 3px; }

/* "Jump to" and the plain-English asides. Scoped through .legal so they outrank `.legal p` above,
   which they are; at equal reach the body size won and the gray line read as body copy. */
.lg-ap .legal .legal__jump { font-size: 15px; color: #6e6e73; }
.lg-ap .legal__jump a { color: #0066cc; font-weight: 400; }
.lg-ap .legal .legal__plain { margin: 0 0 20px; padding: 18px 22px; border: 0; border-radius: 18px; background: #f5f5f7;
  font-size: 15px; line-height: 1.5; color: #1d1d1f; }
.lg-ap .legal .legal__plain strong { color: #1d1d1f; }
.lg-ap .legal__blank { background: #f5f5f7; border: 0; border-radius: 18px; }

@media (max-width: 640px) {
  .lg-ap .page-hero { padding-top: 48px; }
  .lg-ap .page-hero .wrap, .lg-ap .legal { padding-left: 16px; padding-right: 16px; }
  .lg-ap .legal h2 { font-size: 24px; margin-top: 40px; }
}