/* Resource-page additions stay scoped to this reading surface. */
.resources-page .hero.is-center h1{max-width:15ch;margin-inline:auto;text-wrap:balance}
.resources-page .hero.is-center .lede{max-width:56ch;margin-inline:auto;text-wrap:balance}
.res-guide-links{display:flex;justify-content:center;gap:10px 20px;flex-wrap:wrap;margin-top:24px}
.res-guide-links a{min-height:36px;display:inline-flex;align-items:center;color:var(--blue-ink);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.res-guide-links a:hover{text-decoration-color:currentColor}
.res-guide-links a:focus-visible,.res-contents a:focus-visible{outline:2px solid var(--focus-ring,#00437c);outline-offset:4px;border-radius:4px}
.resources-page .res-hero .res-article{max-width:880px}
.resources-page .res-hero h1{max-width:23ch;text-wrap:balance}
.resources-page .res-hero .lede{max-width:60ch}
.res-workspace{min-width:0;margin:30px 0 0}
.res-workspace-shot{width:100%;aspect-ratio:8/5;border:1px solid var(--atm-card-line,var(--line));border-radius:16px;background-color:var(--paper);background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:var(--atm-card-shadow,0 12px 36px rgba(15,23,42,.08))}
.res-workspace-shot.workspace-office{background-image:url('../assets/home/workspace-office.webp')}
.res-workspace-shot.workspace-planning{background-image:url('../assets/home/workspace-planning.webp')}
html[data-site-theme="dark"] .res-workspace-shot.workspace-office{background-image:url('../assets/home/workspace-office-dark.webp')}
html[data-site-theme="dark"] .res-workspace-shot.workspace-planning{background-image:url('../assets/home/workspace-planning-dark.webp')}
.res-workspace figcaption{margin:10px 4px 0;color:var(--quiet,var(--muted));font-size:12px;line-height:1.5;font-weight:500}
.res-workspace.is-compact{margin:0}
.res-workspace.is-compact .res-workspace-shot{border-radius:12px}
.resources-page .res-feature{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:36px;padding:34px}
.resources-page .res-feature:hover .res-workspace-shot{border-color:var(--line-strong)}
.res-more-head{margin-top:38px;display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.res-more-head .eyebrow{margin:0}
.res-more-head p{margin:0;color:var(--muted);font-size:14px}
.resources-page .res-more{margin-top:18px}
.res-reading-layout{display:grid;grid-template-columns:230px minmax(0,720px);gap:56px;justify-content:center;align-items:start}
.res-contents{position:sticky;top:100px;display:grid;gap:4px;padding:18px;border:1px solid var(--atm-card-line,var(--line));border-radius:14px;background:var(--atm-card,var(--paper))}
.res-contents p{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet,var(--muted))}
.res-contents a{display:flex;align-items:center;min-height:44px;padding:7px 0;font-size:14px;font-weight:650;line-height:1.45;color:var(--muted)}
.res-contents a:hover{color:var(--blue-ink)}
.resources-page .res-reading .res-body{width:100%;min-width:0;margin:0}
.resources-page .res-body h2{scroll-margin-top:100px}
@media(max-width:980px){
  .res-reading-layout{grid-template-columns:minmax(0,720px);gap:30px}
  .res-contents{position:static}
  .res-contents a{min-height:44px}
  .resources-page .res-feature{grid-template-columns:1fr;gap:24px;padding:26px}
  .resources-page .res-feature .res-workspace{max-width:680px;width:100%}
}
@media(max-width:560px){
  .resources-page .res-feature{padding:20px}
  .res-workspace-shot{border-radius:12px}
  .res-workspace figcaption{font-size:12px}
  .res-more-head{gap:10px}
  .res-guide-links{gap:4px 16px}
  .res-contents{padding:16px}
}

/* Give long guides a quiet paper surface instead of reading over the grid. */
.resources-page .res-reading .res-body {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--atm-card-line, var(--line));
  border-radius: 20px;
  background: var(--atm-card, var(--surface, #fff));
  box-shadow: var(--atm-card-shadow);
}
.resources-page .res-contents {
  max-height: calc(100vh - 128px);
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong, rgba(0, 120, 212, .45)) transparent;
}
.resources-page .res-contents a {
  padding-inline: 10px;
  margin-inline: -10px;
  border-radius: 8px;
  transition: background-color .18s ease, color .18s ease;
}
.resources-page .res-contents a:is(:hover, :focus-visible) {
  color: var(--blue-ink, #005a9e);
  background: color-mix(in srgb, var(--blue, #0067c0) 8%, var(--surface, #fff));
}
.resources-page .res-guide-links a { min-height: 44px; }
.resources-page .res-feature:focus-visible { border-color: var(--blue-ink, #005a9e); }
.resources-page .res-workspace-shot {
  border-color: color-mix(in srgb, var(--blue-ink, #005a9e) 24%, var(--surface, #fff));
}
html[data-site-theme="dark"] .resources-page .res-workspace-shot {
  border-color: rgba(124, 192, 255, .34);
  box-shadow: 0 1px 0 rgba(230, 237, 245, .08) inset, 0 20px 48px -22px rgba(0, 0, 0, .72);
}
.resources-page .res-reading .res-body a:focus-visible {
  outline: 2px solid var(--focus-ring, #00437c);
  outline-offset: 3px;
  border-radius: 3px;
}
@media(max-width:980px) {
  .resources-page .res-contents { max-height: none; overflow: visible; }
}
@media(prefers-reduced-motion:reduce) {
  .resources-page .res-contents a { transition: none; }
}