.resource-flip {
  height:440px;
  min-width:0;
  perspective:1600px;
}
.resource-flip-inner {
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 620ms cubic-bezier(.22,1,.36,1);
}
.resource-flip.is-flipped .resource-flip-inner { transform:rotateY(180deg); }
.resource-flip .resource-front,
.resource-flip .resource-back {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:4px;
}
.resource-flip .resource-front {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:#edf0e8;
  transform:rotateY(0deg);
}
.resource-front .resource-graphic { height:210px; flex-shrink:0; }
.resource-front .resource-bottom { margin-top:auto; }
.resource-flip .resource-back {
  display:flex;
  flex-direction:column;
  padding:20px 22px 23px;
  background:#f7faf3;
  border:1px solid #c2ceb6;
  transform:rotateY(180deg);
}
.resource-flip[data-resource-card=approvals] .resource-back { background:#f3f6fa; border-color:#bfccdc; }
.resource-flip[data-resource-card=knowledge] .resource-back { background:#f5f7f2; border-color:#c7cec0; }
.resource-back-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-shrink:0;
  padding-bottom:13px;
  margin-bottom:18px;
  border-bottom:1px solid #d5dece;
}
.resource-back-top .resource-type { margin:0; font-size:11px; }
.resource-back-top .icon-button { width:34px; height:34px; flex-basis:34px; color:#536d42; }
.resource-back-top .icon-button svg { width:17px; height:17px; }
.resource-reading {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#99ac88 transparent;
  padding-right:12px;
  padding-bottom:3px;
  outline-offset:-2px!important;
}
.resource-reading h3 { font-size:22px; line-height:1.3; margin:0 0 14px; }
.resource-reading p { font-size:13px; line-height:1.75; color:#5d6e52; }
.resource-reading .resource-intro { margin-bottom:24px; }
.resource-reading section + section { margin-top:23px; }
.resource-reading h4 { font:500 15px/1.4 Manrope,sans-serif; margin:0 0 8px; }
.resource-reading .resource-boundary { font-size:11px; border-top:1px solid #d1dbca; padding-top:17px; margin-top:25px; }
.resource-flip.is-flipped .resource-front { pointer-events:none; }
.resource-flip:not(.is-flipped) .resource-back { pointer-events:none; }
@media(max-width:1100px) {
  .resource-front .resource-graphic { height:190px; }
  .resource-flip .resource-back { padding-inline:18px; }
  .resource-reading h3 { font-size:20px; }
}
@media(min-width:561px) and (max-width:900px) {
  [data-resource-flips] .resource-grid { grid-template-columns:1fr; gap:28px; }
  .resource-flip { height:350px; }
  .resource-flip .resource-front {
    display:grid;
    grid-template-columns:minmax(180px,.85fr) minmax(0,1fr);
    grid-template-rows:1fr auto auto 1fr;
    gap:0 32px;
  }
  .resource-front .resource-graphic { grid-column:1; grid-row:1/5; height:100%; margin:0; }
  .resource-front .resource-type { grid-column:2; grid-row:2; margin-bottom:15px; }
  .resource-front > strong { grid-column:2; grid-row:3; margin-bottom:28px; max-width:none; font-size:26px; }
  .resource-front .resource-bottom { grid-column:2; grid-row:4; align-self:start; margin:0; }
  .resource-flip .resource-back { padding-inline:25px; }
  .resource-reading h3 { font-size:23px; }
  .resource-reading p { font-size:14px; }
}
@media(max-width:560px) {
  .resource-flip { height:420px; }
  .resource-flip .resource-front { display:flex; gap:0; }
  .resource-front .resource-graphic { height:190px; margin:0 0 22px; }
  .resource-front .resource-type { margin:0 0 13px; align-self:auto; }
  .resource-front > strong { font-size:23px; line-height:1.4; margin:0 0 24px; align-self:auto; max-width:100%; }
  .resource-front .resource-bottom { font-size:11px; margin-top:auto; padding-top:16px; }
  .resource-front .graphic-first { padding:40px 55px; }
  .resource-front .graphic-first > svg { display:block; right:27px; top:73px; width:35px; height:35px; }
  .resource-front .graphic-approval { flex-direction:row; gap:15px; }
  .resource-front .graphic-approval > svg { width:37px; height:37px; }
  .resource-front .graphic-approval > span { font-size:12px; }
  .resource-front .graphic-knowledge { padding:24px 35px; }
  .resource-front .graphic-knowledge > span { font-size:12px; }
  .resource-front .graphic-knowledge svg { width:15px; height:15px; }
  .resource-flip .resource-back { padding:16px 19px 20px; }
  .resource-reading h3 { font-size:22px; }
}
@media(max-width:380px) {
  .resource-front > strong { font-size:21px; }
  .resource-reading h3 { font-size:20px; }
  .resource-reading p { font-size:13px; }
}
/* Both faces size the same grid cell, so longer text never needs an inner scroll. */
.resource-summary { height:auto; min-height:440px; }
.resource-summary .resource-flip-inner { display:grid; min-height:inherit; }
.resource-summary .resource-front,
.resource-summary .resource-back { position:relative; inset:auto; grid-area:1 / 1; height:auto; min-width:0; }
.resource-summary.is-flipped .resource-front .resource-bottom svg { transform:none; }
.resource-summary .resource-back { padding:18px 22px 20px; }
.resource-summary .resource-back-top { padding-bottom:10px; margin-bottom:16px; }
.resource-summary .resource-back-top .icon-button { width:40px; height:40px; flex-basis:40px; }
.resource-summary .resource-reading { overflow:visible; padding:0; }
.resource-summary .resource-reading h3 { margin-bottom:12px; }
.resource-summary .resource-intro { margin:0 0 18px; font-size:14px; line-height:1.6; }
.resource-takeaways { display:grid; gap:12px; margin:0; padding:0 0 22px; list-style:none; }
.resource-takeaways li { position:relative; padding-left:16px; color:#47573f; font-size:14px; line-height:1.55; }
.resource-takeaways li::before { content:""; position:absolute; top:.6em; left:0; width:4px; height:4px; background:#748965; }
.resource-guide-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-top:auto; padding-top:12px; border-top:1px solid #cbd6c2; color:#344d29; font-size:13px; font-weight:500; }
.resource-guide-link svg { width:16px; height:16px; flex-shrink:0; transition:transform 260ms ease; }
.resource-guide-link:hover svg { transform:translate(2px,-2px); }
.resource-summary[data-resource-card=approvals] .resource-guide-link { color:#345774; border-color:#cbd6e2; }
.resource-summary[data-resource-card=approvals] .resource-takeaways li::before { background:#63839f; }
@media(min-width:901px) and (max-width:1100px) {
  .resource-summary .resource-back { padding-inline:18px; }
  .resource-summary .resource-intro,
  .resource-summary .resource-takeaways li { font-size:13px; }
}
@media(min-width:561px) and (max-width:900px) {
  .resource-summary { min-height:350px; }
  .resource-summary .resource-back { padding-inline:25px; }
}
@media(max-width:560px) {
  .resource-summary { min-height:420px; }
  .resource-summary .resource-back { padding:16px 19px 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .resource-flip .resource-flip-inner,
  .resource-flip.is-flipped .resource-flip-inner { transition:none; transform:none; }
  .resource-flip .resource-back { transform:none; visibility:hidden; }
  .resource-flip.is-flipped .resource-front { visibility:hidden; }
  .resource-flip.is-flipped .resource-back { visibility:visible; }
  .resource-guide-link svg { transition:none; }
}