/* SB1-sb-portal-1012 -> SB3-sb-portal-1018: the ads-portal brand layer on tools.monastic.media.
   Loaded by /legal/ads-portal-{terms,privacy,refunds,lead-privacy} and by /ads-for-small-business (with sb3.css after it).
   Monastic Media brand book: teal #105B63, cream #FFFAD5, yellow #FFD34E (a field, never type), rust #BD4932, gold only for
   warnings; Clash Display (headings) + Gully (body), woff2 copied from the dashboard tree public/fonts. Builds on site.css
   tokens. No inline styles anywhere (CSP; build.py refuses them). The SB1 landing rules moved to sb3.css (re-skin). */

@font-face { font-family: "Clash Display"; src: url("/assets/fonts/ClashDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/ClashDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gully"; src: url("/assets/fonts/Gully-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gully"; src: url("/assets/fonts/Gully-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gully"; src: url("/assets/fonts/Gully-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root { --sb-display: "Clash Display", "MM Grotesk", system-ui, sans-serif; --sb-body: "Gully", "MM Grotesk", system-ui, sans-serif; }

/* ---------- ads-portal policies ---------- */
.sb-legal { font-family: var(--sb-body); }
.sb-legal .legal-nav a[aria-current="page"] { color: var(--teal); font-weight: 700; }
.sb-legal .legal-nav .sb-nav-sub { margin-top: var(--s3); }

.sb-lhead { position: relative; overflow: hidden; margin: 0 0 var(--s4); padding: var(--s4) var(--s3) var(--s3); border-radius: 18px;
  background: var(--teal); color: var(--cream); }
@media (min-width: 900px) { .sb-lhead { padding: var(--s5) var(--s5) var(--s4); } }
.sb-lhead::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: var(--yellow); opacity: .14; pointer-events: none; }
.sb-lhead-mark { display: block; width: 48px; height: auto; margin: 0 0 var(--s2); }
.sb-lhead-k { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.sb-lhead-h { margin: 0; font-family: var(--sb-display); font-weight: 600; font-size: clamp(30px, 22px + 2.2vw, 48px); line-height: 1.05;
  letter-spacing: -0.01em; color: #fff; }
.sb-lhead-d { margin: 10px 0 0; font-size: 15px; color: var(--cream); opacity: .85; }
.sb-lpoints { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
@media (min-width: 640px) { .sb-lpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-lpoints li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 250, 213, .1); border: 1px solid rgba(255, 250, 213, .22); font-size: 15px; line-height: 1.35; font-weight: 500; color: #fff; }
.sb-lpoints .sb3-ic { flex: 0 0 auto; width: 22px; height: 22px; color: var(--yellow); }

.sb-legal .legal h2 { font-family: var(--sb-display); font-weight: 600; letter-spacing: 0; color: var(--teal-d); }
.sb-legal .legal p, .sb-legal .legal li, .sb-legal .legal td { font-family: var(--sb-body); }
.sb-legal .legal table { border-radius: 12px; overflow: hidden; }
.sb-legal .legal th { background: var(--cream); color: var(--ink); }
.sb-legal .legal a { color: var(--teal); }
.sb-lfoot { margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--line); }