/* The EU Data Act — page-only additions on top of pages.css */

/* Four pillars instead of three personas */
.eu-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eu-pillars .persona h3 { font-size: 18.5px; line-height: 1.3; }
.eu-pillars .persona p { font-size: 15px; }

/* Requirement → answer pairs inside each feature row */
.act-items { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.act-item { padding-left: 20px; border-left: 1px solid rgba(19,233,137,.4); }
.act-item h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.feature .act-item p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }
.feature .act-item p.req { color: var(--fg); }
.feature .act-items + .link { margin-top: 28px; }

/* Customer quotes grid */
.cq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cq { display: flex; flex-direction: column; margin: 0; padding: 32px; }
.cq-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; margin: -6px 0 22px -2px; filter: var(--silhouette); opacity: .9; }
.cq blockquote { flex: 1; font-size: 16.5px; line-height: 1.55; letter-spacing: -0.01em; font-weight: 500; }
.cq figcaption { margin-top: 20px; font-size: 14px; color: var(--fg-2); }
.cq figcaption b { display: block; color: var(--fg); font-weight: 500; }
.cq-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.cq-stats div { min-width: 0; }
.cq-stats b { display: block; font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--accent); }
.cq-stats span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.cq .link { margin-top: 22px; font-size: 14.5px; }

/* Related articles */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post img { display: block; width: 100%; height: auto; aspect-ratio: 768 / 402; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
.post-meta span:first-child { color: var(--accent); }
.post h3 { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.post p { flex: 1; margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.post .link { margin-top: 20px; font-size: 14px; }

/* Final CTA: values as the big line, labels above */
.final .fine { text-align: center; }
.final .facts b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }

@media (max-width: 1120px) {
  .eu-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq { padding: 28px; }
}
@media (max-width: 960px) {
  .posts { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .cq-grid { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .eu-pillars { grid-template-columns: minmax(0, 1fr); }
  .cq { padding: 26px; }
  .post-body { padding: 22px; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .post-meta span:first-child { color: var(--mint); }