/* Layout shared by the public app, project, creator and support pages. */
body.information-page .page { max-width: 1180px; padding-top: 100px; }
.information-header { margin: 0 auto 40px; text-align: center; }
.information-header .header-name { margin: 0; }
.information-header .header-sub { margin: 14px 0; }
.information-header .header-tagline { margin: 16px auto 0; max-width: 760px; }
.information-page .about-site-section { margin-bottom: 44px; }
.information-page .section-title { margin-bottom: 22px; }
.information-page .release-version { margin: -6px auto 24px; text-align: center; }
.information-page .about-copy-card { max-width: 100%; }
.information-page .feature-list { max-width: 100%; }
/* /about/ and /about-the-creator/ open with the biography dossier
   (.bio-layout in biographies-and-events.css): the story beside a rail of
   figures from 900px, the rail above it below that. Only the spacing that
   joins it to an information page lives here. */
.information-story { margin-bottom: 44px; }
/* A biography's lede is followed by a ruled heading; here a paragraph
   follows it, so the gap is a paragraph's, not a section's. */
.information-story .bio-lede { margin-bottom: 28px; }
.information-story :is(.prose-lede, .prose-body) { margin-top: 0; margin-bottom: 0; }
.information-story :is(.prose-lede, .prose-body) + :is(.prose-lede, .prose-body) { margin-top: 1.05em; }
.information-story .bio-main > :last-child { margin-bottom: 0; }
.information-story-section { margin-top: 44px; }
/* The reading list is a second rail. Beside the story it drops under the
   figures instead of sitting to their left; stacked, it follows the
   introduction it recommends from. */
@media (min-width: 900px) {
  .information-reading-rail { clear: right; }
}
.information-reading-rail { margin-top: 28px; }
@media (min-width: 900px) {
  .information-reading-rail { margin-top: 0; }
}
.reading-list { margin: 0; padding: 0; list-style: none; }
.reading-list li + li { margin-top: 6px; }
/* A list of destinations, like the biography's "On this page": the colour
   says link, and the underline arrives on hover. */
.reading-list a { text-decoration: none; }
.reading-list a:hover,
.reading-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.information-story .creator-otb { margin-top: 28px; }

/* Each capability links to the place it describes, three across where three
   fit. Shared only by /about/. */
.information-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 40px; }
.information-feature-grid .feature-entry { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 0; }
.information-feature-grid .entry-title a { text-decoration: none; }
.information-feature-grid .entry-title a:hover,
.information-feature-grid .entry-title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Link cards take as many columns as there are cards, up to what fits. */
.socials-grid.information-profiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.information-profiles .social-icon svg { width: 22px; height: 22px; }
.social-icon.updates { background: var(--surface-raised); color: var(--tier-scan); }
.information-page .about-metric-grid { margin: 24px auto; }
.information-support { margin: 44px 0 0; text-align: center; }
.information-support .action-secondary { margin-top: 16px; }
.information-profiles { gap: 20px; }

.information-profiles .profile-link, .information-profiles .social-link { padding: 24px; }
@media (max-width: 760px) {
  body.information-page .page { padding: 84px 18px 50px; }
  .information-header { margin-bottom: 30px; }
  .information-page .about-site-section { margin-bottom: 36px; }
  .information-story { margin-bottom: 36px; }
  .information-story-section { margin-top: 36px; }
  /* Prose sits on the page here (no box), so its 30px of card padding was
     only a second gutter inside the first — 279px of measure on a 375px
     phone (owner, 2026-09-18: "smooshed"). The page gutter is the gutter. */
  .information-page .about-copy-card { padding: 0; }
  .information-profiles { gap: 12px; }
  .information-profiles .profile-link, .information-profiles .social-link { padding: 16px; }
}

.information-support .bio-hero-actions { justify-content: center; }

/* App guides use a single vertical flow and the available content width. */
.app-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-download-note { margin: 16px 0 0; }
.app-guide { margin: 28px auto 0; max-width: 1100px; }
.app-guide .prose-body { margin: 12px auto; }
.app-guide :is(ol, ul) { padding-left: 24px; }
.app-guide li + li { margin-top: 8px; }
.android-app-page .about-site-section > ol.prose-body { box-sizing: border-box; padding-left: 24px; }
@media (max-width: 600px) {
  .app-package-grid { grid-template-columns: minmax(0, 1fr); }
}

body:is(.desktop-download-page, .android-app-page, .ai-assistants-page, .twitch-commands-page) .about-site-section { max-width: 1100px; margin-left: auto; margin-right: auto; }
body:is(.desktop-download-page, .android-app-page, .ai-assistants-page, .twitch-commands-page) .about-site-section .prose-body { max-width: 1100px; margin-left: auto; margin-right: auto; }