:root { --dd-navy:#272e47; --dd-blue:#3f6ad8; --dd-gold:#edbf4a; --dd-line:#e6e9f5; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:#34384a; line-height:1.6; }
a { color:#315dc9; }
.guide-nav { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1120px; padding:14px 20px; margin:auto; }
.guide-nav img { width:150px; height:auto; }
.guide-nav-links { display:flex; gap:18px; flex-wrap:wrap; font-size:.95rem; }
.guide-nav-links a { text-decoration:none; color:var(--dd-navy); font-weight:600; }
.guide-hero { color:#fff; background:linear-gradient(135deg,#272e47,#3f4d80); padding:64px 20px; }
.guide-inner { max-width:960px; margin:auto; }
.guide-hero h1 { max-width:780px; margin:0 0 12px; font-size:2.2rem; line-height:1.2; }
.guide-hero p { max-width:760px; margin:0; font-size:1.08rem; color:#f4f6ff; }
.badges { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.badge { padding:6px 10px; border:1px solid rgba(255,255,255,.35); border-radius:7px; font-size:.88rem; }
.guide-section { padding:48px 20px; }
.guide-section.alt { background:#fafbfd; }
.guide-section h2 { margin:0 0 12px; color:var(--dd-navy); font-size:1.55rem; }
.guide-section h3 { margin:0 0 8px; color:var(--dd-navy); font-size:1.1rem; }
.guide-section > .guide-inner > p:first-of-type { max-width:800px; }
.facts { border:1px solid var(--dd-line); border-radius:10px; overflow:hidden; max-width:800px; background:#fff; margin-top:22px; }
.facts div { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid #edf0f7; }
.facts div:last-child { border:0; }.facts strong,.facts span { padding:11px 14px; }.facts strong { background:#f6f8fc; color:var(--dd-navy); }
code { background:#eef1f8; padding:2px 5px; border-radius:4px; color:#293552; overflow-wrap:anywhere; }
.steps { list-style:none; padding:0; margin:24px 0 0; counter-reset:steps; max-width:800px; }
.steps li { counter-increment:steps; position:relative; padding:0 0 22px 58px; }.steps li:before { content:counter(steps); position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--dd-blue); color:#fff; font-weight:bold; }
.callout { border-left:4px solid #2d8a55; background:#f0fbf4; padding:14px 16px; max-width:800px; border-radius:7px; }.callout.warn { border-color:#b88a00; background:#fff8e6; }
pre { padding:16px; overflow:auto; border-radius:8px; background:#1e2329; color:#e6e8eb; max-width:800px; line-height:1.5; }.cta { display:inline-block; background:var(--dd-gold); color:#2b2b2b; padding:11px 16px; border-radius:7px; text-decoration:none; font-weight:bold; }
.guide-footer { background:var(--dd-navy); color:#fff; padding:26px 20px; }.guide-footer a { color:#fff; }
/* Troubleshooting table — every guide ends with one. Scrolls inside its own
   container so the page body never scrolls sideways on mobile. */
.tshoot-wrap { overflow-x:auto; max-width:800px; border:1px solid var(--dd-line); border-radius:10px; margin-top:22px; }
.tshoot { border-collapse:collapse; width:100%; background:#fff; min-width:560px; }
.tshoot th,.tshoot td { text-align:left; padding:12px 14px; border-bottom:1px solid #edf0f7; font-size:.92rem; vertical-align:top; }
.tshoot th { background:#f6f8fc; color:var(--dd-navy); font-weight:600; white-space:nowrap; }
.tshoot tr:last-child td { border-bottom:0; }
.tshoot code { font-size:.85rem; }
/* Cross-links to the other guides, rendered at the foot of each one. */
.guide-more { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding:0; list-style:none; }
.guide-more a { display:inline-block; border:1px solid var(--dd-line); border-radius:8px; padding:8px 13px; text-decoration:none; color:var(--dd-navy); font-weight:600; font-size:.9rem; background:#fff; }
.guide-more a:hover { border-color:var(--dd-blue); color:var(--dd-blue); }
@media (max-width:600px) { .guide-hero h1 { font-size:1.8rem; }.facts div { grid-template-columns:1fr; }.facts strong { padding-bottom:4px; }.facts span { padding-top:4px; }.guide-nav { align-items:flex-start; flex-direction:column; } }