/* Flat life-card details. Geometry, selection and the fog handoff remain in life-cards.css. */
#experience .life-card { --life-badge:#e9bdd5; background:#fff; box-shadow:none; }
#experience .life-wellbeing { --life-badge:#b9e1cf; }
#experience .life-money { --life-badge:#f0ddb2; }
#experience .life-card[data-active] { box-shadow:none; }
#experience .life-card-trigger { gap:12px; font-weight:500; color:#4f686f; }
#experience .life-card-trigger>.icon:first-child {
  box-sizing:border-box; width:44px; height:44px; padding:10px;
  color:#173c46; stroke-width:1.85; --icon-fill:#ffffff60; --icon-plate:var(--life-badge);
  border-radius:12px; background:var(--life-badge); border:0; outline:0; box-shadow:none;
  transform:none; transition:transform .35s cubic-bezier(.22,1,.36,1);
}
#experience .life-card[data-active] .life-card-trigger>.icon:first-child { transform:none; box-shadow:none; }
#experience .life-card-trigger .life-card-arrow { color:#54727a; }
#experience .life-options-inner { position:relative; }
#experience .life-resource { position:relative; gap:12px; }
#experience .life-resource>.icon {
  box-sizing:border-box; position:relative; z-index:1;
  width:35px; height:35px; padding:8px; border-radius:10px;
  color:#173c46; background:var(--life-badge); border:0;
  --icon-fill:#ffffff60; --icon-plate:var(--life-badge); stroke-width:1.75; box-shadow:none;
}
#experience .life-resource:nth-child(2)>.icon { background:#d3e9df; }
#experience .life-wellbeing .life-resource:nth-child(2)>.icon { background:#dce8f1; }
#experience .life-money .life-resource:nth-child(2)>.icon { background:#e6ddeb; }
#experience .life-resource+.life-resource::before { content:none; }
#experience .life-resource strong { letter-spacing:-.25px; }
/* The photograph is the only surface, without a colored mat or stacked rim. */
#experience .life-scene { padding:0; border-radius:20px; background:var(--life-soft); box-shadow:none; }
#experience .life-scene::before,#experience .life-scene::after { content:none; }
#experience .life-photo-frame { min-height:0; border:0; border-radius:20px; box-shadow:none; }
#experience .life-photo-frame img { object-position:50% 30%; animation-name:life-detail-photo; transform-origin:50% 30%; }
#experience .life-family .life-photo-frame img { object-position:50% 10%; transform-origin:50% 10%; }
#experience .life-wellbeing .life-photo-frame img { object-position:50% 5%; transform-origin:50% 5%; }
#experience .life-money .life-photo-frame img { object-position:50% 2%; transform-origin:50% 2%; }
@keyframes life-detail-photo { from { transform:scale(1.01); } to { transform:scale(1.04); } }
@media(min-width:761px) and (max-width:1100px) {
  #experience .life-card-trigger { gap:9px; }
  #experience .life-card-trigger>.icon:first-child { width:39px; height:39px; padding:8px; }
  #experience .life-resource { gap:8px; }
  #experience .life-resource>.icon { width:30px; height:30px; padding:6px; border-radius:9px; }
}
@media(max-width:760px) {
  #experience .life-card-trigger>.icon:first-child { width:42px; height:42px; padding:9px; }
  #experience .life-card-trigger { gap:11px; }
}
@media(max-width:360px) {
  #experience .life-card-trigger { gap:9px; }
  #experience .life-card-trigger>.icon:first-child { width:38px; height:38px; padding:8px; }
  #experience .life-resource { gap:9px; }
  #experience .life-scene,#experience .life-photo-frame { border-radius:17px; }
}
@media(prefers-reduced-motion:reduce) {
  #experience .life-photo-frame img { animation:none!important; }
  #experience .life-card-trigger>.icon:first-child { transition:none!important; }
}