/* content pages (blog, alternatives, niches, platforms) — inherits the landing palette from landing.css */
body.content { background: var(--paper); }
.content main { padding: 120px 0 80px; }
.wrap.narrow { max-width: 760px; }
.article .meta { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.article .meta a { color: var(--accent); text-decoration: none; font-weight: 600; }
.article h1 { font-family: var(--display); font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 22px; }
.article h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 44px 0 12px; }
.article h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 30px 0 8px; }
.article p, .article li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.article p { margin: 0 0 16px; }
.article strong { color: var(--ink); }
.article a { color: var(--accent); text-underline-offset: 3px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article li { margin: 6px 0; }
.article li p { margin: 0; }
.article p.quick { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-s); padding: 18px 20px; color: var(--ink); font-size: 18px; margin: 0 0 26px; }
.article blockquote { margin: 0 0 18px; padding: 4px 18px; border-left: 3px solid var(--lime); color: var(--ink-2); }
.article .tbl { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.article table { border-collapse: collapse; width: 100%; font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-family: var(--display); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); }
.article tr:last-child td { border-bottom: none; }
.article pre { background: var(--dark); color: #eee; padding: 16px; border-radius: var(--r-s); overflow-x: auto; font-size: 14px; }
.article code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--paper-2); padding: 1px 5px; border-radius: 5px; }
.article pre code { background: none; padding: 0; }
.article hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }
.article img { max-width: 100%; border-radius: var(--r-s); }
.article .sample { margin: 0 0 30px; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: end; }
.article .sample video { width: 260px; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; box-shadow: 0 20px 50px rgba(15, 15, 18, 0.16); }
.article .sample figcaption { font-size: 14px; color: var(--ink-3); padding-bottom: 12px; }
.article .cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 40px 0 10px; padding: 22px; border-radius: var(--r); background: var(--dark); color: #cfcfd6; }
.article .cta .btn { white-space: nowrap; }
.article .more { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.article .more h3 { margin: 0 0 8px; }
.article .more ul { list-style: none; padding: 0; }
.article .more li { margin: 4px 0; font-size: 15px; }
.hub .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.hub h1 { font-family: var(--display); font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.hub .head p { max-width: 420px; color: var(--ink-2); font-size: 17px; }
.hub .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hub .cards.make { grid-template-columns: repeat(4, 1fr); }
.hub .card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.hub .card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 15, 18, 0.1); }
.hub .card img { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; display: block; background: #000; }
.hub .card > div { padding: 18px; }
.hub .card h2 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.hub .card p { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; }
.hub .card time { font-size: 12px; color: var(--ink-3); }
footer a { color: inherit; }
@media (max-width: 900px) { .hub .cards, .hub .cards.make { grid-template-columns: repeat(2, 1fr); } .article .sample { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hub .cards, .hub .cards.make { grid-template-columns: 1fr; } .content main { padding-top: 96px; } }