/* Section 3 cards reveal detail immediately, with a quicker entry than exit. */
html.sample-scroll-scene #headings .sample-card,#headings .sample-card{
  isolation:auto;
  background:linear-gradient(145deg,#dceeeab3,#dceeea8c);
  -webkit-backdrop-filter:blur(24px) saturate(110%);
  backdrop-filter:blur(24px) saturate(110%);
  box-shadow:0 20px 60px #102a3512,inset 0 1px 0 #ffffffe0,inset 0 0 32px #ffffff4d;
  transition:box-shadow .65s ease,border-color .65s ease;
}
#headings .sample-card::before{
  background:radial-gradient(ellipse 96% 86% at 52% 42%,#e8ad5244 0%,#e8ad522b 42%,#e8ad5211 74%,#e8ad5200 100%);
  opacity:0;
  transition:opacity .65s ease;
}
#headings .sample-card-face{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  transition:opacity .4s ease,transform .4s ease;
}
#headings .sample-card-front{opacity:1;transform:translateY(0)}
#headings .sample-card>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#headings .sample-card-front dl{margin-top:auto}
#headings .sample-card-back{
  position:absolute;
  inset:0;
  padding:30px;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s;
}
#headings .sample-card-fit{display:flex;align-items:center;gap:16px;margin:14px 0 4px}
#headings .sample-card-score{
  display:grid;
  place-items:center;
  flex:0 0 82px;
  width:82px;
  height:82px;
  border-radius:50%;
  border:2px solid #e8ad52;
  background:var(--brand-dark-gradient);
  color:#fff;
  font-size:30px;
  font-weight:700;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px #e8ad5226;
}
#headings .sample-card-back .sample-card-score{border-color:#fff;background:linear-gradient(-45deg,#E8AD52,#DCEFEA);color:#102A35;box-shadow:0 0 0 5px #e8ad5230,0 0 28px #e8ad5240}
#headings .sample-card-fit-label{font-size:13px;line-height:1.35;color:#31525a}
#headings .sample-card-fit-label small{display:block;font-size:11px;color:#6e8288}
#headings .sample-card h3{color:#17685f;font-weight:700}
#headings .sample-card-front h3{margin-top:14px}
#headings .sample-card-back h3{margin:12px 0 14px}
#headings .sample-card-detail{font-size:18px;line-height:1.45;margin:0}
#headings .sample-card-proof{margin-top:auto;padding-top:18px;border-top:1px solid #63817f66;font-size:14px;line-height:1.5}
#headings .sample-card-proof strong{display:block;font:11px/1.5 "Instrument Sans",sans-serif;letter-spacing:.06em;color:#17685f;margin-bottom:5px}
html.sample-scroll-scene #headings .sample-card:is(:hover,:focus-within),#headings .sample-card:is(:hover,:focus-within){
  z-index:5;
  border-color:#e8ad52;
  box-shadow:0 24px 55px #102a3514,0 0 80px 20px #e8ad5224,0 0 180px 80px #e8ad5212,0 0 280px 140px #e8ad520a,inset 0 1px 0 #ffffffe0,inset 0 0 32px #ffffff4d;
  transition-duration:.35s;
}
#headings .sample-card:is(:hover,:focus-within)::before{opacity:1;transition-duration:.35s}
#headings .sample-card:is(:hover,:focus-within) .sample-card-front{opacity:0;transform:translateY(-10px);transition-duration:.2s}
#headings .sample-card:is(:hover,:focus-within) .sample-card-back{opacity:1;visibility:visible;transform:translateY(0);transition-duration:.2s,.2s,0s;transition-delay:0s}
html.sample-scroll-scene #headings .sample-card-back{padding:34px}
@media(hover:none){
  #headings .sample-card-front{opacity:1!important;transform:none!important}
  #headings .sample-card-back{position:relative;inset:auto;padding:18px 0 0;margin-top:20px;border-top:1px solid #63817f66;opacity:1;visibility:visible;transform:none;pointer-events:auto}
  #headings .sample-card-back .sample-card-fit,#headings .sample-card-back .card-code{display:none}
  #headings .sample-card-back h3{display:none}
  #headings .sample-card-proof{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  #headings .sample-card,#headings .sample-card::before,#headings .sample-card-face{transition-duration:0s;transition-delay:0s}
}