/* ================= DRGTL Knowledge Center ================= */
.pagehead.gh { padding:46px 0 40px; }
.pagehead.gh .crumbs { font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; color:#d9b993; margin-bottom:14px; }
.pagehead.gh .crumbs a { color:#f3d3ae; }
.pagehead.gh .crumbs a:hover { color:#fff; }
.pagehead.gh .crumbs span { color:#fff; }
.pagehead.gh h1 { font-size:36px; max-width:860px; }
.pagehead.gh.art h1 { font-size:38px; line-height:1.2; }
.pagehead.gh p.dek { font-size:17.5px; color:#ead8c4; max-width:760px; margin-top:12px; line-height:1.55; }
.pagehead.gh .ghmeta { margin-top:16px; font-size:13px; color:#c9ad8f; letter-spacing:.3px; }
.pagehead.gh .ghmeta a { color:#ffb27a; }

/* category bar */
.catbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; }
.catbar a { font-size:13px; font-weight:700; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; }
.catbar a span { color:var(--mut); font-weight:600; margin-left:4px; }
.catbar a:hover { border-color:var(--orange); color:var(--orange-d); }
.catbar a.on { background:var(--orange); border-color:var(--orange); color:#fff; }
.catbar a.on span { color:#ffe0c8; }

/* starters */
.starters { margin-bottom:54px; }
.starters h2.title { margin-bottom:22px; }
.startgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.startcard { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 20px 16px; color:var(--ink); transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden; }
.startcard::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--maroon), var(--orange)); }
.startcard:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(60,30,5,.12); }
.startcard .sc-cat { font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:800; color:var(--orange-d); margin:4px 0 8px; }
.startcard h3 { font-size:16.5px; line-height:1.3; color:#33241a; margin-bottom:8px; }
.startcard p { font-size:13.5px; color:var(--ink-2); line-height:1.5; flex:1; }
.startcard .sc-meta { font-size:12px; color:var(--mut); margin-top:12px; font-weight:600; }

/* categories */
.catsection { margin-bottom:54px; }
.catgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.catcard { background:var(--cream-2); border:1px solid var(--line); border-radius:14px; padding:20px; color:var(--ink); display:flex; flex-direction:column; }
.catcard:hover { background:#fff; border-color:#ddc9a8; }
.catcard b { color:#33241a; font-size:15px; line-height:1.3; margin-bottom:8px; font-family:Georgia, serif; }
.catcard p { font-size:13px; color:var(--ink-2); line-height:1.5; flex:1; }
.catcard span { margin-top:12px; font-size:12.5px; color:var(--orange-d); font-weight:700; }

/* list */
.glist { margin-top:14px; border-top:1px solid var(--line); }
.grow { display:grid; grid-template-columns:150px 1fr 60px; gap:22px; align-items:center; padding:18px 6px; border-bottom:1px solid var(--line); color:var(--ink); }
.grow:hover { background:#fff; }
.grow .g-cat { font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:800; color:var(--orange-d); }
.grow h3 { font-size:17px; color:#33241a; margin-bottom:4px; line-height:1.3; }
.grow p { font-size:14px; color:var(--ink-2); line-height:1.5; }
.grow .g-meta { font-size:12.5px; color:var(--mut); text-align:right; font-weight:600; }
.empty { padding:30px 0; color:var(--mut); }
.pager { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:26px; font-size:14px; color:var(--mut); }
.pager a { font-weight:700; color:var(--orange-d); }

/* lab CTA */
.labcta { margin:60px 0 10px; background:linear-gradient(150deg, #2a1608, #4a2410); color:#fff; border-radius:18px; padding:34px 38px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.labcta b { font-family:Georgia, serif; font-size:22px; color:#fff4e6; display:block; margin-bottom:8px; }
.labcta p { color:#e3cdb6; font-size:14.5px; max-width:560px; line-height:1.6; }
.labcta-btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn.outline.dark { border-color:rgba(255,255,255,.45); color:#fbe9d8; }

/* article */
.artwrap { display:grid; grid-template-columns:250px 1fr; gap:48px; align-items:start; }
.artside { position:sticky; top:82px; }
.tocbox { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px 14px; margin-bottom:16px; }
.tocbox b { display:block; font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--mut); margin-bottom:10px; }
.tocbox ol { list-style:none; counter-reset:toc; }
.tocbox li { counter-increment:toc; font-size:13.5px; line-height:1.4; margin-bottom:8px; padding-left:22px; position:relative; }
.tocbox li::before { content:counter(toc); position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:var(--cream-2); color:var(--orange-d); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.tocbox a { color:var(--ink-2); }
.tocbox a:hover { color:var(--orange-d); }
.sidecta { background:linear-gradient(150deg, #2a1608, #4a2410); color:#fff; border-radius:14px; padding:20px; }
.sidecta b { display:block; font-family:Georgia, serif; font-size:17px; color:#fff4e6; margin-bottom:8px; }
.sidecta p { font-size:13px; color:#e3cdb6; line-height:1.55; margin-bottom:14px; }
.btn.small { padding:9px 16px; font-size:13.5px; }

.artbody { max-width:760px; min-width:0; }
.artbody > p:first-child { font-size:17.5px; color:#3d2c1c; }
.prose h2 { font-size:25px; margin:38px 0 14px; color:#33241a; scroll-margin-top:90px; }
.prose h3 { margin:26px 0 10px; font-size:19px; scroll-margin-top:90px; }
.prose p, .prose li { color:var(--ink-2); font-size:16px; line-height:1.72; margin-bottom:14px; }
.prose ul, .prose ol { margin:0 0 16px 24px; }
.prose li { margin-bottom:8px; }
.prose strong { color:#33241a; }
.prose blockquote { border-left:4px solid var(--gold); background:#fff; padding:14px 20px; margin:0 0 18px; border-radius:0 12px 12px 0; }
.prose blockquote p { margin:0; color:#4a3a2c; font-style:italic; }
.prose a { color:var(--orange-d); text-decoration:underline; text-decoration-color:rgba(216,71,8,.35); text-underline-offset:2px; }
.prose hr { border:none; border-top:1px solid var(--line); margin:30px 0; }
.tablewrap { overflow-x:auto; margin:0 0 20px; }
.prose table { width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.prose th { text-align:left; background:var(--cream-2); color:#33241a; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; padding:11px 13px; border-bottom:2px solid var(--line); }
.prose td { padding:10px 13px; border-bottom:1px solid #f0e6d8; color:var(--ink-2); vertical-align:top; }
.prose tr:last-child td { border-bottom:none; }
.prose code { background:#fff; border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:14px; }
.artnote { margin-top:40px; background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.artnote b { color:#33241a; }
.artnav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.artnav .pn { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:#33241a; font-weight:700; font-size:14.5px; line-height:1.35; }
.artnav .pn span { display:block; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--mut); margin-bottom:5px; font-weight:800; }
.artnav .pn.next { text-align:right; }
.artnav .pn:hover { border-color:var(--orange); }

.relsec { margin-top:60px; padding-top:40px; border-top:1px solid var(--line); }
.relgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.relcard { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; color:var(--ink); display:flex; flex-direction:column; }
.relcard:hover { border-color:var(--orange); }
.relcard h3 { font-size:15.5px; line-height:1.3; color:#33241a; margin-bottom:8px; }
.relcard p { font-size:13px; color:var(--ink-2); line-height:1.5; flex:1; }
.relcard span { margin-top:12px; font-size:12.5px; color:var(--orange-d); font-weight:700; }

/* home teaser */
.kcgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.kcmore { text-align:center; margin-top:28px; }

@media (max-width:900px) {
  .pagehead.gh h1, .pagehead.gh.art h1 { font-size:27px; }
  .startgrid, .catgrid, .relgrid, .kcgrid { grid-template-columns:1fr 1fr; }
  .artwrap { grid-template-columns:1fr; gap:24px; }
  .artside { position:static; }
  .tocbox { display:none; }
  .grow { grid-template-columns:1fr; gap:6px; padding:16px 4px; }
  .grow .g-meta { text-align:left; }
  .labcta { grid-template-columns:1fr; padding:26px; }
  .artnav { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .startgrid, .catgrid, .relgrid, .kcgrid { grid-template-columns:1fr; }
}

/* keep the Guides link visible in the collapsed mobile nav */
@media (max-width:900px) { .nav .links a.keep { display:inline !important; } }

/* older reports page */
.olderwrap { display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
.olderform { background:linear-gradient(150deg, #2a1608, #4a2410); border-radius:18px; padding:30px; color:#fff; box-shadow:0 24px 60px rgba(58,30,8,.25); position:sticky; top:86px; }
.olderform h2 { color:#fff4e6; font-size:22px; margin-bottom:6px; }
.olderstat { font-size:12.5px; color:#d9c0a8; margin-top:14px; text-align:center; }
.mono { font-family:Consolas, Menlo, monospace; background:#fff; border:1px solid var(--line); border-radius:5px; padding:0 5px; }
.legacynote { margin:0 0 20px; background:#fff8ec; border:1px solid #ecd9b8; border-radius:14px; padding:14px 18px; font-size:13.5px; color:#5a4a3c; line-height:1.55; }
.legacynote b { color:#33241a; }
.verifybox .oldlink { display:inline-block; margin-top:14px; color:#ffcf9e; font-weight:700; font-size:14px; }
@media (max-width:900px) { .olderwrap { grid-template-columns:1fr; } .olderform { position:static; } }