/* The Barrier — About and FAQ pages. Built on /blog/blog.css (colour tokens,
   fonts, nav, footer, .callout, .cta, .tbc); only layout and typography here. */
.page { max-width: 920px; margin: 0 auto; }
.page-header { max-width: 760px; margin: 32px 0 44px; }
.page-header .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.page-header h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 16px; }
.page-header .dek { color: var(--text-muted); font-size: 18px; line-height: 1.6; }

/* Long-form text */
.prose { min-width: 0; font-size: 17px; line-height: 1.75; color: var(--text-body); }
.prose > section + section { margin-top: 60px; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; scroll-margin-top: 24px; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--text); margin: 28px 0 8px; }
.prose h2 + h3 { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + blockquote, .prose ul + h3 { margin-top: 1em; }
.prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 500; }
.prose blockquote { margin-top: 1.2em; padding: 4px 0 4px 18px; border-left: 3px solid var(--red); color: var(--text); font-style: italic; }
.prose .callout { margin-top: 32px; }
.prose a.cta { color: #fff; text-decoration: none; }

/* About: fact box */
.facts { border: 1px solid var(--border-bright); border-radius: 12px; background: var(--surface); font-size: 16px; }
.facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
.facts > div:first-child { border-top: 0; }
.facts dt { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { color: var(--text); overflow-wrap: anywhere; }

/* About: sticky table of contents on desktop */
.about-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 24px; font-size: 14px; }
.toc-title { margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.toc ol { list-style: none; border-left: 1px solid var(--border-bright); }
.toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a:focus-visible { color: var(--text); border-left-color: var(--red); }

/* About: score bands, mascot, site guide, issues */
.prose .bands { list-style: none; padding-left: 0; }
.bands li { display: flex; gap: 10px; align-items: baseline; }
.band-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.band-minimal { background: #4caf82; } .band-low { background: #6bb5ff; } .band-medium { background: #f0b429; }
.band-high { background: #f07a2a; } .band-critical { background: #f04a4a; }
.mascot-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 8px; }
.mascot-gallery figure { margin: 0; }
.mascot-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #000; border-radius: 12px; }
.mascot-gallery figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.site-guide > div { padding: 12px 0; border-top: 1px solid var(--border); }
.site-guide dt a { font-family: var(--font-display); font-weight: 600; color: var(--text); text-decoration: none; }
.site-guide dt a:hover { color: var(--red); }
.site-guide dt span { margin-left: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.site-guide dd { margin-top: 2px; }
.prose .issue-list { list-style: none; padding-left: 0; }
.issue-list .issue-no { font-family: var(--font-mono); font-size: 13px; color: var(--red); margin-right: 6px; }
.issue-list time { margin-left: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }

/* FAQ page */
.faq-mascot { display: block; width: min(200px, 50vw); height: auto; margin: -16px 0 36px; border-radius: 14px; }
.faq-page { max-width: 760px; }
.faq-search { margin-bottom: 36px; }
.faq-search label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.faq-search input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-bright); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 17px; }
.faq-search input::placeholder { color: var(--text-muted); }
.faq-search input:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.faq-count { min-height: 1.4em; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group > h2 { margin-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.faq-q { border-bottom: 1px solid var(--border-bright); }
.faq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: '+'; flex-shrink: 0; font-family: var(--font-mono); font-size: 20px; line-height: 1; color: var(--red); }
.faq-q[open] summary::after { content: '−'; }
.faq-q summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.faq-q h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--text); }
.faq-q p { padding-bottom: 20px; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.faq-q p a { color: var(--red); text-underline-offset: 3px; }
.faq-q p strong { color: var(--text); font-weight: 500; }
.faq-none { margin-top: 12px; color: var(--text-muted); }
.faq-none a { color: var(--red); }
.faq-page .callout { margin-top: 48px; color: var(--text-body); }
.faq-page .callout a:not(.cta) { color: var(--red); }

@media (max-width: 1023px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 600px) {
  .page-header { margin-top: 16px; }
  .toc ol { columns: 1; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mascot-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* /job-scam-detector: the homepage demo (demo/how-it-works.css) in a page,
   the comparison table and the steps. */
.detector-page { --text-dim: rgba(240,237,232,0.25); }
.detector-page .page-header { max-width: 800px; }
.detector-page .page-header h1 { font-size: clamp(26px, 8.2vw, 52px); }   /* "Automatically" fits a 320px phone */
.detector-page .page-header .cta { margin-top: 26px; }
.detector-page .hiw { padding-top: 0; margin-bottom: 64px; }
.detector-page .hiw-head { grid-template-columns: 170px minmax(0, 1fr); margin-bottom: 26px; }
.detector-page .hiw-head > img { display: block; width: 100%; height: auto; }
.detector-page .hiw-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); margin-bottom: 10px; }
.detector-page .section-sub { max-width: 560px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.detector-prose { max-width: 760px; }
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; border: 1px solid var(--border-bright); border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 1.5; }
.compare th, .compare td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.compare th { border-top: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.compare th + th, .compare td + td { border-left: 1px solid var(--border); }
.compare td + td { color: var(--text); }
.compare thead th:last-child { color: var(--red); }
.prose .steps { padding-left: 1.4em; }
.prose .steps li::marker { color: var(--red); font-family: var(--font-mono); }
.detector-figure { margin: 24px 0 8px; }
.detector-figure img { display: block; width: min(100%, 420px); height: auto; border-radius: 12px; background: #000; }
.prose .detector-cta { margin-top: 28px; }
@media (max-width: 640px) {
  .detector-page .hiw-head { grid-template-columns: 1fr; }
  .detector-page .hiw-head > img { width: min(180px, 50vw); }
  .compare { font-size: 15px; }
  .compare th, .compare td { padding: 10px 12px; }
}