/* The text of a page as the server sends it, before the interactive page takes over, and the standalone pages (directory, for agents, FAQ).
   Plain reading layout built from the site's own tokens. */
.ssr-page { max-width: 860px; margin-inline: auto; color: var(--text-body); font: 400 17px/1.6 var(--font-ui); }
.ssr-page .ssr-h1 { margin: 0 0 20px; }
.ssr-page .lead { margin: 0 0 20px; color: var(--text-secondary); font-size: 20px; line-height: 1.5; }
.ssr-page .ssr-h2 { margin: 44px 0 14px; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.ssr-page .ssr-h3 { margin: 28px 0 10px; font: 600 19px/1.3 var(--font-ui); color: var(--text-heading); }
.ssr-page .ssr-p { margin: 0 0 14px; }
.ssr-page .ssr-note { color: var(--text-secondary); font-size: 15px; }
.ssr-page .ssr-list { margin: 0 0 16px; padding-left: 22px; }
.ssr-page .ssr-list li { margin-bottom: 8px; }
.ssr-page .ssr-dl dt { margin-top: 18px; font-weight: 600; color: var(--text-heading); }
.ssr-page .ssr-dl dd { margin: 6px 0 0; }
.ssr-page a { color: var(--text-link); text-underline-offset: 3px; }
.ssr-page a:hover { color: var(--text-link-hover); }
.ssr-page .table-wrap { margin: 12px 0 22px; overflow-x: auto; }
.ssr-page .ssr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ssr-page .ssr-table th, .ssr-page .ssr-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-hairline); text-align: left; vertical-align: top; }
.ssr-page .ssr-table thead th { font-weight: 600; color: var(--text-heading); }
.ssr-page .ssr-quote { margin: 18px 0; padding-left: 16px; border-left: 3px solid var(--action-primary); }
.ssr-page .ssr-quote blockquote { margin: 0; }
.ssr-page .ssr-quote figcaption { margin-top: 6px; color: var(--text-secondary); font-size: 15px; }
body[data-route="static"] { background: var(--surface-page); }

/* Questions and answers on the home page */
.faq-list { display: grid; gap: 10px; margin-top: 24px; }
.faq-item { border: 1px solid var(--border-hairline); border-radius: 14px; background: var(--surface-card); }
.faq-item summary { cursor: pointer; padding: 16px 20px; font: 600 17px/1.35 var(--font-ui); color: var(--text-heading); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; font-weight: 400; color: var(--text-secondary); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--text-body); line-height: 1.6; }
.faq-item summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 14px; }

/* The page text the server sends --------------------------------------------------------------------------------- */
/* The text of every page is in the HTML for search engines and agents. People never see it while the page loads: a plain text page that
   blinks into the real one looks broken. They see the holder the server sends instead (the real hero on the home page, a loading bar elsewhere),
   and the app replaces all of it. If the scripts never arrive, the text is shown after 20 seconds so the page is not empty. With scripts off it is
   shown at once (a rule in the page head). */
main[data-ssr="1"] > .ssr-hold { max-height: 0; overflow: hidden; visibility: hidden; animation: ssrLate 0.01s linear 20s forwards; }
main[data-ssr="1"] > .ssr-loading, main[data-ssr="1"] > .ssr-hero { animation: ssrGone 0.01s linear 20s forwards; }
/* The footer waits too while the hero holder is up, so the first view is the hero and nothing else. The app swaps the server's footer (#app-footer) for its own
   as soon as it starts, before the page is ready, so both are covered. */
main[data-ssr="1"]:has(> .ssr-hero) ~ #app-footer { max-height: 0; overflow: hidden; visibility: hidden; animation: ssrLate 0.01s linear 20s forwards; }
main[data-ssr="1"]:has(> .ssr-hero) ~ .site-footer-wrap { max-height: 0; padding-block: 0; overflow: hidden; visibility: hidden; animation: ssrLateFooter 0.01s linear 20s forwards; }
@keyframes ssrLate { to { max-height: 100000px; visibility: visible; } }
@keyframes ssrLateFooter { to { max-height: 100000px; visibility: visible; padding-block: 24px 32px; } }
@keyframes ssrGone { to { max-height: 0; min-height: 0; padding-block: 0; border-width: 0; opacity: 0; visibility: hidden; } }
/* An address with a hash route (/#/compare) is not the home page: web/js/boot.js marks it before the first paint, and the bar replaces the hero. */
.ssr-hero ~ .ssr-loading { display: none; }
html.route-other main[data-ssr="1"] > .ssr-hero { display: none; }
html.route-other main[data-ssr="1"] > .ssr-hero ~ .ssr-loading { display: block; }
html.route-other body[data-route="home"] .site-nav { position: static; background: var(--surface-page); }
/* The hero holder is the hero at rest: nothing moves, nothing can be clicked, and it is the same size as the live hero so nothing jumps when it is replaced. */
.ssr-hero, .ssr-hero * { animation: none; pointer-events: none; user-select: none; }
/* On a wide screen the live hero has its board of leaders on the right, which also sets where the headline sits (it is centered beside it). The holder keeps that place with a faint card of the same size. */
.ssr-board { display: none; }
@media (min-width: 1020px) { .ssr-board { display: block; height: 448px; border-radius: 22px; background: rgba(255, 253, 249, 0.55); box-shadow: inset 0 0 0 1px var(--hf-line); } }
.ssr-hero .ssr-ph { display: flex; align-items: center; color: var(--hf-mute); opacity: 0.85; }
/* The live hero that replaces the holder does not fade in again. */
.hero.is-still .hero-h, .hero.is-still .hero-lead, .hero.is-still .scan-wrap { animation: none; }