/* [page-specific styles] manga board (homepage opening) */
.ba4xq-board {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: stretch;
}
.ba4xq-board .ba4xq-board-main { flex: 1 1 560px; }
.ba4xq-board .ba4xq-board-side { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--s-5); }
.ba4xq-board-headline { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.96; margin-bottom: var(--s-4); }
.ba4xq-board-headline .hl { color: var(--magenta); -webkit-text-stroke: 1px var(--ink); }
.ba4xq-board-headline .hl2 { color: var(--cyan); }
.ba4xq-board-sub { font-size: 1.15rem; color: var(--muted); max-width: 48ch; margin-bottom: var(--s-5); }
.ba4xq-board-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* generic flex grid */
.ba4xq-grid { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ba4xq-grid > * { flex: 1 1 300px; }
.ba4xq-grid-2 > * { flex: 1 1 440px; }
.ba4xq-grid-4 > * { flex: 1 1 240px; }

/* split rows */
.ba4xq-split { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.ba4xq-split > * { flex: 1 1 380px; }
.ba4xq-split-media { border: var(--bw) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-hard); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-3); }
.ba4xq-split-media img { width: 100%; height: 100%; object-fit: cover; }

/* counters row */
.ba4xq-counters { display: flex; flex-wrap: wrap; gap: var(--s-7); }
.ba4xq-counters > div { flex: 1 1 160px; }

/* section heading block */
.ba4xq-head-block { max-width: 720px; margin-bottom: var(--s-7); }
.ba4xq-head-block.center { margin-inline: auto; text-align: center; }
.ba4xq-head-block.center .ba4xq-lead { margin-inline: auto; }

/* page hero (inner pages) */
.ba4xq-page-hero { padding-top: var(--s-7); padding-bottom: var(--s-6); }
.ba4xq-page-hero h1 { margin-bottom: var(--s-4); }
.ba4xq-page-hero .ba4xq-lead { font-size: 1.25rem; }

/* hero media for inner pages */
.ba4xq-hero-media { margin-top: var(--s-6); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); overflow: hidden; aspect-ratio: 16 / 7; background: var(--bg-3); }
.ba4xq-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* blog (patch notes) layout */
.ba4xq-blog-layout { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.ba4xq-blog-main { flex: 1 1 600px; min-width: 0; }
.ba4xq-blog-aside { flex: 0 1 240px; }

/* article hero media */
.ba4xq-patch-media { border: var(--bw) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-hard-sm); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-3); margin-bottom: var(--s-5); }
.ba4xq-patch-media img { width: 100%; height: 100%; object-fit: cover; }

/* pricing card */
.ba4xq-plan { display: flex; flex-direction: column; gap: var(--s-4); }
.ba4xq-plan .ba4xq-plan-price { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--lime); line-height: 1; }
.ba4xq-plan .ba4xq-plan-price small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.ba4xq-feat-list { display: flex; flex-direction: column; gap: var(--s-3); }
.ba4xq-feat-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: #d7d7ec; }
.ba4xq-feat-list svg { width: 22px; height: 22px; color: var(--lime); flex-shrink: 0; margin-top: 2px; }

/* service entry */
.ba4xq-service { display: flex; flex-direction: column; gap: var(--s-4); }
.ba4xq-service-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ba4xq-note { background: var(--bg-3); border-left: 4px solid var(--gold); padding: var(--s-4); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--muted); font-size: 0.96rem; }

/* contact layout */
.ba4xq-contact-grid { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.ba4xq-contact-info { flex: 1 1 300px; }
.ba4xq-contact-form { flex: 1 1 460px; }
.ba4xq-info-row { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); align-items: flex-start; }
.ba4xq-info-row svg { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.ba4xq-info-row a { color: var(--cyan); }
.ba4xq-info-row a:hover { text-decoration: underline; }

/* quiz hub cards */
.ba4xq-quizhub { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.ba4xq-quizhub > * { flex: 1 1 360px; }

/* legal prose */
.ba4xq-prose { max-width: 760px; }
.ba4xq-prose h2 { margin: var(--s-7) 0 var(--s-3); }
.ba4xq-prose h3 { margin: var(--s-5) 0 var(--s-2); color: var(--cyan); }
.ba4xq-prose p { margin-bottom: var(--s-4); color: #d7d7ec; }
.ba4xq-prose ul { margin: 0 0 var(--s-4) var(--s-5); list-style: disc; }
.ba4xq-prose li { margin-bottom: var(--s-2); color: #d7d7ec; }
.ba4xq-prose li::marker { color: var(--magenta); }
.ba4xq-prose a { color: var(--cyan); text-decoration: underline; }
.ba4xq-updated { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--s-6); }

/* author bios */
.ba4xq-authors { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ba4xq-author { flex: 1 1 320px; }
.ba4xq-author h3 { color: var(--text); }
.ba4xq-author .role { color: var(--cyan); font-weight: 700; font-family: var(--font-display); font-size: 0.92rem; margin: 4px 0 var(--s-3); }
.ba4xq-author p { color: var(--muted); font-size: 0.97rem; }

/* thank you */
.ba4xq-thanks { min-height: 60vh; display: flex; align-items: center; }
.ba4xq-thanks .ba4xq-panel { max-width: 620px; margin-inline: auto; text-align: center; }
.ba4xq-thanks .ba4xq-burst { margin: 0 auto var(--s-5); }

/* result detail rows */
.ba4xq-result-list { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; }
.ba4xq-result-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: #d7d7ec; }
.ba4xq-result-list svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; margin-top: 3px; }

/* responsive */
@media (max-width: 1100px) {
  .ba4xq-blog-aside { display: none; }
  .ba4xq-board-side { flex-basis: 100%; }
}
@media (max-width: 780px) {
  .ba4xq-panel { padding: var(--s-5); }
  .ba4xq-cta-band { padding: var(--s-6); }
  .ba4xq-split { gap: var(--s-6); }
  .ba4xq-counters { gap: var(--s-5); }
}