/* DPDP services pages (/dpdp-services and /dpdp-services/<slug>). Extends styles.css + blog.css; same tokens, so both themes work. */
.ds-headline { font-family: 'Source Serif 4', serif; font-size: 1.25rem; color: var(--ink); margin: 4px 0 10px; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ds-fine { font-size: 0.82rem; color: var(--ink-soft); max-width: 70ch; margin: 10px 0 0; }
.ds-mail { color: #CFE0D9; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; }

.ds-path { list-style: none; margin: 20px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-path li, .ds-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.ds-path b, .ds-steps b { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--link); background: var(--accent-soft); border-radius: 8px; padding: 6px 0; text-align: center; }
.ds-path h3, .ds-steps h3 { font-size: 1rem; margin: 0 0 4px; }
.ds-path p, .ds-steps p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ds-card h2 { font-size: 1.25rem; line-height: 1.25; margin: 4px 0 2px; }
.ds-card h2 a { color: var(--ink); text-decoration: none; }
.ds-card h2 a:hover { color: var(--link); text-decoration: underline; }
.ds-card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.ds-card .ds-best { font-size: 0.84rem; margin-top: 4px; }
.ds-card .ds-best b { color: var(--ink); }
.ds-card .blog-more { margin-top: auto; padding-top: 10px; }
.ds-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

.ds-trust { margin-top: 20px; background: var(--surface-2); border-radius: 12px; padding: 16px 20px; }
.ds-trust h3 { font-size: 1.05rem; margin: 0 0 4px; }
.ds-trust p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.ds-trust a { color: var(--link); text-underline-offset: 3px; }

.ds-sec { margin-top: 34px; }
.ds-sec h2 { font-size: 1.4rem; margin: 0 0 10px; }
.ds-sec > p { margin: 0 0 12px; max-width: 70ch; }
.ds-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ds-refs div { display: flex; gap: 10px; align-items: baseline; font-size: 0.9rem; color: var(--ink-soft); }
.ds-refs .dp-chip { flex: none; }

.ds-covers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ds-cover { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.ds-cover h3 { font-size: 1rem; margin: 0 0 4px; }
.ds-cover p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-list li { position: relative; padding-left: 26px; font-size: 0.95rem; }
.ds-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.ds-not li::before { content: "–"; color: var(--brick); }
.ds-timeline { margin: 16px 0 0; padding: 12px 16px; background: var(--amber-soft); color: var(--amber); border-radius: 10px; font-size: 0.9rem; }

.ds-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.faq.one { grid-template-columns: 1fr; margin-top: 8px; }

.ds-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-others li { display: flex; flex-direction: column; gap: 2px; }
.ds-others a { font-weight: 600; color: var(--link); text-underline-offset: 3px; }
.ds-others span { font-size: 0.86rem; color: var(--ink-soft); }

@media (max-width: 720px) {
  .ds-path, .ds-grid, .ds-steps, .ds-two { grid-template-columns: 1fr; }
  .ds-actions .btn { width: 100%; text-align: center; }
}