/* Digital marketing cluster pages (build_dm_pages.py). Tables and calculator reuse compare.css. */
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
.dm-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:26px;display:flex;flex-direction:column}
.dm-card h3{font-size:19px;margin-bottom:8px}
.dm-card p{color:var(--muted);font-size:15.5px;margin:0 0 14px}
.dm-more{margin-top:auto;font-weight:600;font-size:15px;text-decoration:none;color:var(--em)}
.dm-more:hover{text-decoration:underline}

.dm-text{max-width:820px}
.dm-text.has-aside{max-width:none;display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.dm-text h2{margin-bottom:18px}
.dm-text p{color:var(--muted);font-size:17px;margin:0 0 14px;max-width:68ch}
.dm-text p strong{color:var(--ink);font-weight:600}
.dm-text a{font-weight:600}
.dm-aside{background:#fff;border:1px solid var(--mint-2);border-radius:var(--rad);padding:26px;box-shadow:var(--sh)}
.dm-aside p{font-size:15.5px}
.dm-aside .d-rows{margin:6px 0 14px;grid-template-columns:1fr;gap:0}
.dm-aside .d-rows>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.dm-aside .d-rows>div:last-child{border-bottom:0}
.dm-aside .d-rows dt{font-size:14.5px}
.dm-aside .d-rows dd{font-size:16px;margin:0;color:var(--em)}
.dm-aside .btn{margin-top:6px}
.dm-src{font-size:13px !important;color:var(--muted)}

.dm-tbl tbody td:nth-child(2){color:var(--ink);font-weight:400}
.cmp td a{font-weight:600;text-decoration:none}
.cmp td a:hover{text-decoration:underline}
.cmp tbody th a{color:var(--em);text-decoration:none}
.calc-grid-4{grid-template-columns:repeat(2,1fr)}

.dm-related a{align-items:flex-start}
.dm-related b{display:block;font-weight:600;margin-bottom:4px}
.dm-related em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:14.5px}

@media (min-width:1081px){#models .pcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1080px){
  .dm-grid{grid-template-columns:repeat(2,1fr)}
  .dm-text.has-aside{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .dm-grid,.calc-grid-4{grid-template-columns:1fr}
  .dm-card{padding:22px}
}