/* ============================================================
   Content pages — policies, feedback, blog
   ============================================================ */
.content { max-width: 820px; }
.content h2 { font-size: var(--step-1); margin: 2rem 0 .6rem; }
.content h2:first-child { margin-top: 0; }
.content p { color: var(--ink-soft); margin-bottom: .9rem; }
.content ul, .content ol { color: var(--ink-soft); padding-left: 1.2rem; margin-bottom: 1rem; display: grid; gap: .4rem; }
.content strong { color: var(--ink); }
.content .updated { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: 1.6rem; }
.content .lead { font-size: var(--step-1); color: var(--ink); margin-bottom: 1.6rem; }

/* feedback form */
.fb-form { max-width: 640px; display: grid; gap: 1rem; margin-top: 1.4rem; }
.fb-form .field { margin-bottom: 0; }
.fb-form textarea { width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: 500 var(--step-0)/1.5 var(--font-body); padding: .9rem 1rem; outline: none; resize: vertical; min-height: 120px; }
.fb-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.stars { display: flex; gap: .3rem; }
.stars button { background: none; border: 0; cursor: pointer; color: var(--border-strong); padding: .1rem; }
.stars button svg { width: 30px; height: 30px; }
.stars button.on { color: var(--accent); }

/* blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.post-card { padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.post-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card .thumb { aspect-ratio: 16/9; background: linear-gradient(130deg, var(--green-600), var(--teal-500)); display: grid; place-items: center; color: #fff; }
.post-card .thumb svg { width: 46px; height: 46px; opacity: .9; }
.post-card .pc-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.post-card .tag { font: 700 var(--step--2)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.post-card h3 { font-size: var(--step-1); }
.post-card p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
.post-card .date { font-size: var(--step--1); color: var(--ink-faint); margin-top: auto; }