/* Shared page extensions. Keeps the visual language of the supplied style.css. */
:root { --content-max: 900px; }

body { min-height: 100vh; }
.brand-text { white-space: nowrap; }
.brand-text small { display:block; font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.05em; }

.topbar .nav { gap: 16px; }
.nav a[aria-current="page"] { color: var(--text); }

.page-hero { padding: 62px 0 42px; }
.page-hero .hero-grid { align-items: stretch; }
.page-hero .hero-copy { align-self: center; }
.page-hero .content-image { margin: 0; min-height: 360px; height: 100%; }
.page-hero .content-image img { height: 100%; object-fit: cover; }

.article { max-width: var(--content-max); margin: 0 auto; }
.article > p { color:var(--muted); line-height:1.85; margin:0 0 20px; }
.article > h2 { margin:52px 0 18px; font-size:clamp(28px,4vw,44px); line-height:1.08; letter-spacing:-.03em; }
.article > h3 { margin:34px 0 14px; }
.article a:not(.btn):not(.text-link) { color:var(--accent-2); text-decoration:underline; text-decoration-color:rgba(141,252,101,.35); text-underline-offset:3px; }

.article ul,
.article ol,
.section ul:not(.terms-list),
.section ol {
  margin: 20px 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.article ul li,
.article ol li,
.section ul:not(.terms-list) li,
.section ol li,
.terms-list li {
  position: relative;
  padding: 16px 18px 16px 58px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: #dce5f6;
  line-height: 1.7;
}

.article ul:not(.terms-list) li::before,
.section ul:not(.terms-list) li::before,
.terms-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--accent-2) 0 35%, transparent 36%),
    linear-gradient(135deg, rgba(141,252,101,.25), rgba(255,122,24,.25));
  box-shadow: 0 0 0 4px rgba(141,252,101,.08);
}

.article ol li,
.section ol li {
  counter-increment: step;
}

.article ol li::before,
.section ol li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 122, 24, .14);
  border: 1px solid rgba(255, 122, 24, .28);
  color: #ffb67f;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.terms-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.terms-list li::before {
  background:
    radial-gradient(circle at center, #ffb67f 0 35%, transparent 36%),
    linear-gradient(135deg, rgba(255,122,24,.28), rgba(141,252,101,.18));
  box-shadow: 0 0 0 4px rgba(255,122,24,.08);
}

.toc { padding:24px; margin:0 0 34px; background:linear-gradient(180deg,rgba(26,33,47,.96),rgba(15,18,26,.98)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.toc strong { display:block; margin-bottom:14px; }
.toc-links { display:flex; flex-wrap:wrap; gap:10px; }
.toc-links a { padding:8px 11px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--muted); font-size:13px; background:rgba(255,255,255,.03); }
.toc-links a:hover { color:var(--text); border-color:rgba(255,122,24,.28); }

.code-grid-4 { grid-template-columns:repeat(2,1fr); }
.code-grid-4 .btn { width:100%; margin-top:16px; text-align:center; }
.promo-table a { color:var(--accent-2); font-weight:700; }
.promo-table a:hover { text-decoration:underline; }

.link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.link-card { display:flex; flex-direction:column; gap:10px; padding:24px; min-height:210px; background:linear-gradient(180deg,rgba(26,33,47,.96),rgba(15,18,26,.98)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.link-card .tag { align-self:flex-start; }
.link-card h3 { margin:4px 0 0; font-size:22px; }
.link-card p { color:var(--muted); line-height:1.7; margin:0; }
.link-card .text-link { margin-top:auto; }

.notice { padding:22px 24px; border-radius:18px; border:1px solid rgba(255,122,24,.24); background:rgba(255,122,24,.08); margin:26px 0; }
.notice strong { display:block; margin-bottom:8px; color:#ffbd8b; }
.notice p { color:var(--muted); line-height:1.75; margin:0; }
.notice.safe { border-color:rgba(141,252,101,.20); background:rgba(141,252,101,.06); }
.notice.safe strong { color:var(--accent-2); }

.data-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:18px; margin:24px 0 30px; background:rgba(7,13,31,.55); }
.data-table { width:100%; border-collapse:collapse; min-width:680px; }
.data-table th,.data-table td { padding:15px 17px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.data-table th { color:#fff; background:rgba(255,255,255,.04); }
.data-table td { color:var(--muted); line-height:1.6; }
.data-table tr:last-child td { border-bottom:0; }
.data-table td:first-child { color:var(--text); font-weight:700; }

.meta-note { color:var(--muted); font-size:13px; margin-top:16px; }
.text-center { text-align:center; }
.mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; }
.mb-0 { margin-bottom:0; }

.footer-links { display:flex; flex-wrap:wrap; gap:12px 18px; color:var(--muted); font-size:14px; }
.footer-links a:hover { color:var(--text); }
.footer-disclaimer a { color:var(--accent-2); }

.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; }
.compare-card { padding:24px; background:linear-gradient(180deg,rgba(26,33,47,.96),rgba(15,18,26,.98)); border:1px solid var(--line); border-radius:var(--radius); }
.compare-card h3 { margin-top:0; }

.hero-stat { display:grid; gap:12px; padding:28px; height:100%; background:linear-gradient(180deg,rgba(26,33,47,.96),rgba(15,18,26,.98)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-stat .stat-box { margin:0; }

@media (max-width:1080px) { .link-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:780px) {
  .page-hero { padding-top:34px; }
  .page-hero .content-image { min-height:240px; }
  .link-grid,.compare-grid,.code-grid-4 { grid-template-columns:1fr; }
  .brand-text { font-size:14px; }
}

.inline-media-grid .content-image {
  margin: 0;
  height: 100%;
}

.inline-media-grid .content-image img {
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.article .content-image {
  margin: 24px 0 30px;
}

.two-col:has(.side-panel .content-image) {
  align-items: stretch;
}

.side-panel:has(.content-image) {
  padding: 0;
  overflow: hidden;
  display: flex;
  align-self: stretch;
}

.side-panel .content-image {
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
  width: 100%;
  min-height: 320px;
}

.side-panel .content-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}