/* Content pages of the public site (blog, comparisons, alternatives, demo) and the audience page.
   Builds on tokens.css, app.css and site.css: tokens only, no colour of its own. */

/* page frame: vertical padding only, the side margins stay those of .site-wrap (same element) */
.content-page { padding-block: var(--s-10) var(--s-12); display: flex; flex-direction: column; gap: var(--s-10); }
.content-head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 760px; }
.content-head h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.025em; }
.content-section { display: flex; flex-direction: column; gap: var(--s-5); }
.content-section h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.015em; }
.eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-text); }
.crumbs { font-size: var(--fs-sm); }
.crumbs a { color: var(--text-subtle); text-decoration: none; font-weight: var(--fw-medium); }
.crumbs a::before { content: "‹ "; }
.crumbs a:hover { color: var(--text-default); }
@media (max-width: 760px) { .content-page { padding-block: var(--s-6) var(--s-8); gap: var(--s-8); } }

/* blog list */
.post-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-width: 760px; }
.post-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) 0; border-top: 1px solid var(--border-subtle); }
.post-card:last-child { border-bottom: 1px solid var(--border-subtle); }
.post-card h2 { font-size: var(--fs-lg); }
.post-card h2 a { color: var(--text-default); text-decoration: none; }
.post-card h2 a:hover { color: var(--brand-text); text-decoration: underline; }
.post-card p { color: var(--text-subtle); max-width: 65ch; }

/* article */
.article .crumbs { margin-bottom: calc(-1 * var(--s-2)); }
.article-body { display: flex; flex-direction: column; gap: var(--s-4); }
.article-body h2 { scroll-margin-top: 80px; }
.article-body table { display: block; overflow-x: auto; max-width: 100%; }
.article-body th { background: var(--bg-subtle); }
.article-body code { font-size: var(--fs-sm); background: var(--bg-muted); padding: 1px 5px; border-radius: var(--r-xs); }
.toc { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); background: var(--bg-subtle); }
.toc-title { font-weight: var(--fw-bold); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.article .toc ol { padding-left: 1.2em; gap: var(--s-1); }
.article .toc li { font-size: var(--fs-sm); line-height: var(--lh-base); }
.article .toc a { color: var(--text-subtle); text-decoration: none; }
.article .toc a:hover { color: var(--brand-text); text-decoration: underline; }

/* call to action */
.cta-box { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-xl); background: var(--brand-subtle); color: var(--text-default); }
.cta-box h2 { margin: 0; font-size: var(--fs-lg); }
.article .cta-box { margin-top: var(--s-6); }
.article .cta-box p { font-size: var(--fs-base); }

/* comparisons: a table from 761 px; below, one card per criterion, Mindsef's answer then the rival's, each labelled */
.compare-wrap { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.compare tbody th { font-weight: var(--fw-bold); color: var(--text-default); width: 22%; }
.compare tbody td { width: 39%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .compare-wrap { border: 0; border-radius: 0; overflow: visible; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody { display: flex; flex-direction: column; gap: var(--s-3); }
  .compare tbody tr { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
  .compare tbody th { width: auto; background: var(--bg-subtle); }
  .compare tbody td { width: auto; }
  .compare tbody tr:last-child th { border-bottom: 1px solid var(--border-subtle); }
  .compare tbody td:last-child { border-bottom: 0; }
  .compare td::before { content: attr(data-label); display: block; margin-bottom: var(--s-1); font-size: var(--fs-xs);
    font-weight: var(--fw-bold); color: var(--text-muted); }
}
.ref { font-size: var(--fs-xs); margin-left: 2px; }
.ref a { text-decoration: none; font-weight: var(--fw-bold); }
.sources-block { display: flex; flex-direction: column; gap: var(--s-2); }
.sources-block h3 { font-size: var(--fs-sm); color: var(--text-subtle); }
.sources-block ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; }
.sources-block a { overflow-wrap: anywhere; }
.sources-block li:target { background: var(--attention-subtle); color: var(--text-default); }
.fit-card h3 { font-size: var(--fs-md); }
.us-card { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.rival-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.rival-card h2 { font-size: var(--fs-lg); }
.rival-card h2 a { color: var(--text-default); text-decoration: none; }
.rival-card h2 a:hover { color: var(--brand-text); text-decoration: underline; }
.others .card h3 a { color: var(--text-default); }
@media (max-width: 860px) { .rival-list { grid-template-columns: minmax(0, 1fr); } }

/* demo */
.demo-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-10); align-items: start; }
.demo-card { padding: var(--s-6); gap: var(--s-4); }
.slots { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.slot { padding: var(--s-3) var(--s-4); gap: 2px; }
.slot input { top: var(--s-3); right: var(--s-3); }
.slot span { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done-card { max-width: 620px; padding: var(--s-8); gap: var(--s-4); }
.done-icon { width: 48px; height: 48px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--brand-subtle); color: var(--brand-text); }
@media (max-width: 960px) { .demo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .demo-card, .done-card { padding: var(--s-5); } }

/* audience page (app layout) */
.card-pad { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.card-pad h2 { font-size: var(--fs-md); }
.bar-cell { width: 55%; }
.bar { width: 100%; height: 8px; border: 0; border-radius: var(--r-full); background: var(--bg-muted); overflow: hidden; appearance: none; -webkit-appearance: none; vertical-align: middle; }
.bar::-webkit-progress-bar { background: var(--bg-muted); border-radius: var(--r-full); }
.bar::-webkit-progress-value { background: var(--brand); border-radius: var(--r-full); }
.bar::-moz-progress-bar { background: var(--brand); border-radius: var(--r-full); }