/* About page: the hub's palette and header, a little more room to read. */
.about { display: grid; gap: 30px; width: min(100% - 32px, 640px); margin: 0 auto; padding: 8px 0 36px; }
.about h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.about p { margin: 0; line-height: 1.55; }
.about a:not(.about-game) { color: var(--hub-purple); font-weight: 700; }
.about-hero h1 { margin: 14px 0 12px; font-size: clamp(32px, 9vw, 48px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.about-hero p { color: #3c3832; font-size: 16.5px; }
.about-marks { display: flex; gap: 8px; }
.about-marks i { position: relative; width: 26px; height: 26px; }
.about-marks .o { border: 5px solid var(--hub-coral); border-radius: 50%; }
.about-marks .x::before, .about-marks .x::after { content: ""; position: absolute; top: 10.5px; left: -1px; width: 28px; height: 5.5px; border-radius: 3px; background: var(--hub-purple); transform: rotate(45deg); }
.about-marks .x::after { transform: rotate(-45deg); }
.about-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.about-game { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--tile-bg); color: var(--tile-ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.about-game > span:last-child { display: grid; gap: 2px; }
.about-game b { font-size: 17px; }
.about-game small { font-size: 13px; line-height: 1.3; opacity: .75; }
.about-note { margin-top: 10px !important; color: var(--hub-muted); font-size: 14px; }
.about-facts { display: grid; gap: 0; margin: 0; border-radius: 20px; background: var(--hub-paper); box-shadow: 0 0 0 1px var(--hub-line); }
.about-facts div { padding: 14px 16px; }
.about-facts div + div { border-top: 1px solid var(--hub-line); }
.about-facts dt { font-weight: 800; }
.about-facts dd { margin: 3px 0 0; color: #4a463f; font-size: 14.5px; line-height: 1.5; }
.about-support { display: grid; gap: 16px; padding: 22px 20px; border-radius: 24px; background: var(--hub-ink); color: #fff; }
.about-support h2 { color: #fff; }
.about-support p { color: #d9d5e2; }
.about-support ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.about-support li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.about-support li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--hub-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23141414' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.about-support-buy { justify-self: start; padding: 13px 22px; border: 0; border-radius: 99px; background: var(--hub-lime); color: var(--hub-ink); font-weight: 900; cursor: pointer; }
.about-support-buy:hover { background: #e4f76d; }
.about-support-soon { font-size: 14px; }
html:not([data-supporter-offer="on"]) .about-support-buy { display: none; }
html[data-supporter-offer="on"] .about-support-soon { display: none; }
@media (min-width: 600px) { .about-games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }