/* Shared styles for the crawlable static pages and the GEO answer blocks.
   Everything here is plain HTML-visible content: no hidden text, no cloaking. */
.tldr { font-size: 16px; line-height: 1.7; background: #eaf5f3; border-inline-start: 4px solid var(--brand); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 0 0 26px; color: #0d4a4a; }
.seo-section { border-top: 1px solid var(--line); background: var(--surface); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.fact-table, .catalogue-table, .spec-table, .market-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); }
.fact-table th, .fact-table td, .catalogue-table th, .catalogue-table td, .spec-table th, .spec-table td, .market-table th, .market-table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.fact-table th { width: 260px; color: var(--muted); font-weight: 600; background: #f7fbfb; }
.fact-table tr:last-child th, .fact-table tr:last-child td, .catalogue-table tbody tr:last-child td { border-bottom: 0; }
.catalogue-table thead th, .market-table thead th { background: #eaf5f3; color: var(--brand-dark); font-size: 12px; letter-spacing: .3px; }
.catalogue-table tbody tr:hover, .market-table tbody tr:hover { background: #f8fcfc; }
.catalogue-table a { font-weight: 700; text-decoration: none; }
.catalogue-table a:hover { text-decoration: underline; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { background: #f7fbfb; }
.faq-answer { padding: 0 18px 16px; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

/* ------------------------------------------------------- static SEO pages */
body.static-page { background: var(--bg); }
.static-main { padding-block: 34px 70px; }
.static-main h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.8px; line-height: 1.2; margin: 18px 0 14px; }
.static-main h2 { font-size: 21px; letter-spacing: -.3px; margin: 38px 0 12px; }
.static-main h3 { font-size: 16px; margin: 24px 0 8px; }
.static-main p { color: var(--muted); font-size: 14.5px; }
.static-main section { padding-block: 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: 12.5px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: #a9bcbc; }
.breadcrumb a { text-decoration: none; }
.answer-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 18px; }
.answer-block p:last-child { margin-bottom: 0; }
.lang-select-static { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.pill-list li { background: var(--soft); color: var(--brand-dark); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.related-grid a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.35; }
.related-grid a:hover { border-color: var(--brand); background: #f7fcfc; }
.related-grid small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; margin-top: 3px; }
.market-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.market-grid a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; text-decoration: none; font-weight: 700; font-size: 14px; }
.market-grid a:hover { border-color: var(--brand); }
.market-grid small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; font-size: 12px; }
.footer-contact { margin: 14px 0 0; font-size: 13px; color: #cfe7e5; }
.footer-contact a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.footer-contact a:hover { border-bottom-color: #fff; }
.static-footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.static-footer-links a { color: #cfe7e5; font-size: 12px; text-decoration: none; }
.static-footer-links a:hover { text-decoration: underline; }
.notice { border-inline-start: 4px solid var(--accent); background: #fdf9ec; color: #6e5a20; padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 13px; margin: 20px 0; }
.page-note { font-size: 12px; color: var(--muted); margin-top: 22px; }
[dir="rtl"] .tldr { border-radius: 12px 0 0 12px; }
.card-name a { color: inherit; text-decoration: none; }
.card-name a:hover { color: var(--brand); text-decoration: underline; }
.catalogue-table small { color: #8ba0a1; font-size: 11px; }
.static-main h1 small { font-size: .55em; font-weight: 400; color: var(--muted); }
.static-main h3 small { font-size: .7em; font-weight: 400; color: var(--muted); }
.pill-list a { text-decoration: none; color: var(--brand-dark); }
.cat-index { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.cat-index a { font-size: 12px; font-weight: 600; color: var(--brand-dark); background: var(--soft); border-radius: 20px; padding: 5px 12px; text-decoration: none; }
.cat-index a:hover { background: var(--brand); color: #fff; }

@media (max-width: 900px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-table th { width: 160px; }
}
@media (max-width: 620px) {
  .related-grid, .market-grid { grid-template-columns: 1fr; }
  .fact-table th { width: 130px; }
  .tldr { font-size: 14.5px; }
}