/* Delviom — Legal pages (Privacy Policy, Accessibility Statement).
   Layered on top of main.css + index1.css + article.css so the header, banner
   and footer stay identical to the rest of the site. Adds a copy-only banner
   variant, list styling and the contact block used by the legal documents. */

/* ===================== Copy-only banner ===================== */
.page-banner--legal .page-banner-inner {
   grid-template-columns: 1fr;
}

.page-banner--legal .page-banner-copy {
   max-width: 820px;
}

/* ===================== Last updated ===================== */
.legal-updated {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 18px;
   padding: 8px 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--off-white);
   color: var(--muted);
   font-size: 0.86rem;
   font-weight: 500;
}

.legal-updated::before {
   content: "";
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--teal-deep);
}

/* ===================== Lists ===================== */
.article-body ul {
   margin-top: 16px;
   padding-left: 0;
   list-style: none;
   display: grid;
   gap: 10px;
}

.article-body ul li {
   position: relative;
   padding-left: 26px;
   color: var(--text);
   font-size: clamp(0.97rem, 1.1vw, 1.03rem);
   line-height: 1.75;
}

.article-body ul li::before {
   content: "";
   position: absolute;
   left: 4px;
   top: 0.72em;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--teal);
}

.article-body strong {
   color: var(--ink);
   font-weight: 600;
}

/* ===================== Contact block ===================== */
.legal-contact {
   margin-top: 22px;
   padding: clamp(20px, 2.6vw, 28px);
   border: 1px solid var(--line);
   border-radius: 18px;
   background: var(--off-white);
   box-shadow: var(--shadow-card);
   font-style: normal;
   color: var(--text);
   font-size: clamp(0.97rem, 1.1vw, 1.03rem);
   line-height: 1.85;
}

.legal-contact strong {
   display: block;
   color: var(--ink);
   font-weight: 700;
}

.legal-contact a {
   color: var(--teal-deep);
   font-weight: 500;
   transition: color .18s ease;
}

.legal-contact a:hover {
   color: var(--navy);
}

.legal-contact-rows {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--line);
}