/* Resource hub (homepage) and related guides */
.hub { width: 100%; max-width: 64rem; display: flex; flex-direction: column; gap: 4.5rem; }
.hub-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hub-section h2 { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: .25rem; }
.hub-section > p { color: #64748b; margin-bottom: 1.5rem; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .hub-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .hub-grid { grid-template-columns: 1fr 1fr 1fr; } }
.hub-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; transition: border-color .15s, transform .15s; }
.hub-card:hover { border-color: #9333ea; transform: translateY(-2px); }
.hub-card strong { color: #0f172a; font-weight: 700; line-height: 1.35; }
.hub-card span { color: #64748b; font-size: .9rem; line-height: 1.5; }
.hub-pick { border: 1px dashed #c4b5fd; border-radius: .75rem; padding: 1rem 1.25rem; color: #475569; background: #faf5ff; }
.hub-pick a { color: #7e22ce; font-weight: 600; text-decoration: underline; }
.related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.related h2 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.disclosure { font-size: .8rem; color: #94a3b8; max-width: 40rem; margin: .75rem auto 0; }

/* X video search tool */
.xvs { margin: 2rem 0; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; }
.xvs-form { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 640px) { .xvs-form { grid-template-columns: 1fr 1fr; } }
.xvs-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: #334155; }
.xvs-form .xvs-wide { grid-column: 1 / -1; }
.xvs-form .xvs-check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.xvs-form input[type=text], .xvs-form input[type=number], .xvs-form input[type=date], .xvs-form select { width: 100%; padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; font-weight: 400; background: #fff; color: #0f172a; }
.xvs-out { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; }
.xvs-label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e22ce; margin-bottom: .5rem; }
.xvs-out code { display: block; padding: .75rem; border-radius: .5rem; background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; word-break: break-word; }
.xvs-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; align-items: center; }
.xvs-btn { padding: .6rem 1rem; border: 1px solid #c4b5fd; border-radius: .5rem; background: #faf5ff; color: #6b21a8; font-weight: 600; cursor: pointer; }
.xvs-btn:disabled { opacity: .45; cursor: default; }
.xvs-note { font-size: .8rem; color: #64748b; margin-top: .6rem; }
.xvs-examples { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.xvs-examples .xvs-label { width: 100%; margin-bottom: 0; }

.blog .xvs a.button, .blog .xvs a.button:hover { color: #fff; text-decoration: none; }
.blog-header > span { font-size: .875rem; color: #64748b; }
.related-intro { color: #64748b; font-size: .95rem; margin: -.5rem 0 1rem; }
.blog-article .related + .blog { margin-top: 3rem; }