/* Layout */
.nl-container { max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.nl-grid { display: grid; gap: 16px; }
.nl-maingrid { grid-template-columns: minmax(0,1fr) 240px; align-items: start; column-gap: 20px; }
@media (max-width: 980px){ .nl-maingrid{ grid-template-columns: 1fr; } }

/* Cards & headings */
.nl-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.06); padding: 16px 18px; }
.nl-h2 { margin: 0 0 12px; line-height: 1.25; }
.nl-h3 { margin: 0 0 8px; }
.nl-raw img { max-width: 100%; height: auto; }

/* CTA group */
.section-cta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.section-cta-btn{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid #d7dcff;text-decoration:none;font-weight:600}
.section-cta-btn.primary{background:#4f7cff;color:#fff;border-color:#4f7cff}
.section-cta-btn:hover{filter:brightness(0.95)}

/* TOC: sticky + scroll */
.nl-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; }
.nl-toc nav { display: grid; gap: 8px; }
.nl-toc a { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; background: #f8faff; border: 1px solid #e5e9ff; }
.nl-toc a.active { background: #eaf0ff; border-color: #bcd0ff; font-weight: 600; }

/* Compare */
.compare{display:grid;gap:10px;margin:10px 0}
.compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center;background:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:12px}
.compare-head{background:transparent;box-shadow:none;font-weight:700;border:1px solid rgba(77,128,255,.25)}
.compare-row>div:first-child{color:#5a6385;font-weight:600}
@media (max-width:800px){ .compare-row{grid-template-columns:1fr} .compare-row>div:first-child{order:-1} }

/* Timeline */
.timeline{list-style:none;margin:10px 0;padding:0;display:grid;gap:12px}
.timeline li{background:#fff;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:14px 16px;position:relative}
.timeline li::before{content:"";position:absolute;left:10px;top:18px;width:6px;height:6px;border-radius:50%;background:#4f7cff}
.timeline h3{margin:0 0 6px}
.timeline p{margin:0;color:#5a6385}

/* FAQ */
.faq details{border:1px solid #e5e9ff;border-radius:10px;padding:10px 12px;margin:8px 0;background:#f8faff}
.faq summary{cursor:pointer;font-weight:600}

/* Remove any accidental gray background behind headings from other CSS */
.title .cn, h2.cn { background: transparent !important; }
article[id]{ scroll-margin-top: 100px; }


/* No-TOC variant: single column */
.nl-maingrid.nl-no-toc{ grid-template-columns: 1fr; }