/* The Resources section (7 October 2026): the blog, the guides, the news, About and FAQ. Loaded on those pages only,
   on the site's design: the tokens are css/violet.css's, each with a fallback so the purple design (SITE_DESIGN=purple)
   still reads. Cards and panels are neutral and rounded, headings in the heading face, no rules between sections. */

.rs-frame { padding-bottom: 96px; }
.rs-hero .kicker a { color: inherit; text-decoration: none; }
.rs-hero .kicker a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rs-hero--article .trust__title { max-width: 17em; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; }
.rs-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 22px auto 0; font-size: 14px; color: rgba(255, 255, 255, .72); }

/* ---------- Lists: a heading, topic pills, cards, the pager */
.rs-section { padding: 40px 32px 24px; scroll-margin-top: 88px; }
.rs-section + .rs-section { padding-top: 64px; }
.rs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.rs-head h2, .rs-split h2, .rs-cta h2 { margin: 0; font: 700 clamp(28px, 3vw, 40px)/1.06 var(--vi-display, var(--serif)); letter-spacing: -.02em; color: var(--vi-ink, var(--ink)); text-wrap: balance; }
.rs-path { display: inline-flex; align-items: center; gap: 12px; max-width: 34em; padding: 12px 18px; border-radius: 18px; background: var(--vi-neutral, #f5f5f7); color: var(--vi-ink, var(--ink)); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: background .2s; }
.rs-path:hover { background: #ececf1; }
.rs-path strong { flex: none; font-weight: 600; }
.rs-path span { color: var(--vi-muted, var(--muted)); }
.rs-path .icon { flex: none; }
.rs-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.rs-topics a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--fr-soft, #f4f4f7); color: var(--vi-ink, var(--ink)); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s; }
.rs-topics a span { font-size: 12px; color: var(--vi-muted, var(--muted)); }
.rs-topics a:hover { background: var(--fr-soft-2, #e9e8ef); }
.rs-topics a[aria-current="page"] { background: var(--vi-ink, var(--ink)); color: #fff; }
.rs-topics a[aria-current="page"] span { color: rgba(255, 255, 255, .7); }
.rs-more { display: contents; }
.rs-more summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 17, 31, .14); color: var(--vi-ink, var(--ink)); font-size: 14px; font-weight: 500; list-style: none; cursor: pointer; }
.rs-more summary::-webkit-details-marker { display: none; }
.rs-more summary:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 31, .3); }
.rs-more summary .icon { transition: transform .2s; }
.rs-more[open] summary .icon { transform: rotate(180deg); }
.rs-more > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rs-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 24px; background: var(--vi-neutral, #f5f5f7); transition: background .2s; }
.rs-card:hover { background: #ececf1; }
.rs-card--plain:hover { background: var(--vi-neutral, #f5f5f7); }
.rs-card__kicker { margin: 0; font: 500 11.5px/1.4 var(--vi-mono, var(--fr-mono, monospace)); letter-spacing: .06em; text-transform: uppercase; color: var(--vi-muted, var(--muted)); }
.rs-card h3 { margin: 0; font: 700 19px/1.25 var(--vi-display, var(--serif)); letter-spacing: -.01em; color: var(--vi-ink, var(--ink)); text-wrap: balance; }
.rs-card h3 a { color: inherit; text-decoration: none; }
.rs-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rs-card h3 a:focus-visible { outline: none; }
.rs-card:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--focus, #17171f); }
.rs-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--vi-muted, var(--muted)); text-wrap: pretty; }
.rs-cards:not(.rs-cards--three) .rs-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-card__meta { margin: auto 0 0; padding-top: 6px; font-size: 13px; color: var(--vi-muted, var(--muted)); }
.rs-empty { margin: 0; padding: 32px; border-radius: 24px; background: var(--vi-neutral, #f5f5f7); color: var(--vi-muted, var(--muted)); text-align: center; }
.rs-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 32px; font-size: 14.5px; color: var(--vi-muted, var(--muted)); }
.rs-pager a { justify-self: start; padding: 10px 20px; border-radius: 999px; background: var(--vi-ink, var(--ink)); color: #fff; font-weight: 500; text-decoration: none; }
.rs-pager a[rel="next"] { justify-self: end; }
.rs-pager a:hover { background: var(--vi-deep, #2e2e3b); }
.rs-back { display: inline-flex; align-items: center; gap: 8px; color: var(--vi-ink, var(--ink)); font-size: 15px; font-weight: 500; text-decoration: none; }
.rs-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- An article: a table of contents beside a readable column */
.rs-article { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: 56px; padding: 40px 32px 0; }
.rs-toc { position: sticky; top: 96px; align-self: start; }
.rs-toc__title { margin: 0; font: 500 11.5px/1.4 var(--vi-mono, var(--fr-mono, monospace)); letter-spacing: .06em; text-transform: uppercase; color: var(--vi-muted, var(--muted)); }
.rs-toc ol { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--fr-soft-2, #e9e8ef); }
.rs-toc a { display: block; margin-left: -2px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: var(--vi-muted, var(--muted)); font-size: 14px; line-height: 1.4; text-decoration: none; }
.rs-toc a:hover { border-left-color: var(--vi-ink, var(--ink)); color: var(--vi-ink, var(--ink)); }
.rs-prose { min-width: 0; font-size: 17px; line-height: 1.7; color: #34323f; }
.rs-prose > :first-child { margin-top: 0; }
.rs-prose h2 { margin: 48px 0 14px; font: 700 28px/1.15 var(--vi-display, var(--serif)); letter-spacing: -.02em; color: var(--vi-ink, var(--ink)); text-wrap: balance; scroll-margin-top: 96px; }
.rs-prose h3 { margin: 32px 0 10px; font: 700 21px/1.25 var(--vi-display, var(--serif)); letter-spacing: -.01em; color: var(--vi-ink, var(--ink)); scroll-margin-top: 96px; }
.rs-prose h4 { margin: 24px 0 8px; font-size: 17px; font-weight: 650; color: var(--vi-ink, var(--ink)); }
.rs-prose p { margin: 0 0 18px; text-wrap: pretty; }
.rs-prose ul, .rs-prose ol { margin: 0 0 20px; padding-left: 22px; }
.rs-prose li { margin: 6px 0; padding-left: 4px; }
.rs-prose li::marker { color: var(--vi-muted, var(--muted)); }
.rs-prose a { color: var(--vi-ink, var(--ink)); text-decoration: underline; text-decoration-color: var(--vi-violet, #5b3df5); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rs-prose a:hover { color: var(--vi-violet, #5b3df5); }
.rs-prose strong { font-weight: 650; color: var(--vi-ink, var(--ink)); }
.rs-prose code { padding: 1px 6px; border-radius: 6px; background: var(--fr-soft, #f4f4f7); font-size: .9em; }
.rs-prose blockquote { margin: 0 0 20px; padding: 18px 22px; border-radius: 18px; background: var(--vi-neutral, #f5f5f7); color: var(--vi-ink, var(--ink)); }
.rs-prose blockquote p:last-child { margin-bottom: 0; }
.rs-cover { margin: 0 0 36px; }
.rs-cover img, .md-figure img { display: block; width: 100%; height: auto; border-radius: 22px; }
.rs-cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.md-figure { margin: 8px 0 24px; }
.md-table { margin: 4px 0 24px; overflow-x: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(17, 17, 31, .08); }
.md-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.md-table th, .md-table td { padding: 12px 16px; border-bottom: 1px solid rgba(17, 17, 31, .07); text-align: left; vertical-align: top; }
.md-table thead th { background: var(--fr-soft, #f4f4f7); color: var(--vi-ink, var(--ink)); font-weight: 600; }
.md-table tbody th { color: var(--vi-ink, var(--ink)); font-weight: 600; }
.md-table tr:last-child > * { border-bottom: 0; }
.rs-faqs { margin-top: 48px; }
.rs-faqs dl, dl.rs-faqs { display: grid; gap: 12px; margin: 0; }
.rs-faqs dl div, dl.rs-faqs div { padding: 20px 22px 22px; border-radius: 20px; background: var(--fr-soft, #f4f4f7); }
.rs-faqs dt { font: 700 17px/1.3 var(--vi-display, var(--serif)); letter-spacing: -.01em; color: var(--vi-ink, var(--ink)); }
.rs-faqs dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--vi-muted, var(--muted)); }
.rs-cta { margin: 72px 32px 0; padding: 64px 32px 68px; border-radius: 32px; background: var(--vi-neutral, #f5f5f7); text-align: center; }
.rs-cta h2 { max-width: 16em; margin: 0 auto; }
.rs-cta p { max-width: 34em; margin: 16px auto 28px; font-size: 17px; line-height: 1.55; color: var(--vi-muted, var(--muted)); }
.rs-related { padding-top: 72px; }

/* ---------- A guide: the worksheet beside what to look for and the call to action */
.rs-guide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; max-width: 1140px; margin: 0 auto; padding: 40px 32px 0; }
.rs-answer { margin-bottom: 8px; padding: 24px 26px 26px; border-radius: 24px; background: var(--vi-neutral, #f5f5f7); }
.rs-prose .rs-answer h2 { margin: 0 0 10px; font: 500 11.5px/1.4 var(--vi-mono, var(--fr-mono, monospace)); letter-spacing: .06em; text-transform: uppercase; color: var(--vi-muted, var(--muted)); }
.rs-answer p { margin: 0; color: var(--vi-ink, var(--ink)); font-size: 18px; line-height: 1.6; }
.rs-ticks { display: grid; gap: 10px; margin: 6px 0 18px; padding: 0; list-style: none; }
.rs-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; }
.rs-ticks .icon { width: 20px; height: 20px; margin-top: 4px; padding: 3px; border-radius: 50%; background: var(--vi-lime, #d9f59a); color: var(--vi-ink, var(--ink)); }
.rs-sources { padding-left: 20px; font-size: 15.5px; }
.rs-aside { position: sticky; top: 96px; display: grid; align-self: start; align-content: start; gap: 14px; min-width: 0; }
.rs-aside__card { padding: 22px 22px 24px; border-radius: 24px; background: var(--vi-neutral, #f5f5f7); }
.rs-aside__card h2 { margin: 0 0 12px; font: 700 18px/1.25 var(--vi-display, var(--serif)); letter-spacing: -.01em; color: var(--vi-ink, var(--ink)); }
.rs-aside__card p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--vi-muted, var(--muted)); }
.rs-aside__card .rs-ticks { margin: 0; font-size: 15px; line-height: 1.45; }
.rs-aside__card .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
.rs-links { display: grid; margin: 0; padding: 0; list-style: none; }
.rs-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--vi-ink, var(--ink)); font-size: 15px; line-height: 1.4; text-decoration: none; }
.rs-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-links .icon { flex: none; }
.rs-aside .rs-back { margin: 6px 0 0 4px; }

/* ---------- About and FAQ: a heading beside its text, row by row */
.rs-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 64px; padding: 48px 32px; scroll-margin-top: 88px; }
.rs-split h2 { font-size: clamp(26px, 2.6vw, 34px); }
.rs-split p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--vi-muted, var(--muted)); text-wrap: pretty; }
.rs-split p:last-child { margin-bottom: 0; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- Narrower screens */
@media (max-width: 960px) {
  .rs-article { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rs-toc { position: static; padding: 18px 20px; border-radius: 20px; background: var(--vi-neutral, #f5f5f7); }
  .rs-toc ol { border-left: 0; }
  .rs-toc a { margin-left: 0; padding-left: 0; border-left: 0; }
  .rs-guide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rs-aside { position: static; }
  .rs-cards, .rs-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rs-section { padding: 28px 16px 16px; }
  .rs-section + .rs-section { padding-top: 44px; }
  .rs-cards, .rs-cards--three { grid-template-columns: minmax(0, 1fr); }
  .rs-path { width: 100%; }
  .rs-article, .rs-guide { padding: 28px 16px 0; }
  .rs-prose { font-size: 16.5px; }
  .rs-prose h2 { font-size: 24px; }
  .rs-cta { margin: 48px 12px 0; padding: 44px 20px 48px; border-radius: 26px; }
  .rs-split { grid-template-columns: minmax(0, 1fr); padding: 32px 16px; }
  .rs-pager { grid-template-columns: 1fr 1fr; }
  .rs-pager > span:nth-child(2) { display: none; }
}