/* ===========================================================================
   Sellva — Resources (articles + glossary) page content styles.
   Navbar styles live in /assets/nav.css (shared with the homepage nav).
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #101828;
  --navy-deep: #111827;
  --link: #3F7D4E;  /* the pink is reserved for the logo mark */
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
}
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* --- Article / content --- */
.page { max-width: 760px; margin: 0 auto; padding: 56px 1.5rem 80px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--link); text-decoration: none; }
.page h1 { font-family: Poppins, Inter, sans-serif; font-size: 40px; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px; }
.page h2 { font-family: Poppins, Inter, sans-serif; font-size: 26px; line-height: 1.25; margin: 40px 0 14px; }
.page h3 { font-size: 20px; margin: 28px 0 10px; }
.page p { margin: 0 0 18px; color: #1e293b; }
.page ul, .page ol { margin: 0 0 18px 1.25rem; }
.page li { margin-bottom: 8px; }
.page img { border-radius: 12px; margin: 24px 0; border: 1px solid var(--line); }
.page a { color: var(--link); }
.lede { font-size: 20px; color: var(--muted); }

/* --- Listing (article/glossary index) --- */
/* Same green sweep and Fern glow as the Swiss retail news bar (.anno in assets/nav.css). */
/* The light green silk of the Plans page (Guilherme, 24 Oct 2026: the dark
   forest gradient is retired), so the text is the deep green, not white. */
.list-hero { position: relative; overflow: hidden; background: #CFDED8 url('/assets/silk/silk-light-1920x1080.jpg') center / cover no-repeat; background-image: image-set(url('/assets/silk/silk-light-1920x1080.webp') type('image/webp'), url('/assets/silk/silk-light-1920x1080.jpg') type('image/jpeg')); color: #0E2A22; padding: 64px 1.5rem 56px; text-align: center; }
.list-hero > * { position: relative; }
.list-hero h1 { font-family: Poppins, Inter, sans-serif; font-size: 42px; margin-bottom: 12px; }
.list-hero p { color: #2E4A42; max-width: 560px; margin: 0 auto; }
.card-grid { max-width: 1000px; margin: 48px auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: #cbd5e1; }
.card h3 { font-size: 18px; margin-bottom: 8px; color: var(--navy); }
.card p { font-size: 14px; color: var(--muted); }

/* --- Meta --- */
.card-meta { font-size: 12px; color: #94a3b8; margin-top: 12px; }
.page .card-meta { margin: 0 0 26px; }

/* Footer: the shared full footer, styled by /assets/footer.css like every
   other page. The compact footer these pages used to carry is gone. */

/* ===========================================================================
   Mobile (content only — nav mobile rules are in nav.css)
   =========================================================================== */
@media (max-width: 767px) {
  .page { padding: 36px 1.25rem 56px; }
  .page h1, .list-hero h1 { font-size: 30px; }
  .page h2 { font-size: 22px; }
  .lede { font-size: 17px; }
}