/* ============================================================
   PostLayr — shared styles for legal/static pages
   (privacy.html, terms.html, data-deletion.html)
   Fonts self-hosted (SIL Open Font License 1.1).
   ============================================================ */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-700.woff2') format('woff2'); }

.pl-wordmark { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; white-space: nowrap; display: inline-block; background: linear-gradient(90deg,#5AA9E6 0%,#9B6FD9 26%,#E0529C 52%,#F2994A 76%,#52D9B8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pl-icon { object-fit: contain; flex-shrink: 0; display: block; }

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f7f9f5; --g: #3E5F44; --gd: #2c4430; --gp: #edf2ee;
  --ink: #1a2e1c; --soft: #43543f; --softer: #5f7363;
  --border: rgba(62,95,68,.13);
}
html, body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* Nav */
nav { padding: 0 5vw; height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 100; }
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo .pl-icon { width: 40px; height: 40px; }
.nav-logo .pl-wordmark { font-size: 24px; }
.back { font-size: 13px; color: var(--soft); text-decoration: none; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 8px; transition: border-color .15s, color .15s; }
.back:hover { border-color: var(--g); color: var(--g); }

/* Page */
.page { max-width: 740px; margin: 0 auto; padding: 52px 5vw 80px; }
.page-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.page-label::before { content: ''; width: 20px; height: 2px; background: var(--g); }
h1 { font-family: 'Instrument Serif', serif; font-size: clamp(28px,4vw,44px); font-weight: 400; letter-spacing: -.02em; margin-bottom: 10px; color: var(--ink); }
.meta, .meta-date { font-size: 13px; color: var(--softer); margin-bottom: 44px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
h2 { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin-top: 42px; margin-bottom: 12px; color: var(--ink); }
h3 { font-size: 16px; font-weight: 600; margin-top: 22px; margin-bottom: 8px; color: var(--ink); }
p { font-size: 15px; color: var(--soft); margin-bottom: 13px; line-height: 1.75; }
ul, ol { padding-left: 22px; margin-bottom: 13px; }
li { font-size: 15px; color: var(--soft); line-height: 1.75; margin-bottom: 5px; }
a { color: var(--g); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); }

/* Highlight / note boxes */
.hl { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin: 22px 0; }
.hl p { margin-bottom: 0; font-size: 14px; }
.note { background: var(--gp); border: 1px solid rgba(62,95,68,.15); border-radius: 10px; padding: 14px 18px; font-size: 13.5px; color: var(--soft); line-height: 1.6; margin-top: 20px; }
.note strong { color: var(--ink); }

/* Numbered steps (data-deletion) */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--g); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.step-title { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.step-desc { font-size: 13.5px; color: var(--soft); line-height: 1.6; }

a:focus-visible, .back:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; border-radius: 6px; }

/* Footer — consistent across the site */
footer.site-footer { background: var(--gd); padding: 28px 5vw; text-align: center; }
.footer-copy { font-size: 12.5px; color: rgba(255,255,255,.72); margin-bottom: 3px; }
.footer-powered { font-size: 12px; color: rgba(255,255,255,.6); }
.footer-powered a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; }
.footer-powered a:hover { text-decoration: underline; }