@layer components{.service-card{--stack-space:var(--space-xs);--plate-edge:var(--color-text);position:relative;transition:border-color var(--transition),box-shadow var(--transition);&:has(.service-card__link:hover){--plate-border:var(--color-accent);--plate-edge:var(--color-accent);box-shadow:var(--shadow-m)}&:has(.service-card__link:focus-visible){outline:var(--border-width-thick)solid var(--color-focus);outline-offset:var(--focus-offset)}& .service-card__number{position:absolute;inset-block-start:var(--space-s);inset-inline-end:var(--space-s);color:var(--color-text-muted);font-family:var(--font-display);font-size:var(--size-step-1);font-weight:var(--font-weight-display);font-variant-numeric:tabular-nums;line-height:var(--leading-display)}& .service-card__icon{display:grid;place-items:center;inline-size:var(--touch-target);aspect-ratio:1;border:var(--border-width-hairline)solid var(--color-accent);border-radius:var(--radius-s);color:var(--color-accent-text);font-size:var(--size-step-2)}& .service-card__title{font-size:var(--size-step-2)}& .service-card__link{text-decoration:none;&::after{content:'';position:absolute;inset:0}&:focus-visible{outline:none}}& .service-card__summary{color:var(--color-text-muted)}& .service-card__more{margin-block-start:auto;color:var(--color-accent-text)}}}