/* Website pages (About, Terms, ...) and the footer page links. Loaded after home.css. */
.page-head { padding-top: 24px; padding-bottom: 56px; }
.page-head h1 { color: #fff; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.page-head p { margin-top: 12px; color: #C3C9FF; }
.page-draft { margin: 32px 0 0; padding: 14px 18px; border-radius: 16px; background: #FFF3CC; color: #6B4E00; font-weight: 600; }
.page-body { max-width: 720px; padding: 48px 0 88px; color: var(--ink); font-size: 1.125rem; line-height: 1.7; overflow-wrap: anywhere; }
.page-body > * + * { margin-top: 1em; }
.page-body h2 { margin-top: 1.8em; font-size: 1.75rem; }
.page-body h3 { margin-top: 1.5em; font-size: 1.375rem; }
.page-body p { margin: 0; }
.page-body a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.page-body ul, .page-body ol { margin: 0; padding-left: 1.4em; }
.page-body li + li { margin-top: .35em; }
.page-body li[data-list="bullet"] { list-style-type: disc; }
.page-body li[data-list="ordered"] { list-style-type: decimal; }
.page-body blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--yellow); color: var(--body); }
.page-body .ql-align-center { text-align: center; }
.page-body .ql-align-right { text-align: right; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: #fff; text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
.page-body > :first-child { margin-top: 0; }
.page-body h2 + *, .page-body h3 + * { margin-top: .5em; }
.page-draft + .page-body { padding-top: 32px; }

/* Blog */
.blog-list { padding: 48px 24px 88px; }
.blog-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--body); text-decoration: none; }
.blog-card-link:hover { border-color: var(--blue); }
.blog-card-link img, .blog-card-blank { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; background: var(--mist); }
.blog-card-blank { background: linear-gradient(135deg, var(--blue), #5B6CFF); }
.blog-card-body { display: grid; gap: 8px; padding: 20px; }
.blog-card-body time { font-size: .9375rem; }
.blog-card-body h2 { font-size: 1.375rem; line-height: 1.2; }
.blog-card-body p { font-size: 1rem; }
.blog-pages { margin-top: 32px; }
.blog-empty { font-size: 1.125rem; }
.post-head { max-width: 820px; }
.post-back { display: inline-block; margin-bottom: 14px; color: #fff; font-weight: 700; text-underline-offset: 4px; }
.post-cover { display: block; width: 100%; max-width: 920px; margin-top: 40px; aspect-ratio: 1.9; object-fit: cover; border-radius: 24px; }
.post-cover + .page-body { padding-top: 32px; }
.page-body img { max-width: 100%; height: auto; border-radius: 16px; }
.post-more { padding: 8px 0 88px; border-top: 1px solid var(--line); }
.post-more > h2 { margin: 40px 0 20px; font-size: 1.75rem; }

/* Price switches on the homepage */
.price-controls { display: flex; flex-wrap: wrap; gap: 0 12px; }