/* ===== content pages (guides, designs, FAQ, about) and the home page's SEO blocks =====
 * Built from the app's own tokens (styles.css) and patterns; nothing here restyles the tool. */

/* ---- header and footer of content pages ---- */
.page .topbar{ flex-wrap:wrap; row-gap:8px; }
.site-nav{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.site-nav a{
  padding:6px 10px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600;
  color:var(--text-muted); text-decoration:none;
  transition:background-color 140ms ease, color 140ms ease;
}
.site-nav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-strong); }
@media (hover:hover) and (pointer:fine){ .site-nav a:not([aria-current="page"]):hover{ color:var(--text); background:rgba(255,255,255,0.08); } }
.site-footer{ flex-wrap:wrap; }
.site-footer-links{ white-space:normal; display:flex; flex-wrap:wrap; gap:0 10px; justify-content:flex-end; }
.site-footer-links a{ display:inline-block; padding:5px 4px; }

.page main.wide{ max-width:1040px; }
.crumbs{ margin:0 0 var(--space-3); font-size:var(--text-sm); color:var(--text-muted); }
.crumbs a{ color:var(--text-muted); }
.crumbs span[aria-current]{ color:var(--text); }
.page-meta{ margin:0 0 var(--space-4); font-size:var(--text-xs); color:var(--text-muted); }

/* ---- answer-first block and key facts ---- */
.answer{
  margin:var(--space-4) 0; padding:var(--space-4) var(--space-5);
  background:var(--accent-soft); border:1px solid rgba(88,196,255,0.28); border-radius:var(--radius-lg);
  font-size:var(--text-lg); line-height:1.55; color:var(--text);
}
.page .answer{ color:var(--text); font-size:var(--text-lg); }
.keyfacts{
  display:grid; grid-template-columns:minmax(120px, max-content) 1fr; gap:6px var(--space-4);
  margin:var(--space-4) 0; padding:var(--space-4);
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:var(--text-sm);
}
.keyfacts dt{ color:var(--text-muted); }
.keyfacts dd{ margin:0; font-weight:600; }
@media (max-width:480px){ .keyfacts{ grid-template-columns:1fr; } .keyfacts dd{ margin-bottom:6px; } }

.page .steps{ padding-left:1.3em; }
.page .steps li{ margin-bottom:var(--space-2); }
.page .steps li strong{ color:var(--text); }
.page h3{ font-size:var(--text-md); margin:var(--space-5) 0 var(--space-2); }

.cta{ margin:var(--space-6) 0 var(--space-4); }
.cta .btn{ margin-top:0; }
.sources{ font-size:var(--text-sm); }
.sources li{ margin-bottom:6px; }

/* ---- tables ---- */
.table-wrap{ overflow-x:auto; margin:var(--space-4) 0; border:1px solid var(--border); border-radius:var(--radius-md); }
.page table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); min-width:620px; }
.page th, .page td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); line-height:1.45; }
.page thead th{ background:var(--card-bg); color:var(--text-muted); font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase; }
.page tbody th{ font-weight:700; color:var(--text); width:22%; }
.page tbody tr:last-child th, .page tbody tr:last-child td{ border-bottom:none; }
.page td{ color:#dbe6ee; }

/* ---- design catalogue ---- */
.design-group{ margin-top:var(--space-6); }
.design-grid{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-3); }
.design-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:8px; display:flex; flex-direction:column; gap:4px; }
.design-card img{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:var(--radius-md); background:#000; border:1px solid var(--hairline, rgba(255,255,255,0.06)); }
.design-card h3{ margin:var(--space-2) 0 0; font-size:var(--text-md); }
.design-card p{ margin:0; font-size:var(--text-xs); color:var(--text-muted); line-height:1.45; }
.design-card .design-meta{ color:#dbe6ee; font-variant-numeric:tabular-nums; }
.design-card a.open{ margin-top:auto; padding-top:var(--space-2); font-size:var(--text-sm); font-weight:600; }

/* ---- FAQ ---- */
.faq-list h2{ font-size:var(--text-lg); margin:var(--space-5) 0 var(--space-2); }
.faq-list p{ margin:0 0 var(--space-3); }

/* ---- home page: heading, trust chips, about section (inside the tool's panel) ---- */
.panel-lead{ margin:0 0 6px; font-size:var(--text-lg); line-height:1.3; font-weight:700; letter-spacing:.005em; }
.trust-list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.trust-list li{ font-size:var(--text-xs); font-weight:600; padding:3px 9px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-strong); border:1px solid rgba(88,196,255,0.25); }
.about-facts{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:var(--space-3) 0 0; padding:10px 12px; font-size:var(--text-sm); background:var(--card-bg); border:1px solid var(--hairline, rgba(255,255,255,0.06)); border-radius:var(--radius-md); }
.about-facts dt{ color:var(--text-muted); }
.about-facts dd{ margin:0; font-weight:600; }
.about-links{ list-style:none; margin:var(--space-3) 0 0; padding:0; font-size:var(--text-sm); display:grid; gap:6px; }
.about-links a{ color:var(--accent-strong); text-underline-offset:2px; }
.about-q{ margin:var(--space-4) 0 4px; font-size:var(--text-sm); font-weight:700; }
.about-a{ margin:0; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5; }